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中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
javascript函数特点实例分析
May 14 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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基础知识:控制结构
2006/12/13 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
js实现右键菜单功能
2016/11/28 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
产品质量保证书
2014/04/29 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
售房协议书范本2014
2014/10/23 职场文书
退学证明范本3篇
2014/10/29 职场文书
大学生见习报告范文
2014/11/03 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python