码迷,mamicode.com
首页 > 其他好文 > 详细

canvas开发小游戏经验总结

时间:2020-06-21 00:45:41      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:速度   animation   更新   tom   无限循环   因此   总结   canvas   小游戏   

canvas绘制原理和传统dom不一样,canvas是串行绘制,因此代码的先后顺序交换并不是等效的。想要覆盖其他元素,那么只需要在其后调用绘制方法即可覆盖。

无限循环图片可以采用两张一样的图片头尾相接展示。

requestAnimationFrame理想情况会以每秒60次速度执行,如果某些需求需要降速,可以使用Math.floor,比如原本是x++,一秒钟x会增加60,那么我们想放慢五倍,可以改成

a+=0.2,x=Math.floor(a),此时x一秒只会增加12。

判断a、b两个元素没有碰撞,可以使用

a.top > b.bottom ||
a.bottom < b.top ||
a.right < b.left ||
a.left > b.right。
 
游戏开发建议采用面向对象的方法,所有的物体都应继承自Sprite精灵类,维护x、y坐标等基本状态,提供绘制(draw),更新状态(update)等基本方法。
 
canvas 2d小游戏开发的api并不多,上手难度也不大,更多在于自己探索奇技淫巧,用巧妙的办法实现效果。

 

canvas开发小游戏经验总结

标签:速度   animation   更新   tom   无限循环   因此   总结   canvas   小游戏   

原文地址:https://www.cnblogs.com/flamestudio/p/13170819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!