Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西。利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://github.com/CuteBlackCat/tinyHeart
这是一个完全由Canvas绘制的游戏,效果图:
这个小游戏很具有美感,没一点一滴都是绘制出来的,包括下面的海葵能摆动。鱼的摆动是有鼠标的移动来决定的。
每个实物都被封装成了一个类,用面向对象思想来实现确实清晰易懂并且易维护,还很高大上!!
通过这个例子我们可以初步学习到如何一步步的绘制我们所想表达的效果,可以通过window.requestAnimationFrame来循环每一帧,从而弃用setInterval和setTimeout方法。并能了解一个大型项目需要有一个主要的js来初始化其他类,易于后期维护。我们还能熟悉一些canvas简单的API。还可以知道如何用鼠标控制一个物体的移动方向以及移动速度。
总之,这个例子很适合canvas初学者,但需要一定的js面向对象基础。