html5制作坦克大战

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

全部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>

<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");