JavaScript利用鍵盤碼控制div移動
更新時間：2020年03月19日 13:59:05 作者：裕博
這篇文章主要為大家詳細介紹了JavaScript利用鍵盤碼控制div移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
在生活中肯定有玩過貪吃蛇的游戲，那么要怎么樣用鍵盤碼來實現(xiàn)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 鍵盤碼 在鍵盤事件發(fā)生的時候 記錄對應按的哪個鍵-->
<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"
// 根據(jù)鍵盤碼來確定往哪個方向移動
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來移動，里面具體的參數(shù)可以自己修改。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
TypeScript與JavaScript多方面闡述對比相同點和區(qū)別
TypeScript和JavaScript在開發(fā)交互式網(wǎng)頁方面有許多相似之處,在提供TypeScript與 JavaScript的直接比較時,我們可以說JavaScript是一種輕量級的解釋型動態(tài)語言,用于增強HTML網(wǎng)頁,TypeScript是JavaScript的增強版,這意味著TypeScript是JavaScript和其他一些特性的組合2024-07-07
本文主要介紹了原生JS實現(xiàn)簡單屏幕截圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
JavaScript中的this/call/apply/bind的使用及區(qū)別
這篇文章主要介紹了JavaScript中的this/call/apply/bind的使用及區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要為大家介紹了JavaScript設計模式中的中介者模式，對JavaScript設計模式感興趣的小伙伴們可以參考一下2016-01-01
js+canvas實現(xiàn)可自動吸附閉合的鼠標繪制多邊形
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)可自動吸附閉合的鼠標繪制多邊形，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)星星評分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文主要介紹了javascript實現(xiàn)下雨效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了在JavaScript中判斷整型的N種方法,需要的朋友可以參考下2014-06-06
數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關于js求數(shù)組最大值的常用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決匯總
使用uni 開發(fā)一段時間了,下面這篇文章主要給大家介紹了關于uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12