github上案例
1、初始化界面
-清空界面内容,分数清零
-设置等级按钮,利用json存储点击难度的鼠标坐标
-开始游戏
2、分析对象
-飞机对象
-敌军对象
-敌军BOSS对象(继承敌军)
3、创建飞机对象
Plane
-属性:图像对象(飞机)、难度等级、飞机速度、界面元素、子弹
-planeImg:
-设置属性:图片路径、class属性、位置初始化样式
-index
-speed
-planeBox
-bulletSrc
-利用document对象的onmousemove事件来让飞机跟着鼠标指针移动
-飞机样式的上和左等于鼠标指针的上和左
-方法:初始化、设置难度等级、子弹运动轨迹、子弹更新
-exe
-设置难度等级、子弹运动轨迹、子弹更新
-degreeSpeed
-根据index设置不同speed
-bulletSport
-给planeImg添加方法timer:利用定时器(setInterval)不断生成子弹timer
-生成子弹
-new一个子弹图像对象,设置子弹对象属性(图片路径、class属性、位置初始化样式)
-创建音频元素(audio),设置属性
-将子弹和音频加入dom树中
-子弹移动:如果ifEnd为真:如果子弹距离顶部的距离(offsetTop)小于子弹的高度,将子弹移除dom树,并return;
如果不小于,利用requestAnimationFrame重复渲染帧,一直生成子弹
-bulletUpdate
-给planeImg添加方法timer1:利用定时器不断生成子弹timer1(100,1) -----fraction==100
-给planeImg添加方法timer2:利用定时器(setInterval)生成子弹timer1(200,-1)
-如果分数score大于等于fraction
4、创建敌军对象
EnemyPlane
-属性:速度、移动、难度等级、
-speed
-moveS
-index
-S
-方法:初始化、敌军下落速度、生成敌军、检测是否碰撞方法、敌军和飞机的碰撞检测、敌军和子弹的碰撞检测、敌军停止生产、结束游戏
-exe
敌军下落速度、生成敌军
-enemySpeed
-根据不同难度等级设置不同的移动速度
-bornEnemy
-根据定时器生成敌军timer
-new一个图像对象enemyImg,设置属性,加入到dom树中
-敌军移动:如果ifEnd为真:如果敌军距离顶部的距离(offsetTop)大于了文档的的可见区域高度,将敌军移除dom树,并return;
-利用requestAnimationFrame重复渲染帧,一直生成敌军,并对enemyImg进行碰撞检测
-collision(obj,obj1)
-obj/obj1离顶部的高度,obj/obj1自身的高度,obj/obj1离左边的高度,obj/obj1自身的宽度
-不碰到的情况:
-obj离顶部的高度加上自身的高度 小于 obj1离顶部的高度
-obj离顶部的高度 大于 obj1离顶部的高度加上自身的高度
------宽度类似
-返回除上面四种情况的情况
-enemyPlane
-找到飞机对象
-如果飞机和敌军碰撞,取消子弹和敌军的生产,出现boom画面(new一个图片对象,设置属性,添加到dom树中)
-boom画面利用定时器出现1秒,游戏结束
-将敌人和飞机移除dom树
-enemyBullet
-找到所有子弹对象
-遍历子弹,如果子弹和敌军碰撞(子弹打到了敌军),cancelAnimationFrame()方法停止渲染生成子弹和敌军(碰到的那个子弹和敌军)
-出现boom画面一秒(利用定时器),移除boom对象
-将碰撞到的子弹和敌军移除dom树中,分数+10,写入界面中
-stopEnemy
-清除定时器
-gameOver
-清除界面
-创建元素,重新设计页面(得分,重新开始),加入到dom树中
-重新开始点击事件:初始化方法
5、敌军Boss情况
Boss
-从敌军对象那里继承
-原型继承和构造函数继承
-属性:boss图片、血条
-bossSrc
-blood
-方法:初始化、生成boss、boss血条等级、boss出现、boss停止生产、碰撞检测、子弹和boss碰撞检测、飞机和boss碰撞、游戏结束
-exe
-生成boss、boss血条等级、boss?
-bornBoss
-利用定时器生成boss(和敌军生成差不多)
-如果分数大于设置的boss出现的分数
-创建对象bigBoss,里面包括血条和图片对象
-bossBlood
-根据index设置不同血条
-bossShow
-根据index设置要boss出现时需要达到的分数
-stopBoss
-清除定时器
-collision
-bulletBoss
-如果碰撞,对象bigBoss的属性bulletAmount++,血条宽度改变,子弹停止渲染,移除dom树
-bulletAmount如果和血条相等,则代表boss被打败,则停止请求渲染帧,出现boom画面
-余下和前面类似
-planeBoss
-gameOver
5、开始游戏
1)放置计分器
创建元素节点(span),添加到界面
2)放置音乐
创建元素节点(audio标签),添加到界面
-实例化飞机对象,初始化
-实例化敌军对象,初始化
-实例化Boss对象,初始化