html5制作坦克大战

全部html5都采用绘图技术完成。坦克是画出来的。（坦克，子弹，墙，水，草坪）

首先我们画出坦克。

坦克是两边两个矩形，中间一个大矩形，矩形了有一个圆，还有一根线。

画出坦克的思路是以坦克的左上角为参照点，画出坦克的其他部分。

这样的好处是，当左上角的点发生改变是，坦克才能发生改变。

不使用图片的原因就是图片是比较耗费资源的。因为图片的像素点很大。

tankGame1.html的代码

HTML5坦克大战

javascript时间处理机制

事件处理机制

怎样让小求收到键盘控制上下左右移动。

2.让坦克可以上下左右移动

先补充一个知识点：javascript

浏览器在请求页面的时候可能会发出多次请求。

text/css，把它当做css文件来解析。

如果把图片,css文件，js文件当做html来解析是会出问题的。

当请求一个带有图片等资源的页面时浏览器会经过多次请求将页面完整显示。

第一次发起请求：index.html。

根据请求找到对应的index.html页面并响应给客户端。

解析：

客户端解析index.html页面，发现有图片，再次发起请求获取该图片。而服务端根据请求找到响应的图片，并响应给客户端。

客户端接收到图片后，将页面显示在浏览器中。

坦克需要实时变化。

把页面中的类和函数分别放在js中。

 

画出敌人坦克的思路：
a.敌人坦克做成对象->定义EnemyTank。

Hero Enemy都可以继承一个坦克类，因此可以抽象出一个父类。把hero和enemy的共有特点放在Tank类中，在js中，是通过对象冒充来实现继承的。

在js中如何通过对象冒充来继承对象。

 

转载于:https://www.cnblogs.com/liaoxiaolao/p/9664917.html