标签：上下 定义 事件处理 htm 获取 问题 doc 控制 line
全部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中如何通过对象冒充来继承对象。
标签：上下 定义 事件处理 htm 获取 问题 doc 控制 line
原文地址：https://www.cnblogs.com/liaoxiaolao/p/9664917.html
