JavaScript利用键盘码控制div移动


Posted in Javascript onMarch 19, 2020

前言

在生活中肯定有玩过贪吃蛇的游戏,那么要怎么样用键盘码来实现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来移动,里面具体的参数可以自己修改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
js实现百度登录窗口拖拽效果
Mar 19 #Javascript
js实现随机抽奖
Mar 19 #Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
You might like
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
8个有意思的JavaScript面试题
2019/07/30 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python处理按钮消息的实例详解
2017/07/11 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python学生管理系统学习笔记
2019/03/19 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
不错的求职信范文
2014/07/20 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015年度村委会工作总结
2015/04/29 职场文书