全部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. C# SqlBulkCopy类批量导入数据

    特别注意  sqlbulkcopy.ColumnMappings.Add(dt.Columns[i].ColumnName, dt.Columns[i].ColumnName); 插入的时候列的顺序可 ...

  2. windows下python安装Numpy、Scipy、matplotlib模块（转载）

    python下载链接     Numpy下载链接 python中Numpy包的安装及使用 Numpy包的安装 准备工作 Python安装 pip安装 将pip所在的文件夹添加到环境变量path路径中 ...

  3. vim-colors-config

    在vim中,主题是以插件形式存在.其中系统自带的主题,存放在$VIMRUNTIME/colors文件夹下,以*.vim命名.(注:查看$VIMRUNTIME请在vim中执行 :echo $VIMRUN ...

  4. HTTP响应头缓存控制

    在一般Web开发中,有时需要设置特殊的HTTP响应头阻止客户端(一般是浏览器)缓存(使用)该次请求的响应. 这时候大部分开发人员都是百度或谷歌几段代码复制粘贴即了事. 以下简述一下关于缓存控制的几种H ...

  5. 探究 Redis 4 的 stream 类型

    redis 2 10 月初,Redis 搞了个大新闻.别紧张,是个好消息:Redis 引入了名为 stream 的新数据类型和对应的命令,大概会在年底正式发布到 4.x 版本中.像引入新数据类型这样的 ...

  6. JSP（Java Server Pages，即：Java服务器页面

    是一种跨平台的动态网页技术标准,由Sun Microsystems公司倡导.多家公司参与建立. 它在HTML文件中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(* ...

  7. esper 附录A

    A2 select irstream symbol, volume, price from MarketDate.win.time(5.5 sec) seconds seconds seconds s ...

  8. Intersection(计算几何)

    Intersection Time Limit: 4000/4000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others)To ...

  9. js的new到底干了啥 -

    javascript通过new操作符构建一个对象的步骤 <Javascript高级程序设计>的解释: 创建一个对象 将构造函数的作用域赋给新对象(把新对象作为构造函数的调用上下文,也就是t ...

  10. Java防止XSS攻击

    方法一:转义存储:添加XssFilter 1.在web.xml添加过滤器: <!-- 解决xss漏洞 --> <filter> <filter-name>xssFi ...