JavaScript游戏之是男人就下100层代码打包

这次的游戏的编写难度比之前的都高很多。本次鄙人用了js的继承以及设计模式的工厂模式，也算是一个突破。。。

游戏的大致设计思路：
1，玩家类Player：一个人能左右移动，以及上下移动的小人。
拥有的基本方法：{
左右移动 : 单纯的键盘左右移动，

向下移动 : 属于向下加速度移动，每次移动都会加一个重力加速度的值，

向上移动 : 其实是跟着方块一起向上移动， 匀速向上运动，

弹跳 : 就是玩家先向上一个减速度运动，然后，当速度小于1时，像下加速度运动

}

2，方块基类BlockBase：所有方块的基类，拥有公共的方法以及接口。

拥有的基本方法：{

移动 : 方块的向上匀速移动，

检测玩家是否在方块上  : 判断玩家是否停留在方块上

}

以及一些抽象的接口函数，只有名字，需要在子类中实现，具体看源码。

3，各种子类，如 普通方块类NormalBlcok、弹跳方块类FlipBlock等

继承的实现方式如下：

在构造函数中：BlockBase.call(this);继承非prototype的属性与方法

在函数外部：子类方块.prototype = new BlockBase(); 继承基类的prototype的属性与方法

4， 工厂类BlockFactory：负责生产方块，以及击中处理方块

拥有的基本方法：{

生成方块 :  重点的方法，就是随机生成一块方块

}

其实我也不知道怎么说，还是看源码吧。里面我注释得很具体了。

还有，bug肯定是会有的，希望大家谅解。。。

最后献上预览吧。希望大家多多拍砖，能让我多些提高。最好在代码的编写上。 
 方向左右控制移动，界面是做得比较丑。。。大家见谅。
演示代码：http://demo.jb51.net/js/DownFloor/index.html
完整源码打包>> /201011/yuanma/DownFloor.rar

赞 (0)

相关推荐

  • JavaScript游戏之是男人就下100层代码打包

    这次的游戏的编写难度比之前的都高很多.本次鄙人用了js的继承以及设计模式的工厂模式,也算是一个突破... 游戏的大致设计思路:1,玩家类Player:一个人能左右移动,以及上下移动的小人.拥有的基本方法:{左右移动 : 单纯的键盘左右移动, 向下移动 : 属于向下加速度移动,每次移动都会加一个重力加速度的值, 向上移动 : 其实是跟着方块一起向上移动, 匀速向上运动, 弹跳 : 就是玩家先向上一个减速度运动,然后,当速度小于1时,像下加速度运动 } 2,方块基类BlockBase:所有方块的基类

  • javascript Xml增删改查(IE下)操作实现代码

    html文件: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>j

  • JavaScript游戏之优化篇

    1.善用DocumentFragment 之前有个打飞机的游戏.我是用如下方法添加子弹 复制代码 代码如下: for(var i=0;i<5;i++){ var bullet = new Bullet(); document.body.appendChild(bullet); } 问题就来了,我的目的是希望同时能出现5颗子弹,所以我循环将5个子弹对象添加到body,这样会导致一个结果:浏览器reflow了5次. 但其实可以找一个载体,来先把这5个子弹类装起来,然后,再一次性添加到body中,这样

  • javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

    javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

    首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态.那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片. 一.图片准备     fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏<三国志曹操传>

  • JavaScript实现非常简单实用的下拉菜单效果

    JavaScript实现非常简单实用的下拉菜单效果

    本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

  • Javascript操作表单实例讲解（下）

    Javascript操作表单实例讲解（下）

    在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示: 一.文本域 <input type="text" /> ----------------------------- 操作文本域的值 value 属性 设置或者获取值 ----------------------------- 二.单选按钮和多选按钮 <input type="radio" /> <

  • javascript基于DOM实现省市级联下拉框的方法

    本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

  • JavaScript实现计算圆周率到小数点后100位的方法示例

    本文实例讲述了JavaScript实现计算圆周率到小数点后100位的方法.分享给大家供大家参考,具体如下: 浮点数的有效数位是16位,我自己做了一个大数类,能存储100位有效数位,并实现了大数类的基本运算.我用它来计算圆周率(割圆法,即多边形逼近),得到了小数点后一百位有效数字,比对了Machin 公式的计算结果,没有误差.用时约2秒. 完整示例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8&

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色. 嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一

随机推荐