这是坦克大战游戏1.0版，以后会陆陆续续的完成...
准备素材(itank.jpg)：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克游戏1.0版</title>
</head>
<body onkeydown="doSomething(event)">
<div id="field" style="background-color: black; width: 500px; height: 400px; position: absolute;">
<div id="tank" style="background-position-y: -40px; background-image: url(‘itank.jpg‘); width: 40px; height: 40px; position: absolute;" ></div>
</div>
<script type="text/javascript">
//用面向对象的方法开发，web版本的坦克大战1.0(可以通过asdw键来控制坦克的走向)
function MyTank(x, y, direct) {
this.x = x;//坦克的横坐标
this.y = y;//坦克的纵坐标
this.direct = direct;//方向
this.speed = 5;//速度
//初始化
tank.style.left = this.x+"px";
tank.style.top = this.y+"px";
tank.style.backgroundPositionY = "0px";
//event表示按键事件
this.move = function move(event) {
//a 表示左 3
//s 表示下 2
//d 表示右 1
//w 表示上 0
switch(event.keyCode) {
case 65:
//a 表示左 3
this.x -= this.speed;
this.direct = 3; //发射子弹的时候要判断方向
tank.style.backgroundPositionY = "40px";
break;
case 83:
//s 表示下 2
this.y += this.speed;
this.direct = 2;
tank.style.backgroundPositionY = "80px";
break;
case 68:
//d 表示右 1
this.x += this.speed;
this.direct = 1;
tank.style.backgroundPositionY = "120px";
break;
case 87:
//w 表示上 0
this.y -= this.speed;
this.direct = 0;
tank.style.backgroundPositionY = "0px";
break;
}
//统一改变位置
tank.style.left = this.x+"px";
tank.style.top = this.y+"px";
}
}
//创建坦克
var hero = new MyTank(300, 360, 0);
//判断用户希望干什么
function doSomething(event) {
if(event.keyCode == 65 || event.keyCode == 68 || event.keyCode == 83 || event.keyCode == 87) {
hero.move(event);
}
//开火
}
</script>
</body>
</html>
于是坦克就可以在夕阳下狂奔了！！！
时间： 2024-08-10 23:21:58