JavaScript利用键盘码控制div移动
前言
在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现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来移动，里面具体的参数可以自己修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现键盘控制DIV移动的方法，包括了js实现键盘控制DIV移动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下： css样式部分： js部分： 说明： 上：↑ 下：↓ 左：← 右：→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl
-
本文向大家介绍原生js实现键盘控制div移动且解决停顿问题，包括了原生js实现键盘控制div移动且解决停顿问题的使用技巧和注意事项，需要的朋友参考一下 首先说明下为什么会停顿？ 效果 ：用键盘控制一个div移动 当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。 原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间 注：了解原因才能解决问题 效果展示 1.简单控制，但是有
-
有谁能给我一些建议或链接的所有控制的Android Studio键盘快捷键？
-
本文向大家介绍C#控制键盘按键的常用方法，包括了C#控制键盘按键的常用方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了C#控制键盘按键的常用方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的C#程序设计有所帮助。
-
本文向大家介绍javascript实现可键盘控制的抽奖系统，包括了javascript实现可键盘控制的抽奖系统的使用技巧和注意事项，需要的朋友参考一下 制作一个简易的抽奖系统！欢迎大家学习！ JS原理：建立一个数组用来存储抽奖内容，例如 iphone6 等，当点击开始的时候，开启定时器,产生一个随机数，把对应文本的innerHTML改成数组所对应的内容。 如果想让某个抽奖几率变高，可以让数组中某个
-
本文向大家介绍javascript实现ecshop搜索框键盘上下键切换控制，包括了javascript实现ecshop搜索框键盘上下键切换控制的使用技巧和注意事项，需要的朋友参考一下 在createSelect()函数中，返回一个对象，这个对象的两个方法next（） 和prev（）中的调用的moveSelect()能正确的指向到该函数，也可以把 moveSelect()函数放到外面来。 以上就是本