Jeu Javascript avec position css

J'essaie de faire un jeu d'hélicoptère très simple en javascript et j'utilise actuellement des positions css pour déplacer les objets. mais je voulais savoir s'il y avait une meilleure/autre méthode pour déplacer des objets (divs) lorsqu'un utilisateur appuie sur un boutonJeu Javascript avec position css

est ici un code que j'ai jusqu'à présent ..

<!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>

Source

2011-01-06 newb125505

Faire quoi? Un script de déplacement plus efficace, ou un meilleur moyen que CSS? – Ben

script plus efficace, si possible. et je veux aussi savoir si la façon dont j'utilise n'est pas recommandée .. – newb125505

Oui faire n'utilise pas de minuteur pour interroger si un événement s'est produit. Utilisez addEventListener de javascript ou les fonctions d'événement de jQuery. J'utiliserais recommend jQuery car cela rendrait probablement l'écriture plus rapide d'autres parties de votre code.

Source

2011-01-06 05:48:17

Je ne suis pas sûr d'être d'accord avec cela. Si vous savez que vous n'avez pas besoin de plus de (par exemple) 30fps, mais que l'événement clé se déclenche plus fréquemment, il est plus logique d'utiliser 'setTimeout' ou' setInterval' et de faire un traitement super léger des événements entre. – Phrogz

Quelques commentaires généraux:

parseInt() ne tient pas compte déjà de fuite non-numerics, donc il n'y a pas besoin de votre fonction num(). Si c'était le cas, vous pourriez écrire cette regex plus simplement comme /\D+/g.
Si la vitesse est critique, une manière légèrement plus rapide de créer un numéro de plancher est x<<0.
L'ensemble de getPos doit simplement être: return Math.floor(...)+x;. Je n'ai aucune idée de la raison pour laquelle vous déclarez et définissez une variable, la définissez sur elle-même, puis la renvoyez.
Au lieu de re-faire les heli et obj articles chaque appel à moveLeft(), vous devez les mettre une fois (après le document chargé) et laissez-moveLeft() être une fermeture qui les références. Idem avec poss.
Vous avez oublié var votre variable xleft, ce qui en fait une variable globale.
Vous avez if (xleft>0){ xleft=xleft; }. Cela ne fait rien.
Vous pouvez déclarer plusieurs variables sur la même ligne, par ex. Au lieu d'utiliser alert pour le débogage, utilisez console.log (ou mieux encore, les points d'arrêt réels et parcourir votre code). Au lieu d'utiliser alert pour le débogage, utilisez console.log. Vous trouverez votre vie loin, beaucoup plus facile. Recherchez des outils de développement pour Safari/Chrome ou Firebug pour Firefox. Il existe d'autres variables globales telles que hp et op.
Vous devriez regarder dans une bibliothèque comme jQuery qui rendra votre code plus facile à développer. Par exemple, vous n'avez pas à effectuer de tests spécifiques au navigateur pour les événements, car ils les normalisent. Utilisez une instruction switch() pour traiter vos codes-clés au lieu de plusieurs instructions if.
Supprimez les gestionnaires onload et onkeydown de votre corps, et enregistrez-les à la place par programmation à partir de votre script.
Supprimez l'attribut style de votre code HTML et placez-le dans votre feuille de style.

Source

2011-01-06 05:57:20 Phrogz

Merci beaucoup pour vos suggestions man. Je vais certainement les appliquer au script. une chose cependant: j'utilise jquery sur presque tout ce sur quoi je travaille, mais je pensais que ce ne serait pas nécessaire sur ce point – newb125505

@ nesb125505 Puisque vous semblez être nouveau sur Stack Overflow, sachez que vous devriez "voter" (flèche vers le haut) les réponses qui vous ont aidé, et «acceptez» (cocher) la réponse (le cas échéant) qui, selon vous, a résolu votre problème. – Phrogz

Jeu Javascript avec position css

Répondre

Questions connexes