一个简单的通过上下左右键移动div的案例--可用于游戏的用户操作界面

本文链接：https://blog.youkuaiyun.com/trsli/article/details/16804979

这是一个通过监听键盘事件，使div元素根据上下左右键在页面内移动的JavaScript案例，适用于游戏用户界面的操作设计。代码中包含兼容IE和Firefox的键盘事件处理，并实现了div在限定区域内的移动。

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

 <meta name="Generator" content="EditPlus">
  <style type="text/css">
  body{padding:0;margin:0}
 .main{height:400px;width:400px;background:#123321}
 .mouse{height:20px;width:20px;position:absolute;background:red}
  </style>
 </head>
 <body οnkeydοwn="adddiv(event)">
  <div id="main" class="main" >
  <div id="mouse" class="mouse" />
  <script type="text/javascript">
  /**这样做的目的是节约空间，但是绝对不会解决性能问题*/
  function getdom(id){
  return document.getElementById(id);
 }
 /**在body中定义一个全局函数并接收其中的事件*/
 function adddiv(event){
  var dom=getdom("mouse");
  var main=getdom("main");
  //获取主页面的宽度和高度，让小div在其内部运动
  var xm=main.offsetWidth;
  var ym=main.offsetHeight;
  var x=dom.offsetLeft;
  var y=dom.offsetTop;
  //这里考虑的事IE和firefox的兼容性问题
  var eve=event?event:window.event;
  //对上下左右事件的处理
  if(eve.keyCode==37){//left
   if(x>0){
    x=x-20;
   }
  }
  if(eve.keyCode==38){//up
   if(y>0){
    y=y-20;
   }
  }
  if(eve.keyCode==39){//right
   if(x<=xm-40){
    x=x+20;
   }
  }
  if(eve.keyCode==40){//down
   if(y<=ym-40){
    y=y+20;
   }
  }
  //移动到的当前位置，+“px”很大程度上是考虑兼容性
  dom.style.left=x+"px";
  dom.style.top=y+"px";
 }
  </script>
 
  </div>
 
 </body>

刚开始我用的事Dom技术实现的，但是那个太过于复杂，而是实用性以及性能不高，这里不再演示。这个没什么难度但是我研究了很久，虽然人确实不是很聪明，但是受益良多。

效果图：
  
  
   
   
   
   
  
   
  
  
   
   如果兴趣可以将代码改为这样的：
   
   <body οnkeydοwn="adddiv(event)">
  <div id="main" class="main" >
  <img id="mouse0" class="mouse" src="10.png"/>
 <script type="text/javascript">
 function getdom(id){
  return document.getElementById(id);
 }
 var i=0;
 function adddiv(event){
  var dom=getdom("mouse"+i);
  var main=getdom("main");
  var x=dom.offsetLeft;
  var y=dom.offsetTop;
  var eve=event?event:window.event;
  if(eve.keyCode==37){//left
   if(x>0){
    x=x-20;
   }
  }
  if(eve.keyCode==38){//up
   if(y>0){
    y=y-20;
   }
  }
  if(eve.keyCode==39){//right
   if(x<=400-40){
    x=x+20;
   }
  }
  if(eve.keyCode==40){//down
   if(y<=400-40){
    y=y+20;
   }
  }
  //main.removeChild(dom);
  var dom1=document.createElement("img");
  dom1.style.position="absolute";
  dom1.style.left=x+"px";
  dom1.style.top=y+"px";
  dom1.style.width=20+"px";
  dom1.style.height=20+"px";
  dom1.src="10.png";
  dom1.id="mouse"+(++i);
  main.appendChild(dom1);
 }
 </script> 
   
   出现的效果就是通过上下左右无限制的产生图片，形成一条龙。这是dom技术的运用，其实在很多地方都需要该技术，但是对于一般的想过展示不建议使用，毕竟这个较为耗性能。效果图：