最近研究了一下H5的canvas游戏,捣鼓了一个简单的马里奥游戏,没用一些canvas游戏框架。在这里分享一下,附上代码在github上的地址:https://github.com/ysj16/mario; 由于资源,时间所限,只实现了一部分的游戏功能,欢迎fork。

主要的js文件有3个,game.js,mario.js,app.js,简单介绍一下;

  • Game.js里的代码是在网上看到的,直接拿来用了,功能是预加载图片资源(等用到了再去下载图片肯定不行)。
  • Mario.js里主要是游戏的类的封装,包括:
  • Control:游戏控制类,用于控制游戏人物的上下左右移动;
  • Map:地图类,载入背景图,记录当前在地图上的位置;
  • Camera:玩家视角类,里面的各种方法,drawModels,drawLivings,drawPlayer等用于在Canvas上面绘制画面;
  • Models:模型类,游戏中的静态资源砖头,土地,管道等可以通过这个类实例化;
  • Livings:生物类,继承自Models,可以用于实例化地图上的怪物,在其原型上定义了move(移动),die(死亡),gravity(重力),collide(碰撞检测)等方法。
  • Player:玩家类,继承自Livings,实例化马里奥
  • GameLoop:游戏循环类,游戏能“动”起来的一个关键

定义:

requestAnimationFrame(this.frame.bind(this)) 这里用bind改变循环体中的this指向,否则this会指向window。关于bind函数,是ECMAScript5中Function的一个方法,作用和call,apply类似,都是改变this的指向,在我理解,call,apply在改变this的时候同时执行了方法,而bind只是单纯的改变this的指向。

第一次写游戏相关的东西,代码耦合度过高,不足之处,望诸君不吝赐教。

8 收藏


直接登录

推荐关注