文章/答案/技术大牛

发布

社区首页 >问答首页 >带有css位置的Javascript游戏

问带有css位置的Javascript游戏
EN

Stack Overflow用户

提问于 2011-01-06 13:40:06

回答 2查看 975关注 0票数 1

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

javascript

css

position

回答 2

Stack Overflow用户

发布于 2011-01-06 13:57:21

一些一般性的评论：

parseInt()已经忽略了尾随的非数字，所以不需要使用num()函数。如果有，您可以更简单地编写正则表达式，因为/\D+/g.
If速度非常关键，一种稍微快一些方法是x<<0.
All of getPos应该是：return Math.floor(...)+x;。我不知道为什么要声明和设置变量，将其设置为自身，然后返回它。
不是每次调用moveLeft()都重新获取heli和obj项，而是应该设置一次(在加载文档之后)，并让moveLeft()成为引用它们的闭包。和poss.
You一样，忘记了var你的xleft变量，这使它成为一个全局变量。
你有if (xleft>0){ xleft=xleft; }。这不会做任何事情。你可以在同一行声明多个变量，例如使用alert进行调试的var heli, obj;
Instead，使用console.log (或者更好的是，实际的断点和单步执行代码)。你会发现你的生活要轻松得多。查找用于Safari/Chrome的开发人员工具或用于Firefox.
There的Firebug是更多的全局变量，例如hp和op.
You应该查看像jQuery这样的库，这将使您的代码更容易开发。例如，您不必对事件进行特定于浏览器的测试，因为它会将它们标准化。
使用switch()语句来处理您的键代码，而不是从您的主体中使用多个if onload和onkeydown处理程序，并且从script.
Remove

onloadonkeydown属性以编程方式注册它们，并将其放入样式表中。

票数 3

Stack Overflow用户

发布于 2011-01-06 13:48:17

是，如果事件发生，请不要使用计时器进行轮询。使用javascript的addEventListener或jQuery的事件函数，我推荐使用jQuery，因为它可能会使编写代码的其他部分变得更快。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4612085

复制

相似问题

问带有css位置的Javascript游戏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有css位置的Javascript游戏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有css位置的Javascript游戏
EN