要求：
实现：
将坦克图片放在页面上：
<img id="mytank" src="./img/right.png"/>
在css中设置坦克的初始位置以及页面背景：
<style type="text/css">
input { font-size: 26px; margin-top: 20px; }
body { background-image: url("./img/grassland.png"); }
#mytank { position: absolute; left: 10px; top: 100px; }
</style>
加入提示（如何操作）:
移动控制以及图片的转变：
document.addEventListener("keydown", function(event) {
var keyCode = event.keyCode;
switch(keyCode) {
case 65: // 左箭头键
moveTankLeft();
tank.src = "./img/left.png";
break;
case 87: // 上箭头键
moveTankUp();
tank.src = "./img/up.png";
break;
case 68: // 右箭头键
moveTankRight();
tank.src = "./img/right.png";
break;
case 83: // 下箭头键
moveTankDown();
tank.src = "./img/down.png";
break;
}
});
边界检查，确保坦克不会移出边界：
function moveTankLeft() {
if (tankPositionX > 0) {
tank.style.left = (tankPositionX -= moveStep) + "px";
}
}
function moveTankUp() {
if (tankPositionY > 0) {
tank.style.top = (tankPositionY -= moveStep) + "px";
}
}
function moveTankRight() {
var tankWidth = tank.clientWidth;
var screenWidth = window.innerWidth;
if (tankPositionX + tankWidth < screenWidth) {
tank.style.left = (tankPositionX += moveStep) + "px";
}
}
function moveTankDown() {
var tankHeight = tank.clientHeight;
var screenHeight = window.innerHeight;
if (tankPositionY + tankHeight < screenHeight) {
tank.style.top = (tankPositionY += moveStep) + "px";
}
}
禁用鼠标右键
document.addEventListener("contextmenu", function(event) {
event.preventDefault(); // 阻止默认右键菜单
});
完整代码：
<body>
<img id="mytank" src="./img/right.png"/>
<script>
//219970544-郑北东
var tank = document.getElementById("mytank");
var tankPositionX = 10;
var tankPositionY = 100;
var moveStep = 20;
alert("使用键盘上的箭头键来移动坦克：\n" +
"A：向左移动\n" +
"W：向上移动\n" +
"D：向右移动\n" +
"S：向下移动");
document.addEventListener("keydown", function(event) {
var keyCode = event.keyCode;
switch(keyCode) {
case 65: // 左箭头键
moveTankLeft();
tank.src = "./img/left.png";
break;
case 87: // 上箭头键
moveTankUp();
tank.src = "./img/up.png";
break;
case 68: // 右箭头键
moveTankRight();
tank.src = "./img/right.png";
break;
case 83: // 下箭头键
moveTankDown();
tank.src = "./img/down.png";
break;
}
});
// 边界检查：确保坦克不会移出边界
function moveTankLeft() {
if (tankPositionX > 0) {
tank.style.left = (tankPositionX -= moveStep) + "px";
}
}
function moveTankUp() {
if (tankPositionY > 0) {
tank.style.top = (tankPositionY -= moveStep) + "px";
}
}
function moveTankRight() {
var tankWidth = tank.clientWidth;
var screenWidth = window.innerWidth;
if (tankPositionX + tankWidth < screenWidth) {
tank.style.left = (tankPositionX += moveStep) + "px";
}
}
function moveTankDown() {
var tankHeight = tank.clientHeight;
var screenHeight = window.innerHeight;
if (tankPositionY + tankHeight < screenHeight) {
tank.style.top = (tankPositionY += moveStep) + "px";
}
}
//禁用鼠标右键
document.addEventListener("contextmenu", function(event) {
event.preventDefault(); // 阻止默认右键菜单
});
</script>
</body>
css样式：
<style type="text/css">
input { font-size: 26px; margin-top: 20px; }
body { background-image: url("./img/grassland.png"); }
#mytank { position: absolute; left: 10px; top: 100px; }
</style>