快捷導(dǎo)航

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

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

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

前言

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

利用鍵盤(pán)碼來(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 鍵盤(pán)碼 在鍵盤(pán)事件發(fā)生的時(shí)候 記錄對(duì)應(yīng)按的哪個(gè)鍵-->
 <div id="box"></div>
 <!--讓鍵盤(pán)控制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ù)鍵盤(pán)碼來(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ò)鍵盤(pán)碼來(lái)控制div來(lái)移動(dòng)，里面具體的參數(shù)可以自己修改。

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

您可能感興趣的文章:

相關(guān)文章

使用JS正則表達(dá)式替換括號(hào),尖括號(hào)等
下面小編就為大家?guī)?lái)一篇使用JS正則表達(dá)式替換括號(hào),尖括號(hào)等。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-07-07
模仿Flash AS效果的導(dǎo)航菜單
模仿Flash AS效果的導(dǎo)航菜單...
2007-02-02
淺析tr的隱藏和顯示問(wèn)題
本篇文章主要是對(duì)tr的隱藏和顯示問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
用js替換除數(shù)字與逗號(hào)以外的所有字符的代碼
用js實(shí)現(xiàn)的替換除數(shù)字與逗號(hào)以外的所有字符的代碼，因?yàn)樾枰コ貜?fù)，這樣的話就會(huì)有很多的逗號(hào)需要替換
2014-06-06
基于JavaScript canvas繪制貝塞爾曲線
這篇文章主要為大家詳細(xì)介紹了基于JavaScript canvas繪制貝塞爾曲線的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
JS防止用戶多次提交的簡(jiǎn)單代碼
這篇文章介紹了JS防止用戶多次提交的簡(jiǎn)單代碼，有需要的朋友可以參考一下
2013-08-08
javascript特效實(shí)現(xiàn)——當(dāng)前時(shí)間和倒計(jì)時(shí)效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript特效實(shí)現(xiàn)——當(dāng)前時(shí)間和倒計(jì)時(shí)效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
使用原生JS實(shí)現(xiàn)一個(gè)日期選擇器(DatePicker)組件
這篇文章主要為大家介紹了如何通過(guò)原生HTML/CSS/JavaScript完成一個(gè)日期選擇器（datepicker）組件,一個(gè)純手搓的組件的開(kāi)發(fā),有需要的可以了解下
2025-01-01
document.designMode的功能與使用方法介紹
document.designMode的功能與使用方法介紹...
2007-11-11