首页 > 代码库 > 简单的使用键盘控制方块移动
简单的使用键盘控制方块移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键盘控制方块移动</title> <style> #box{ width: 50px; height: 50px; background-color: green; position: relative; left: 50px; top: 50px; } </style></head><body> <div id="box"></div> <script> // var box=document.getElementById(‘box‘);//此部分代码的效果会用小小的停顿，下面的为改进代码 // var l=0; // var t=0; // document.onkeydown=function(){ // var e=window.event||ev; // // console.log(e.keyCode); // if (e.keyCode==37) { // l-=10; // box.style. // left=l+‘px‘; // } // if (e.keyCode==38) { // t-=10; // box.style.top=t+‘px‘; // } // if (e.keyCode==39) { // l+=10; // box.style.left=l+‘px‘; // } // if (e.keyCode==40) { // t+=10; // box.style.top=t+‘px‘; // } // } var div=document.getElementById(‘box‘); var s=0,left=0,right=0,bottom=0;//用top不可以，为保留字； var timer=null,x=50,y=50; timer=setInterval(function(){ if (left==1) { x-=5; div.style.left=x+‘px‘; } if (right==1) { x+=5; div.style.left=x+‘px‘; } if (s==1) { y-=5; div.style.top=y+‘px‘; } if (bottom==1) { y+=5; div.style.top=y+‘px‘; } },20) document.onkeydown=function(ev){ var e=ev||window.event; switch(e.keyCode){ case 37: left=1; break; case 38: s=1; break; case 39: right=1; break; case 40: bottom=1; break; default: alert(‘请按方向键‘); } } document.onkeyup=function(ev){ var e=ev||window.event; switch(e.keyCode){ case 37: left=0; break; case 38: s=0; break; case 39: right=0; break; case 40: bottom=0; break; default: alert(‘请按方向键‘); } } </script></body></html>
简单的使用键盘控制方块移动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。