<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body onkeydown="getCommand()">
<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");
//定义一个Hero类
//x表示横坐标，主表示纵坐标
function Hero(x, y, direct, speed) {
this.x = x;
this.y = y;
this.speed = speed;
this.direct = direct;
//向上
this.moveUp = function () {
this.y -= this.speed;
}
//向右
this.moveRight = function () {
this.x += this.speed;
}
//向下
this.moveDown = function () {
this.y += this.speed;
}
//向左移
this.moveLeft = function () {
this.x -= this.speed;
}
}
//我的坦克 w表示向上,d表示向右 s表示向下 a表示向左
var hero = new Hero(140, 140, 0, 10);
//先画出坦克
darwTank(hero);
//绘制坦克对象
function darwTank(hero) {
//画出坦克
cxt.fillStyle = "#DED284";
//画出左面
cxt.fillRect(hero.x, hero.y, 5, 30);
//画出右边
cxt.fillRect(hero.x + 15, hero.y, 5, 30);
//中间矩形
cxt.fillRect(hero.x + 6, hero.y + 5, 8, 20);
//画出坦克的盖子
cxt.fillStyle = "#FFD972";
cxt.arc(hero.x + 10, hero.y + 15, 4, 0, 360, true);
cxt.fill();
//车出炮线
cxt.strokeStyle = "#FFD972";
cxt.lineWidth = 1.5;
cxt.beginPath();
cxt.moveTo(hero.x + 10, hero.y + 15);
cxt.lineTo(hero.x + 10, hero.y);
cxt.closePath();
cxt.stroke();
}
//接收键盘命令
function getCommand() {
var code = event.keyCode;
//alert(code);
switch (code) {
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
cxt.clearRect(0, 0, 400, 300);
darwTank(hero);
}
</script>
</body>
</html>
HTML坦克大战学习02---坦克动起来,布布扣,bubuko.com
时间： 2024-08-25 09:15:42