好资源导航 » 文章资讯 » JavaScript利用键盘码控制div移动

JavaScript利用键盘码控制div移动

2023-07-28 09:50:14 63

前言

在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。

利用键盘码来控制div移动源码








#box{
height:100px;
width:100px;
background-color:red;
position:absolute;
}

varoBox=document.getElementById("box") varx=0 vary=0 document.onkeyup=function(ev){ varev=ev||event //指定方向键，w(上-->87),a(左-->83),s(下-->65),d(右-->67) //通过keyCode来识别当前按的是哪个键 //x+=10 //oBox.style.left=x+"px" //根据键盘码来确定往哪个方向移动 switch(ev.keyCode){ case87: //往上移动 y-=20 break case83: //往下移动 y+=20 break case65: // x-=20 break case68: x+=20 break default: break } oBox.style.left=x+"px" oBox.style.top=y+"px" }

上面就是Demo的所有源码，我们可以通过键盘码来控制div来移动，里面具体的参数可以自己修改。

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

返回顶部
514930285
czq8825@qq.com

JavaScript利用键盘码控制div移动

热门推荐

随机推荐