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来移动，里面具体的参数可以自己修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js实现键盘控制div移动且解决停顿问题

    原生js实现键盘控制div移动且解决停顿问题

    首先说明下为什么会停顿? 效果 :用键盘控制一个div移动 当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间 注:了解原因才能解决问题 效果展示 1.简单控制,但是有停顿 2.简单控制,解决停顿 解决方法 方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态 初始4个方向的值都是false,div就保持在原地不动. 按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动. 松开方

  • js实现键盘控制DIV移动的方法

    本文实例讲述了js实现键盘控制DIV移动的方法.分享给大家供大家参考.具体分析如下: css样式部分: 复制代码 代码如下: <style type="text/css"> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier

  • javascript下用键盘控制层的移动的代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <style type="text/css"> <!-- #Div { position:absolute; width:238px; height:13

  • js实现上下左右键盘控制div移动

    js实现上下左右键盘控制div移动

    本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下 描述: div通过键盘事件上下左右实现div块的移动 效果:  实现: js: var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删

  • javascript利用键盘控制小方块的移动

    本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码.对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码.虚拟键盘码可能和使用的键盘的布局相关. 因此我们可以根据keycode返回的字符码来判断用户所

  • angularjs利用directive实现移动端自定义软键盘的示例

    angularjs利用directive实现移动端自定义软键盘的示例

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

  • JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

  • js实现键盘操作实现div的移动或改变的原理及代码

    昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧. 这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧: *---要实现div的移动,首先最关键的一点:获取div对象 *---postion:absolute将div完全从文档流中拖出啊,这个地方漏掉了,回去看了贪吃蛇

  • 键盘上下键移动选择table表格行的js代码

    键盘上下键移动选择table表格行的js代码

    //这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选 注:如需引入外部Js需刷新才能执

  • JavaScript利用键盘码控制div移动

    前言 在生活中肯定有玩过贪吃蛇的游戏,那么要怎么样用键盘码来实现div的移动呢?下面就分享一个Demo. 利用键盘码来控制div移动源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 100px; width: 10

  • JavaScript使用键盘输入控制实现数字验证功能

    JavaScript使用键盘输入控制实现数字验证功能

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下: va

  • JavaScript利用正则表达式来禁止键盘输入数字

    今日在看JavaScript的时候,发现键盘响应时间onkeydown和一些其他的相关事件都停用了keyCode这个属性,而keyCode这个属性返回的是键盘按键的ASCII码值,停用后有个code属性替代,但也不完全替代,因为code属性返回的是键值本身的值,所以写法也不一样,下面用正则表达式来禁止输入框输入数字,直接上代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset=&

  • JS实现用键盘控制DIV上下左右+放大缩小与变色

    用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作: 上:↑ 下:↓ 左:← 右:→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 用键盘控制DIV html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;bord

  • Javascript控制div属性动态变化实例分析

    Javascript控制div属性动态变化实例分析

    本文实例分析了Javascript控制div属性动态变化的方法.分享给大家供大家参考.具体如下: 这里使用JS控制div属性变化,另Div的几何尺寸发生变化,例如变宽.变高.改变颜色.隐藏Div.重置所有属性为默认值等.虽然在本例中,这些属性值的改变很简单就可实现,但在JavaScript网页前端设计中,这种属性或方法经常会被用到,因此还是值得大家关注的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cha-div-opt-demo/

  • javascript控制Div层透明属性由浅变深由深变浅逐渐显示

    搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

随机推荐