JS实现简单的坦克移动及换向
Posted 小猪_佩'琪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现简单的坦克移动及换向相关的知识，希望对你有一定的参考价值。
思路：
1.先获取坦克在页面中的初始位置，记录初始位置
2.给坦克绑定键盘事件，实现按下（上下左右按键）进行转向和移动
3.换向是改变图片的src地址
4.移动是改变图片的style.left和style.top的值
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: #000;
}
img {
position: fixed;
left: 500px;
top: 400px;
}
</style>
</head>
<body>
<img src="imgs/tankU.gif" alt="">
<script>
// 获取图片
var Oimg = document.querySelector('img')
// 获取图片的属性
var style = getComputedStyle(Oimg)
// 记录图片的初始位置
var L = parseInt(style.left)
var T = parseInt(style.top)
// 绑定键盘按下事件
window.onkeydown = function(e) {
console.log(e.key);
// 判断方向键
switch(e.key) {
// 按下上方向键
case 'ArrowUp':
// 改变图片的src地址，控制转向
Oimg.src = 'imgs/tankU.gif'
// 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
T = T - 10
// 改变图片的top距离，控制移动
Oimg.style.top = T + 'px'
break;
case 'ArrowDown':
Oimg.src = 'imgs/tankD.gif'
T = T + 10
Oimg.style.top = T + 'px'
break;
case 'ArrowLeft':
Oimg.src = 'imgs/tankL.gif'
L = L - 10
Oimg.style.left = L + 'px'
break;
case 'ArrowRight':
Oimg.src = 'imgs/tankR.gif'
L = L + 10
Oimg.style.left = L + 'px'
break;
}
}
</script>
</body>
</html>坦克的图片：
以上是关于JS实现简单的坦克移动及换向的主要内容，如果未能解决你的问题，请参考以下文章