用不同颜色画出自己和敌人的坦克，同时用adws键控制自己的坦克运动-CSDN博客

本文链接：https://blog.csdn.net/u012125696/article/details/78045897

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8"/>
<title></title>
</head>
<body οnkeydοwn="getCommand()">
<h1>html5-经典的坦克大战</h1>
<canvas id ="tankMap" width="400px" height="300px"
style="background-color:black">
</canvas>

<script type="text/javascript" src="..\\js\\tankGames.js"></script>
<script type="text/javascript">
var canvas1=document.getElementById("tankMap");
var cxt = canvas1.getContext("2d");

//我的坦克hero
var hero = new HeroTank(40, 40, 0, heroColors);
drawTank(hero);
//定义敌人的坦克（敌人的坦克有多少？思路：是单个单个的定义，还是放在数组中）
var enemyTanks = new Array();
//先死后活，定义3个，后面我们打敌人坦克的数量，做出变量
for (var i = 0; i < 6;i++)
{
//创建一个坦克
var enemyTank = new EnemyTank((i + 1) * 50, 0, 2, enemyColors);
//把坦克放进数组中
enemyTanks[i] = enemyTank;
}
//打开页面先刷新一次
flashTankMap();
//专门写一个函数，用于定时刷新我们的作战区,把要在作战区出现的元素(自己的坦克、
//敌人的坦克、子弹、炸弹，障碍物)
function flashTankMap() {
//我的坦克
drawTank(hero);
//敌人所有的坦克
for (var i = 0; i < 3; i++)
drawTank(enemyTanks[i]);

}

//这是一个接收用户按键的函数
function getCommand() {
var code = event.keyCode;
switch (code) {
case 87://up
hero.moveUp();
break;
case 68://right
hero.moveRight();
break;
case 83://down
hero.moveDown();
break;
case 65://left
hero.moveLeft();
break;
}
cxt.clearRect(0, 0, 400, 300);
//出发这个函数flashTankMap();
flashTankMap();
//重新绘制所有的敌人的坦克，你可以在这里写代码（）

}
</script>
</body>

</html>

//js部分

//定义颜色的全局变量
var heroColors = new Array("#BA9658", "#FEF26E");
var enemyColors = new Array("#00A2B5", "#00FEFE");
//其他的坦克，这里的拓展性还可以

function Tank(x, y, direct, color) {
this.x = x;
this.y = y;
this.speed = 8;
this.direct = direct;
this.color = color;
//up
this.moveUp = function () {
if (2 != this.direct) {
if (this.y - this.speed < 0)
this.y = 0;
else
this.y -= this.speed;
}
this.direct = 0;
}
//right
this.moveRight = function () {
if (3 != this.direct) {
if (this.x + this.speed > 400 - 30)
this.x = 400 - 30;
else
this.x += this.speed;
}
this.direct = 1;
}
//down
this.moveDown = function () {
if (0 != this.direct) {
if (this.y + this.speed >= 300 - 30)
this.y = 300 - 30;
else
this.y += this.speed;
}
this.direct = 2;
}
//left
this.moveLeft = function () {
if (1 != this.direct) {
if (this.x - this.speed < 0)
this.x = 0;
else
this.x -= this.speed;
}
this.direct = 3;
}
}

//把绘制坦克封装成一个函数，将来可以作为成员函数
function drawTank(tank) {
switch (tank.direct) {
case 0:
case 2:
//画出自己的坦克，使用前面的绘图技术
//设置颜色
cxt.fillStyle = tank.color[0];
//使用先死--》后活(初学者最好使用这个方法)
//先画出矩形
cxt.fillRect(tank.x, tank.y, 5, 30);
//画出右边的矩形（这时请大家思路-》一定要定义一个参照点）
cxt.fillRect(tank.x + 15, tank.y, 5, 30);
//画出中间矩形
cxt.fillRect(tank.x + 6, tank.y + 5, 8, 20);
//画出中间的盖子
cxt.beginPath();
cxt.fillStyle = tank.color[1];
cxt.arc(tank.x + 10, tank.y + 15, 4, -30, 360, true);
cxt.closePath();
cxt.fill();
//画出炮筒
cxt.strokeStyle = tank.color[1];
cxt.lineWidth = 1.5;
cxt.moveTo(tank.x + 10, tank.y + 15);
if (0 == tank.direct)
cxt.lineTo(tank.x + 10, tank.y);
else if (2 == tank.direct)
cxt.lineTo(tank.x + 10, tank.y + 30);
cxt.stroke();
break
case 1:
case 3:
//画出自己的坦克，使用前面的绘图技术
//设置颜色
cxt.fillStyle = "#BA9658";
//使用先死--》后活(初学者最好使用这个方法)
//先画出矩形
cxt.fillRect(tank.x, tank.y, 30, 5);
//画出右边的矩形（这时请大家思路-》一定要定义一个参照点）
cxt.fillRect(tank.x, tank.y + 15, 30, 5);
//画出中间矩形
cxt.fillRect(tank.x + 5, tank.y + 6, 20, 8);
//画出中间的盖子
cxt.beginPath();
cxt.fillStyle = "#FEF26E";
cxt.arc(tank.x + 15, tank.y + 10, 4, -30, 360, true);
cxt.closePath();
cxt.fill();
//画出炮筒
cxt.strokeStyle = "#FEF26E";
cxt.lineWidth = 1.5;
cxt.moveTo(tank.x + 15, tank.y + 10);
if (1 == tank.direct)
cxt.lineTo(tank.x + 30, tank.y + 10);
else if (3 == tank.direct)
cxt.lineTo(tank.x, tank.y + 10);
cxt.stroke();
break
}
}

//定义一个hero类
//x:横坐标 y:纵坐标
function HeroTank(x, y, direct,color) {
//下面两句话的作用是：通过对象冒充达到继承的效果
this.tank = Tank;
this.tank(x, y, direct, color);
}
//定义一个敌人的坦克
function EnemyTank(x, y, direct, color) {
this.tank = Tank;
this.tank(x, y, direct, color);
}