北京根治荨麻疹医院 http://pf.39.net/bdfyy/bdfhl/210708/9159711.html中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片,在的基础上我们来做一个基于HTML5的坦克大战游戏,下面我们开始吧微笑一、用Canvas画出我们的坦克我们设计的坦克结构如下图所示,如果有的朋友有更好的设计,希望分享和交流一下。如上图所示,我们的坦克基本上是由三个矩形和一个圆形一个线段组成,每个部件的尺寸进行了标记,单位为px,下面我们用中讲到的知识来画出我们的坦克,注意:我们在画坦克的时候应该选择一个参考点,这里我们选择的是坦克的左上角,如图所示。二、怎么让坦克动起来?在研究怎么让坦克动起来之前,我们先来研究一下怎么让一个小球通过键盘操作使其动起来。首先我们给body标签添加一个监听函数我们可以在外部定义两个全局的变量分别表示x轴和y轴的坐标,然后通过改变ballX和ballY的值来改变小球的位置,我们用键盘的WDSA键来控制,这样出来的效果非常奇怪,如下图:我们在绘制的时候没有将以前位置的小球擦除掉,在每次重新绘制前应该先擦除一下,下面将全部代码贴出来:三、让我们的坦克动起来我们的坦克如果只是朝一个方向移动的话就非常容易了,只要将上面代码中的画小球改成画坦克就OK了,在让坦克移动之前我们首先应该考虑的是怎么让坦克绕着自己的中心朝各个方向转动的问题。好的,再将上面的图贴出来分析一下。详细的计算过程我就不啰嗦了,想必大家的数学都很好,按照上图的比例计算好各个组件的坐标和位置,旋转后坦克画法如下:好了现在我们发现坦克朝向左边和右边仅仅只有炮筒的方向不同,同理朝向上边和下边也仅仅只有炮筒的方向不同,这时候我们可以将四个方向分为两种情况,再在各个小情况中做处理。同时用OO的思想将代码进行了封装,代码如下:运行结果:
转载请注明:http://www.aierlanlan.com/tzrz/1228.html