H5小游戏-贪吃蛇

 代码


phaser是一个html5的开源游戏框架,官网http://phaser.io/news

只考虑应用,而不是开发phaser本身,只需要下载phaser.min.js和phaser.js即可

phaser是一个基于state的游戏框架,整个游戏生命周期就是从一个state跳转到另一个state

有几个state是游戏必须的,比如

preload: 预加载资源

create:初始化

update:运行

preload一般也就是只做预加载(不小心把game.add.sprite()加入preload,结果浏览器瞬间吞掉2G内存),

create创建各种sprite,audio等,一个静态的场景

update会被频繁调用,一般会做一些碰撞检测,修改sprite状态等

贪吃蛇中的流程

preload -> create -> play

以上为三个状态,最后的play中包含了一个update() state, 实现所有的贪吃蛇逻辑


state是什么?

只要包含preload/create/update之一的就一个状态  (整个游戏是一个state,包含create/preload/boot等state,而

每一个state本身也可以包含create/preload/boot)


state之间如何跳转?

game.state.add() 增加state

game.state.start() 跳转到另一个state


动画如何实现?

受到MFC的MVC模式的影响,最初以为所有动画都是update()中实现的,可惜这是一个错误的理解。。。

update()因为调用频繁,所以最好不要在其中有过于复杂的操作,游戏中的动画可以通过以下几个途径实现动画

a) game.add.tileSprite()/sprite.animations():这类函数本身自带动画,适合一些sprite自身不需要交互的动画,比如星星闪烁,小鸟山东翅膀等动画

b) timer()/mouse:相应定时器和鼠标输入,这个是通过相应的回掉函数实现

c)update(): 游戏中主要的逻辑都在最后一个state的update()中实现,比如碰撞检测,文字显示,事件触发等,都是通过在update()中修改各种状态参数实现的



实现中遇到的一个问题:

Phaser.Physics.enable() 这个函数始终提示not a function?? 明明doc中有,下载到最新的phaser版本依然not a function,最后用Game.Physics.enable()替代了


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章