canvas开发小游戏经验总结

Posted 2020-12-11 flamestudio

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并不多，上手难度也不大，更多在于自己探索奇技淫巧，用巧妙的办法实现效果。