溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
在生活中肯定有玩過貪吃蛇的游戲，那么要怎么樣用鍵盤碼來實現div的移動呢？下面就分享一個Demo。
利用鍵盤碼來控制div移動源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<!--keyCode 鍵盤碼 在鍵盤事件發生的時候 記錄對應按的哪個鍵-->
<div id="box"></div>
<!--讓鍵盤控制div的移動-->
<script type="text/javascript">
var oBox = document.getElementById("box")
var x = 0
var y = 0
document.onkeyup = function(ev) {
var ev = ev || event
// 指定方向鍵 ，w(上-->87),a(左-->83),s(下-->65),d(右-->67)
// 通過keyCode來識別當前按的是哪個鍵
// x += 10
// oBox.style.left = x +"px"
// 根據鍵盤碼來確定往哪個方向移動
switch(ev.keyCode) {
case 87:
// 往上移動
y -= 20
break
case 83:
// 往下移動
y += 20
break
case 65:
//
x -= 20
break
case 68:
x += 20
break
default:
break
}
oBox.style.left = x + "px"
oBox.style.top = y + "px"
}
</script>
</body>
</html>
上面就是Demo的所有源碼，我們可以通過鍵盤碼來控制div來移動，里面具體的參數可以自己修改。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
