HTML5之canvas简单射箭小游戏

最近折腾一个自己个人主页,无奈履历太渣,能放在首页的东西不多,于是想给自己的个人主页上添加一个小游戏。遂参考了各种教程,使用HTML5的canvas元素做了一个相当原始的东西出来,效果如图~

HTML5之canvas简单射箭小游戏_第1张图片
QQ截图20160325110909.png

如图所示,右边是一个目标靶子,当我们点击start按钮后它会以一个特定的速度上下来回移动。靶子动起来之后我们点击shoot按钮就会从左边射出一支“箭”(其实就是一条红线啦(⊙﹏⊙))。这支箭射中靶子后根据你射中的位置有0到10十个级别的分数。Ok,接下来是源码。主要是在两个循环里面移动箭和靶子的位置,不断调用制绘制它们的方法。然后用一个主循环不断判定游戏是否终止。

您的浏览器不支持canvas,请使用chrome或者firefox体验~

你可能感兴趣的:(HTML5之canvas简单射箭小游戏)