思路：
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>坦克的圖片：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/286701.html
標籤：其他
上一篇：Unity3D 多層血條特效
下一篇：陣列游戲——三子棋