Javascript game with css position
Posted
by
newb125505
on Stack Overflow
See other posts from Stack Overflow
or by newb125505
Published on 2011-01-06T05:40:05Z
Indexed on
2011/01/06
5:53 UTC
Read the original article
Hit count: 204
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);
}
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>
© Stack Overflow or respective owner
