我正在尝试使用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>
最佳答案
一些一般性的评论：parseInt()已经忽略了结尾的非数字，因此不需要您的num()函数。如果有的话，您可以将该正则表达式更简单地写为/\D+/g。
如果速度至关重要，则对数字进行求算的一种较快的方法是x<<0。
所有getPos应该只是：return Math.floor(...)+x;。我不知道为什么要声明和设置一个变量，将其设置为自身，然后返回它。
而不是重新获得每次调用heli的obj和moveLeft()项目，应该将它们设置一次（在加载文档之后），并让moveLeft()作为引用它们的闭包。与poss相同。
您忘记了var您的xleft变量，这使它成为全局变量。
您有if (xleft>0){ xleft=xleft; }。这什么也没做。
您可以在同一行上声明多个变量，例如var heli, obj;
代替使用alert进行调试，而使用console.log（或者更好的是，实际的断点并逐步执行代码）。您会发现自己的生活变得非常轻松。查找Safari / Chrome开发者工具或Firefox的Firebug。
还有更多的全局变量，例如hp和op。
您应该查看类似jQuery的库，这将使您的代码更易于开发。例如，您不必对事件进行浏览器特定的测试，因为它可以标准化事件。
使用switch()语句而不是多个if语句来处理您的键码。
从您的身体中删除onload和onkeydown处理程序，而是从您的脚本中以编程方式注册它们。
从HTML中删除style属性，并将其放在样式表中。