微信小程序盈利办法_JavaScript使用键盘码控制di

摘要: JavaScript运用电脑键盘码操纵div移动 本文关键为大伙儿详尽详细介绍了JavaScript运用电脑键盘码操纵div移动,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴...

JavaScript利用键盘码控制div移动       这篇文章主要为大家详细介绍了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来移动,里面具体的参数可以自己修改。

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



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站免费建站