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

首先我们画出坦克。

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

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

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

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

tankGame1.html的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h6>HTML5坦克大战</h6>
<!--这是坦克大战的战场 -->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">

//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文（你可以理解是画笔）
var cxt=canvas1.getContext("2d");

//我的坦克
var heroX=130;
var heroY=130;

cxt.fillStyle="#DED284";
//韩老师使用先死-->后活
cxt.fillRect(heroX, heroY, 5, 30);

//画出右边的矩形
cxt.fillRect(heroX+15, heroY,5,30);
cxt.fillRect(heroX+6,heroY+5,8,20);

cxt.fillStyle="#FFD972";
cxt.arc(heroX+10, heroY+15,4,0,360,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle="#FFD972";
cxt.lineWidth=2;
cxt.beginPath();
cxt.moveTo(heroX+10, heroY+15);
cxt.lineTo(heroX+10, heroY);
cxt.stroke();

</script>

javascript时间处理机制

事件处理机制

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

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

先补充一个知识点：javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<!--当按键后，去调用test():-->
<body onkeydown="test()">
<canvas id="test" width="400px" height="300px" style="background-color:black">
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("test");
var cxt = canvas1.getContext("2d");

var ballX=30;
var ballY=30;
function drawBall(){
//如果在函数中没有定义就直接使用便利，就意味你使用的全局便利
//如果在函数中定义了才使用该变量，说明使用的是局部变量
//画出红色圆球
//画图时，要闭合路径。
cxt.beginPath();//这句必须有
cxt.fillStyle="#FF0000";
cxt.arc(ballX,ballY,10,0,Math.PI * 2,true);
//
cxt.closePath();
cxt.fill();
}
drawBall();
//现在我按w->"向上" d="右" s="下" a="左"
//当我们按下一个键时，实际上触发了一个事件，
function test(){
//怎么知道玩家按下的是什么键
//说明按下键后 事件--->event对象
var code=event.keyCode;
switch(code){
case 87:
ballY--;
break;
case 68:
ballX++;
break;
case 83:
ballY++;
break;
case 65:
ballX--;
break;
}
cxt.clearRect(0,0,400,300);
drawBall();
//按下的键实际上就是它的ascii对应的数字。
}
</script>
</canvas>
</body>
</html>

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

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

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

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

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

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

解析：

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

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

坦克需要实时变化。

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

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

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

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

html5制作坦克大战的更多相关文章

  1. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  2. javascript 面向对象制作坦克大战 （一）

    PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.   写这个的目的是为了巩固自己这段时间对js的学习.整理到博客上,算是对自己近端时间学习js的一个整理. 同时也希望可以帮助到学习js的园 ...

  3. HTML5初学---坦克大战基础

    让小球动起来,根据键盘的W(上),D(右),S(下),A(左):键的点击移动小球 <!DOCTYPE html> <html> <head> <meta ch ...

  4. HTML5之坦克大战游戏开发

    1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startA ...

  5. 用javascript 面向对象制作坦克大战（四）

    我们现在还差一个重要的功能,没错,敌人坦克的创建以及子弹击中敌人坦克时的碰撞检测功能. 5.  创建敌人坦克完成炮弹碰撞检测 5.1   创建敌人坦克对象 敌人坦克和玩家坦克一样,同样继承自我们的坦克 ...

  6. 用javascript 面向对象制作坦克大战（三）

    之前,我们完成了坦克的移动和地图的绘制,这次我们来完成碰撞检测和炮弹的发射. 上代码前来张最新的类图: 3. 碰撞检测     前面我们已经完成了坦克的移动和地图的绘制,下面我们开始写碰撞检测. 3. ...

  7. 用javascript 面向对象制作坦克大战（二）

    2.   完善地图 我们的地图中有空地,墙,钢,草丛,水,总部等障碍物. 我们可以把这些全部设计为对象. 2.1  创建障碍物对象群       对象群保存各种地图上的对象,我们通过对象的属性来判断对 ...

  8. HTML5实现坦克大战（一）

      Tank 字段 x:坦克的中心点的横坐标 y:坦克的中心点的纵坐标 dir:坦克的前进的方向 spped:坦克的速度 color:坦克的颜色,用于区分种类不同的坦克 bullet:坦克的子弹 为a ...

  9. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

随机推荐

  1. spring mvc数据验证

    今天来说一下.前段验证,与后端数据验证.大家都知道.在我们.注册与登陆的时候,往往需要对数据进行效验.那么前段我们都知道,可以使用,js去做处理. 今天主要讲解.后端的数据效验.这里我们采用Hiber ...

  2. Unity中surfaceShader的处理机制和finalColor

    http://blog.csdn.net/swj524152416/article/details/52945375

  3. 解决php函数json_encode转换后中文被编码为unicode

    大家都知道使用函数json_encode()可以方便快捷地将数组进行json编码转换,但是如果数组值存在着中文,json_encode会将中文转换为unicode编码,例如: <?PHP $ar ...

  4. CSS改变字体下划线颜色

    下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...

  5. 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse&#39; Trade》《今年暑假不AC》《排名》《开门人和关门人》

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. 鸟哥的Linux私房菜-----6、文件与文件夹管理

  7. 百度地图API简介

    百度地图API简介 在此申明不是我写的,用的是别人的,仅限自己学习 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能 ...

  8. 初步认识Spring MVC框架

    Spring MVC 框架和Struts2等一样属于MVC框架,用于处理页面和后台的交互,据说它的效率要高于Struts2.下面县先说一下Spring MVC的结构,Spring MVC主要由Disp ...

  9. -[ASIDataCompressor compressBytes:length:error:shouldFinish:] in ASIDataCompressor.o

    本文转载至 http://blog.csdn.net/m372897500/article/details/38293973 -[ASIDataCompressor compressBytes:len ...

  10. Linux下，部署多个Tomcat

    1.复制一个已有的tomcat,并重命名: 2.打开tomcat--conf--server.xml:[共修改3处配置] <Server port="8005" shutdo ...