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ù)可以自己修改。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄褂肑S正則表達式 替換括號,尖括號等。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JS根據(jù)年月獲得當月天數(shù)的實現(xiàn)代碼
這篇文章主要介紹了JS根據(jù)年月獲得當月天數(shù)的實現(xiàn)代碼,需要的朋友可以參考下2014-07-07
模仿Flash AS效果的導航菜單...2007-02-02
本篇文章主要是對tr的隱藏和顯示問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
用js實現(xiàn)的替換除數(shù)字與逗號以外的所有字符的代碼，因為需要去除重復，這樣的話就會有很多的逗號需要替換2014-06-06
這篇文章主要為大家詳細介紹了基于JavaScript canvas繪制貝塞爾曲線的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章介紹了JS防止用戶多次提交的簡單代碼，有需要的朋友可以參考一下2013-08-08
javascript特效實現(xiàn)——當前時間和倒計時效果的簡單實例
下面小編就為大家?guī)硪黄猨avascript特效實現(xiàn)——當前時間和倒計時效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
使用原生JS實現(xiàn)一個日期選擇器(DatePicker)組件
這篇文章主要為大家介紹了如何通過原生HTML/CSS/JavaScript完成一個日期選擇器（datepicker）組件,一個純手搓的組件的開發(fā),有需要的可以了解下2025-01-01
document.designMode的功能與使用方法介紹...2007-11-11