利用JavaScript和HTML css实现推箱子原理

推箱子原理，需要你们在美化一下页面就可以了

1：HTML页面代码

<div>
  <div  style="width: 80%; height: 100%; float: left;">
   <img id="div1" src="王思聪热狗图.png" style="width: 300px; height: 300px; position: absolute; top: 100px; left: 50px;">
  </div>
  <div  style="width: 15%;height: 500px; float: right; border: 1px solid #000000;">
   上:<input class="input" type="text" id="inTop" onkeyup="setKey(this.id)" /><br/><br />
   下:<input class="input" type="text" id="inBottom" onkeyup="setKey(this.id)" /><br/><br />
   左:<input class="input" type="text" id="inLeft" onkeyup="setKey(this.id)" /><br/><br />
   右:<input class="input" type="text" id="inRight" onkeyup="setKey(this.id)" /><br/><br />
   <input class="inputBtn" type="button" value="确定" onclick="fun()" />
  </div>
  </div>

2：css代码

<style type="text/css">
   .input{
    margin-top: 10px;
    height: 35px;
    width: 200px; 
    border-radius: 15px;
    border: 1px solid #000000;
   }
   .inputBtn{
    height: 100px;
    width: 200px;
    margin-left: 50px;
    border-radius: 15px;
    font-size:50px;
    border: 1px solid #000000;
    
   }
  </style>

3：JavaScript代码

<script>
   var MyTop = null;
   var MyBottom = null;
   var MyLeft = null;
   var MyRight = null;
   
   
   function setKey(name){
    if(name == "inTop"){
     MyTop = event.keyCode;
    }
    if(name == "inBottom"){
     MyBottom = event.keyCode;
    }
    if(name == "inLeft"){
     MyLeft = event.keyCode;
    }
    if(name == "inRight"){
     MyRight = event.keyCode;
    }
   }
   
  function fun(){
   document.onkeydown = function(){
    var oDiv = document.getElementById("div1");
    if(event.keyCode == MyTop){ 
     oDiv.style.top = oDiv.offsetTop - 100 + 'px';
    }else if(event.keyCode == MyBottom){ 
     oDiv.style.top = oDiv.offsetTop + 100 + 'px';
    }else if(event.keyCode == MyLeft){ 
     oDiv.style.left = oDiv.offsetLeft - 100 + 'px';
    }else if(event.keyCode == MyRight){ 
     oDiv.style.left = oDiv.offsetLeft + 100 + 'px';
    }
   }
  }
   
  </script>