Question

我正在尝试用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>

Answer 1

一些一般性意见：

parseInt()已经忽略了尾随的非数字，所以不需要你的num()函数。如果有，你可以更简单地将该正则表达式写为/\D+/g。
如果速度至关重要，那么放置数字的速度要快一些x<<0。
所有getPos都应该是：return Math.floor(...)+x;。我不知道为什么你声明并设置一个变量，将它设置为自己，然后返回它。
您应该设置一次（在加载文档之后），而不是重新获取每个heli obj和moveLeft()个项目，并让{{1是一个引用它们的闭包。与moveLeft()相同。
您忘记了poss您的var变量，这使其成为一个全局变量。
您有xleft。这没有任何作用。
您可以在同一行声明多个变量，例如if (xleft>0){ xleft=xleft; }
不使用var heli, obj;进行调试，而是使用alert（或更好的实际断点并单步执行代码）。你会发现你的生活远远更容易。查找用于Safari / Chrome的开发人员工具或用于Firefox的Firebug。
还有更多全局变量，例如console.log和hp。
您应该查看像op这样的库，这将使您的代码更容易开发。例如，您不必对事件执行特定于浏览器的测试，因为它会对事件进行规范化。
使用jQuery语句处理您的密码，而不是多个switch()语句。
从您的身体中删除if和onload处理程序，然后以编程方式从您的脚本中注册它们。
从HTML中删除onkeydown属性，并将其放在样式表中。

Answer 2

是的，不要使用Timer来轮询事件是否已发生。使用javascript的addEventListener或jQuery的事件函数。我会使用推荐的jQuery，因为它可能会更快地编写代码的其他部分。

与CSS位置的Javascript游戏

2 个答案: