用css定位的Javascript游戏_Javascript_Css_Position

用css定位的Javascript游戏

javascript css

用css定位的Javascript游戏,javascript,css,position,Javascript,Css,Position,我正在尝试用javascript制作一个非常简单的直升机游戏，目前我正在使用css位置来移动对象。但我想知道，当用户按下按钮时，是否有更好的/其他方法来移动对象（div）这是我到目前为止得到的一个代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

我正在尝试用javascript制作一个非常简单的直升机游戏，目前我正在使用css位置来移动对象。但我想知道，当用户按下按钮时，是否有更好的/其他方法来移动对象（div）

这是我到目前为止得到的一个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game 2 helicopter</title>
<script type="text/javascript">
function num(x){
  return parseInt(x.replace(/([^0-9]+)/g,''));  
}

function getPos(x, y){    
  var inum=Math.floor(Math.random()*(y+1-x)) + x;
  inum=inum;
  return inum; 
}

function setTop(x,y){ x.style.top = y+'px'; }
function setBot(x,y){ x.style.bottom = y+'px'; }
function setLeft(x,y){ x.style.left = y+'px'; }
function setRight(x,y){ x.style.right = y+'px'; }

function getTop(x){ return num(x.style.top); }
function getBot(x){ return num(x.style.bottom); }
function getLeft(x){ return num(x.style.left); }
function getRight(x){ return num(x.style.right); }

function moveLeft(x,y){
  var heli = document.getElementById('heli');   
  var obj = document.getElementById('obj');  
  var poss = [20,120,350,400];
  var r_pos = getPos(1,4);
  var rand_pos = poss[r_pos];
  xleft = getLeft(x)-y;
  if(xleft>0){
   xleft=xleft;
  }
  else{
   xleft=800;
  setTop(x,rand_pos);
  }  
  setLeft(x,xleft);
  setTimeout(function(){moveLeft(x,y)},10);
  checkGame(heli,obj);
}
var heli;
var obj;

function checkGame(x,y){
 var obj_right = getLeft(x) + 100;
 var yt = getTop(y);
 var yb = (getTop(y)+100);
   if(getTop(x) >= yt && getTop(x) <= yb && obj_right==getLeft(y)){
     endGame();
   }
}

function func(){
  var x = document.getElementById('heli');
  var y = document.getElementById('obj');
  alert(getTop(x)+' '+getTop(y)+' '+(getTop(y)+200));
}

function startGame(e){
  document.getElementById('park').style.display='block';
  document.getElementById('newgame').style.display='none';
  heli = document.getElementById('heli');
  obj = document.getElementById('obj');
  hp = heli.style.top;
  op = obj.style.top;
  setTop(heli,20);
  setLeft(heli,20);

  setLeft(obj,800);
  setTop(obj,20);
  moveLeft(obj,5);    
}

function newGameLoad(){
  document.getElementById('park').style.display='none';
  document.getElementById('newgame').style.display='block';
}

function gamePos(e){
  heli = document.getElementById('heli');
  obj = document.getElementById('obj');
  var keynum;
  var keychar;
  var numcheck;

  if(window.event){ // IE
    keynum = e.keyCode;
  }
  else if(e.which){ // Netscape/Firefox/Opera
    keynum = e.which;
  }

  keychar = String.fromCharCode(keynum); // up=38 down=40 left=37 right=39
  /*if(keynum==37){ //left
    tl=tl-20;
    db.style.left = tl + 'px';
  }

  if(keynum==39){ //right
    //stopPos();
    tl=tl+20;
    db.style.left = tl + 'px';
  }*/

  curb = getTop(heli);

  if(keynum==38){ //top
    setTop(heli,curb-10);
    //alert(curb+10);
  }

  if(keynum==40){ //bottom
    setTop(heli,curb+10);
    //alert(curb-10);
  }
}

function endGame(){
  clearTimeout();
  newGameLoad();
}

</script>
<style type="text/css">
  .play{position:absolute;color:#fff;}  #heli{background:url(http://classroomclipart.com/images/gallery/Clipart/Transportation/Helicopter/TN_00-helicopter2.jpg);width:150px;height:59px;}
  #obj{background:red;width:20px;height:200px;}
  .park{height:550px;border:5px solid brown;border-left:none;border-right:none;}
  #newgame{display:none;}
</style>
</head>
<body onload="startGame();" onkeydown="gamePos(event);">
  <div class="park" id="park">
    <div id="heli" class="play"></div>
    <div id="obj" class="play"></div>
  </div>
  <input type="button" id="newgame" style="position:absolute;top:25%;left:25%;" onclick="startGame();" value="New Game" />
</body>
</html>


第二场直升机
函数num（x）{
返回parseInt（x.replace（/（[^0-9]+）/g'，）；
}
函数getPos（x，y）{
var inum=Math.floor（Math.random（）*（y+1-x））+x；
inum=inum；
返回inum；
}
函数setTop（x，y）{x.style.top=y+'px'；}
函数setBot（x，y）{x.style.bottom=y+'px'；}
函数setLeft（x，y）{x.style.left=y+'px'；}
函数setRight（x，y）{x.style.right=y+'px'；}
函数getTop（x）{returnnum（x.style.top）；}
函数getBot（x）{returnnum（x.style.bottom）；}
函数getLeft（x）{returnnum（x.style.left）；}
函数getRight（x）{returnnum（x.style.right）；}
函数左移（x，y）{
var heli=document.getElementById（'heli'）；
var obj=document.getElementById（'obj'）；
var poss=[20120350400]；
var r_pos=getPos（1,4）；
变量rand_pos=poss[r_pos]；
xleft=getLeft（x）-y；
如果（xleft>0）{
xleft=xleft；
}
否则{
xleft=800；
机顶盒（x，随机位置）；
}  
设置左（x，xleft）；
setTimeout（函数（）{moveLeft（x，y）}，10）；
支票游戏（heli，obj）；
}
瓦尔·赫利；
var-obj；
功能检查游戏（x，y）{
var obj_right=getLeft（x）+100；
var-yt=getTop（y）；
var-yb=（getTop（y）+100）；
如果（getTop（x）>=yt&&getTop（x）是，请不要使用计时器轮询事件是否发生。请使用javascript的addEventListener或jQuery的事件函数。我会使用推荐jQuery，因为它可能会加快编写代码的其他部分的速度。
一些一般性意见：
parseInt（）
已经忽略了尾随的非数字，因此不需要使用num（）
函数。如果有，您可以将该正则表达式更简单地写成/\D+/g

如果速度很关键，一个稍微快一点的数字落地方法是xDoing什么？一个更有效的移动脚本，或者一个比CSS更好的方法？如果可能的话，更有效的脚本。我还想知道我使用的方式是否被推荐。我不确定我是否同意这一点。如果你知道你不需要（比如说）更多30fps，但关键事件的触发频率比这更高，使用setTimeout
或setInterval
并对其间的事件进行超轻量处理更有意义。非常感谢你的建议，伙计。我将定义它们应用于脚本。不过，有一件事：我几乎在我处理的所有事情上都使用jquery，但我认为这不是必要的this@nesb125505由于您似乎对Stack Overflow还不熟悉，所以要知道您应该“向上投票”（向上箭头）任何对您有帮助的答案，并“接受”（勾选）您认为已解决问题的答案（如果有）。