您的位置：首页 > Web前端 > HTML5

HTML5坦克大战（2）绘制坦克复习

2016-09-28 14:27 169 查看

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大战</title>
<script src="tank.js"></script>
</head>
<body onkeydown="moveTank(hero)">
<canvas id="canvas" width="1000" height="400" style="border:1px solid red; display:block; margin: 50px auto; background-color:black;"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var hero = new Tank(30, 30, 0, 5);

//创建hero对象
var hero = new Tank(30, 40, 0, 5);

function moveTank(tank) {
//上下左右移动坦克
switch (event.keyCode) {
case 65://左
tank.direct = 3;
tank.moveLeft();
break;
case 68://右
tank.direct = 1;
tank.moveRight();
break;
case 87://上
tank.direct = 0;
tank.moveUp();
break;
case 83://下
tank.direct = 2;
tank.moveDown();
break;
default:
}
drawTank(hero);
}

drawTank(hero);
</script>
</body>
</html>

JavaScript代码：

function Tank(x, y, direct, speed) {
//创建坦克类，横纵坐标，方向，速度
this.x = x;
this.y = y;
this.direct = direct;
this.speed = speed;
this.moveUp = function () {
this.y -= this.speed;
}
this.moveDown = function () {
this.y += this.speed;
}
this.moveLeft = function () {
this.x -= this.speed;
}
this.moveRight = function () {
this.x += this.speed;
}
}
function drawTank(tank) {
//画坦克
switch (tank.direct) {
case 0:
case 2:
//向上，向下
//清屏
context.clearRect(0, 0, canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, 5, 30);//左轮
context.fillRect(tank.x + 6, tank.y + 5, 8, 20);//身体
context.fillRect(tank.x + 15, tank.y, 5, 30);//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + 10, tank.y + 15, 4, 0, 2 * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = 2;
context.moveTo(tank.x + 10, tank.y + 15);
if (tank.direct == 0) {
context.lineTo(tank.x + 10, tank.y);
} else if (tank.direct == 2) {
context.lineTo(tank.x + 10, tank.y + 30);
}
context.stroke();
context.fill();
context.closePath();
break;
case 1:
case 3:
//向左，向右
//清屏
context.clearRect(0, 0, canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, 30, 5);//左轮
context.fillRect(tank.x + 5, tank.y + 6, 20, 8);//身体
context.fillRect(tank.x, tank.y + 15, 30, 5);//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + 15, tank.y + 10, 4, 0, 2 * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = 2;
context.moveTo(tank.x + 15, tank.y + 10);
if (tank.direct == 1) {
context.lineTo(tank.x + 30, tank.y + 10);
} else if (tank.direct == 3) {
context.lineTo(tank.x, tank.y + 10);
}
context.stroke();
context.fill();
context.closePath();
break;
default:
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航