canvas小程序-快跑程序员

canvas不用说html5带来的好东西,游戏什么的,么么哒

记得有一天玩手机游戏,就是一个跳跃过柱子那种,其实元素很简单啊,app能开发,借助html5 canvas也可以啊,于是就开始了。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

canvas小程序-快跑程序员

游戏的全部

1. 一个会动的程序员,用一张图片,够省事

  程序员的动作,跳跃

  程序猿的状态,活着or死亡

2. 背景,理论背景和柱子们应该分开,分开可以采用分层的canvas来实现

3. 声音,跳跃,死亡,开始,死亡等等,借用audio来实现,这里我就实现了跳跃的声音

4. 记分牌

5. 消息板

代码行数 600行左右。

如图一个简单的游戏就出来了,当然,这个只是demo

碰撞计算,复杂重力计算,矩形柱子生成规则,水平速度,连续跳跃流程度等等我想到的,哈哈,都没很好的实现,

为什么呢,因为,能力不足,哈哈。

 

代码摘要:

baseDraw.js: 绘图的基类,提供绘制图片,文本,矩形的方法

main.js:入口文件,初始化游戏

Messager.js:显示消息,包含记分和屏幕中心的提示

rectFactory.js:柱子矩形的生成和擦除,核心

runnner.js:主角,重置,状态检查等

sounder.js :声音

utils.js :辅助类,复制和颜色随机

 

源码快跑程序员

 

上一篇:转使用chrome命令行:disable-web-security 实现浏览器跨域


下一篇:函数节流和函数防抖