全部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. java使用命令wsimport构建WebService客户端

    wsimport -d d: -keep -extension -p com.demo.client http://192.168.33.3//RECEPTIONws.ASMX?WSDL 客户端:在J ...

  2. secureCrt 开启Linux上的oracle服务

    IP   :  192.168.0.21 user:  root pwd:     123456 --------------------------------------------------- ...

  3. sublime使用技巧（2）-- 实用插件推荐【持续更新】

    1.Auto semicolon 在括号内输入分号,会自动把光标移到行尾然后再输入分号. 2.DocBlockr 补全注析格式,例如在函数上面输入/** + Enter,就会自动补全函数的注析说明. ...

  4. MySQL视图概述

    1.介绍 在传统关系型数据库里,视图有时也被称作虚表,是基于特定SQL结果集的虚拟数据表.在有些场合会变得很方便,例如:原有系统重构,旧的数据表A和B已经被拆分和合并到数据表C.D.F里面,为了实现平 ...

  5. 滑动窗口计数java实现

    滑动窗口计数有很多使用场景,比如说限流防止系统雪崩.相比计数实现,滑动窗口实现会更加平滑,能自动消除毛刺. 概念上可以参考TCP的滑窗算法,可以看一下这篇文章(http://go12345.iteye ...

  6. Http权威指南学习研究

    学习时间:                                   该学习:第六章  6.6小节   加油   185页 2017年5月15日15:13:00 今天任务: 看完前两章节: ...

  7. PDP开发环境搭建

    1. 安装git 2.创建SSH-rsa钥匙 3. 写入 gitlab 4. 克隆分支 git clone  -b  dev_pdp_minz_ep_metting   git@gitlab.csvw ...

  8. 求最小正整数x,A^x=1(mod M)求阶模板

    整数的阶:设a和n是互素的正整数,使得a^x=1(mod n)成立的最小的正整数x称为a模n的阶 //求阶模板:A^x=1(mod M),调用GetJie(A,M) //输入:10^10>A,M ...

  9. java 基于tomcat的数据源案例

    1.在context中定义数据源 <?xml version="1.0" encoding="UTF-8"?> <Context path=& ...

  10. ubuntu 安装wine

    笔记 1.安装源 sudo add-apt-repository ppa:wine/wine-builds sudo apt-get update 2.安装wine sudo apt-get inst ...