wasd或箭头控制div方块移动_html怎么用wasd控制div移动-优快云博客

本文链接：https://blog.youkuaiyun.com/wangxue8203/article/details/82430221

这篇博客主要介绍了如何通过监听键盘的wasd或箭头按键，实现HTML div元素在页面上的上下左右移动。通过调整div的margin属性，实现了元素的位置变化，使用户可以通过键盘操作改变div的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是记录div的位置变化。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>wasd控制移动</title>
       <style>
           div{
               width: 100px;
               height:100px;
               background-color: #004A87;
           }
       </style>
   </head>
   <body>
       <div class="box">
       </div>
       <script>
           var box=document.getElementsByClassName("box")[0];
           box.style.marginTop=0;
           box.style.left=0;
           document.οnkeydοwn=function(e){
               var e=window.event;
               switch (e.keyCode){
case 38:
                   case 87:
                   if(box.offsetTop>20){box.style.marginTop=(parseInt(box.offsetTop)-20)+"px";}
                   break;
                   case 40:
                   case 83:
                   if(box.offsetTop+100<=document.documentElement.clientHeight){box.style.marginTop=(parseInt(box.offsetTop)+20)+"px";}
                   break;
                   case 37:
                   case 65: if(box.offsetLeft>0){box.style.marginLeft=(parseInt(box.offsetLeft)-20)+"px";}
                   break;
                   case 39:
                   case 68:if(box.offsetLeft+100<=document.documentElement.clientWidth){box.style.marginLeft=(parseInt(box.offsetLeft)+20)+"px";}
                   break;
               }
           }

       </script>
   </body>
</html>