快捷導(dǎo)航

JavaScript利用鍵盤碼控制div移動(dòng)

更新時(shí)間：2020年03月19日 13:59:05 作者：裕博

這篇文章主要為大家詳細(xì)介紹了JavaScript利用鍵盤碼控制div移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在生活中肯定有玩過(guò)貪吃蛇的游戲，那么要怎么樣用鍵盤碼來(lái)實(shí)現(xiàn)div的移動(dòng)呢？下面就分享一個(gè)Demo。

利用鍵盤碼來(lái)控制div移動(dòng)源碼

<!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ā)生的時(shí)候 記錄對(duì)應(yīng)按的哪個(gè)鍵-->
 <div id="box"></div>
 <!--讓鍵盤控制div的移動(dòng)-->
 <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)
 // 通過(guò)keyCode來(lái)識(shí)別當(dāng)前按的是哪個(gè)鍵
 // x += 10
 // oBox.style.left = x +"px"
 // 根據(jù)鍵盤碼來(lái)確定往哪個(gè)方向移動(dòng)
 switch(ev.keyCode) {
 case 87:
 // 往上移動(dòng)
 y -= 20
 break
 case 83:
 // 往下移動(dòng)
 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的所有源碼，我們可以通過(guò)鍵盤碼來(lái)控制div來(lái)移動(dòng)，里面具體的參數(shù)可以自己修改。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TypeScript與JavaScript多方面闡述對(duì)比相同點(diǎn)和區(qū)別
TypeScript和JavaScript在開發(fā)交互式網(wǎng)頁(yè)方面有許多相似之處,在提供TypeScript與 JavaScript的直接比較時(shí),我們可以說(shuō)JavaScript是一種輕量級(jí)的解釋型動(dòng)態(tài)語(yǔ)言,用于增強(qiáng)HTML網(wǎng)頁(yè),TypeScript是JavaScript的增強(qiáng)版,這意味著TypeScript是JavaScript和其他一些特性的組合
2024-07-07
原生JS實(shí)現(xiàn)簡(jiǎn)單屏幕截圖
本文主要介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單屏幕截圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
JavaScript中的this/call/apply/bind的使用及區(qū)別
這篇文章主要介紹了JavaScript中的this/call/apply/bind的使用及區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
學(xué)習(xí)JavaScript設(shè)計(jì)模式之中介者模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的中介者模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下
2016-01-01
js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序?qū)崿F(xiàn)星星評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星星評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
javascript實(shí)現(xiàn)下雨效果
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
在JavaScript中判斷整型的N種方法示例介紹
這篇文章主要介紹了在JavaScript中判斷整型的N種方法,需要的朋友可以參考下
2014-06-06
js求數(shù)組最大值的常用方法舉例
數(shù)組如何求最大值,想必很多的朋友都不會(huì)吧,下面這篇文章主要給大家介紹了關(guān)于js求數(shù)組最大值的常用方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
uniapp和uniCloud開發(fā)中常出現(xiàn)的問(wèn)題及解決匯總
使用uni 開發(fā)一段時(shí)間了,下面這篇文章主要給大家介紹了關(guān)于uniapp和uniCloud開發(fā)中常出現(xiàn)的問(wèn)題及解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12