Javascript game with css position_问答_开发者_运维开发者技术经验分享

I am trying to make a very simple helicopter game in javascript and I'm currently using css positions to move the objects. but I wanted to know if there was a better/other method for moving objects (divs) when a user is pressing a button

here's a code i've got so far..

<!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);    
}

functi开发者_JAVA技巧on 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>

Some general comments:

parseInt() already ignores trailing non-numerics, so there's no need for your num() function. If there were, you could write that regex more simply as /\D+/g.
If speed is critical, a marginally faster way to floor a number is x<<0.
All of getPos should just be: return Math.floor(...)+x;. I have no idea why you declare and set a variable, set it to itself, and then return it.
Instead of re-getting the heli and obj items each call to moveLeft(), you should set them once (after the document as loaded) and let moveLeft() be a closure that references them. Same with poss.
You forgot to var your xleft variable, which makes it a global.
You have if (xleft>0){ xleft=xleft; }. This doesn't do anything.
You can declare multiple variables on the same line, e.g. var heli, obj;
Instead of using alert for debugging, use console.log (or better yet, actual breakpoints and stepping through your code). You will find your life far, far easier. Look up Developer Tools for Safari/Chrome or Firebug for Firefox.
There are more global variables such as hp and op.
You should look into a library like jQuery which will make your code easier to develop. For example, you don't have to do the browser-specific tests for events, as it normalizes them.
Use a switch() statement to process your keycodes instead of multiple if statements.
Remove the onload and onkeydown handlers from your body, and instead register them programmatically from your script.
Remove the style attribute from your HTML, and put it in your stylesheet.

Yes do not use a Timer to poll if a event has happened. Use javascript's addEventListener or jQuery's event functions.I would use recommend jQuery as it would probably make writing other parts of your code faster as well.