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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
Node.js安装配置图文教程
May 10 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP新手上路(十一)
2006/10/09 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python3的输入方式及多组输入方法
2018/10/17 Python
python实现图片九宫格分割
2021/03/07 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
小区消防演习方案
2014/02/21 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
小学生期末评语大全
2014/04/21 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js