全部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. 在Servlet的GenericServlet类中为什么有两个init()方法

    想要搞清楚这件事情,必须先了解Servlet容器调用Servlet的过程.调用过程如下 首次访问该Servlet1.调用init(ServletConfig config) 进行初始化,Servlet ...

  2. 【JMeter4.0学习（十）】之JMeter函数简单运用以及结合正则表达式提取器

    下面来简单的举个栗子: 首先,把函数和正则表达式提取器放在一块来介绍,如下所示: 1.结构完整展示,下面再一步一步创建添加: 2.添加线程组: 3.首先添加HTTP请求1 4.添加结果树后,运行后查看 ...

  3. Java并发：等待事件发生后所有线程继续执行

    等待某一个指定的事件发生后,才让多个等待的线程继续执行,以下是我能想到的几个方法,欢迎讨论.指正. 1.闭锁CountDownLatch 闭锁是典型的等待事件发生的同步工具类,将闭锁的初始值设置1,所 ...

  4. Android Studio 默认的快捷键

    参考资料: 1.http://stormzhang.com/devtools/2014/12/09/android-studio-tutorial3/ Action Mac OSX Win/Linux ...

  5. android的DrawerLayout用法

    DrawerLayout的关键点(我认为的)就在于layout文件的layout_gravity属性的值,只有左右,两种选择,不能从上下滑出来,就算有这个效果也不是这个套路弄出来的. <?xml ...

  6. chattr

    chattr 功能:设置文件隐藏属性常用参数:+    增加某个特殊权限,其他原本存在的参数不动-     删除某个特殊权限,其他原本存在的参数不动=    设置一定,且仅有后面接的参数 i   文件 ...

  7. volley全然解析

    一.volley是什么? 1.简单介绍   Volley是Goole在2013年Google I/O大会上推出了一个新的网络通信框架,它是开源的.从名字由来和配图中无数急促的火箭能够看出 Volley ...

  8. idangerous swiper

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  9. JS获取图片的缩略图

    js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. 【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡 期望DP+高斯消元

    [BZOJ1778][Usaco2010 Hol]Dotp 驱逐猪猡 Description 奶牛们建立了一个随机化的臭气炸弹来驱逐猪猡.猪猡的文明包含1到N (2 <= N <= 300 ...