2009-06-12 13 views
7

Sto iniziando a programmare una difesa tower javascript; finora ho il movimento dei servi su una traiettoria. Ma ho un grosso problema, il gioco si blocca improvvisamente per un paio di secondi. Immagino che sia il garbage collector a fare il suo lavoro, qualsiasi idea su come posso risolvere questo sarà molto buona dal momento che ho in programma di aggiungere molti più elementi al gioco e non voglio continuare a programmare finché non ottengo questo scorre perfettamente!Gioco Javascript; rallentando e congelando! Come risolverlo?

Il codice finora è piuttosto semplice; è possibile controllarlo fuori here

Ecco il codice:

<html> 
<head> 
    <style> 
     #game{ 
      background:red; 
      width:500px;    
      height:500px;   
      position:relative;   
     } 
     .mostro { 
      background:black; 
      width:15px;   
      height:15px;    
      position:absolute;   
     } 
    </style> 
</head> 
<body> 
<div id="game"> 
<script type="text/javascript"> 
waypoint_x = [40, 140, 140, 220, 220, 80, 80, 340, 340, 420, 420]; 
waypoint_y = [140, 140, 60, 60, 240, 240, 320, 320, 100, 100, -20]; 
delay = 25; 
new_monster = 0; 
monsters_placed = 0; 
monsters = []; 
var d = new Date(); 
dist_x = 0; 
dist_y = 0; 
angle = 0; 
mostro=""; 
total_monsters = 5; 
function runGame() { 
    if (monsters_placed<total_monsters) { 
     new_monster++; 
    } 
    if (new_monster == delay) { 
     new_monster = 0; 
     document.getElementById("game").innerHTML = document.getElementById("game").innerHTML + '<div class="mostro" id="mostro-'+monsters_placed+'"></div>'; 
     monsters_placed++; 
    } 
    for (i=0;i<monsters_placed;i=i+1) { 
      mostro = monsters[i]; 
      dist_x = waypoint_x[mostro.point_to_reach] - mostro._x; 
      dist_y = waypoint_y[mostro.point_to_reach] - mostro._y; 
      if ((Math.abs(dist_x) + Math.abs(dist_y)) < 1) { 
       monsters[i].point_to_reach++; 
      } 
      angle = Math.atan2(dist_y, dist_x); 
      mostro._x = mostro._x + mostro.speed * Math.cos(angle); 
      mostro._y = mostro._y + mostro.speed * Math.sin(angle); 
      monsters[i]._rotation = angle/Math.PI*180-90  
     document.getElementById("mostro-"+i).style.left = Math.ceil(mostro._x) + "px"; 
     document.getElementById("mostro-"+i).style.top = Math.ceil(mostro._y) + "px"; 
    } 
} 

function setUpGame(){ 
    for(i=0;i<=total_monsters;i++){ 
     monsters[i] = new Object(); 
     monsters[i].point_to_reach = 0; 
     monsters[i].speed = 1; 
     monsters[i]._x = 0; 
     monsters[i]._y = 0; 
    } 
} 
setUpGame(); 
setInterval(runGame,10); 
</script> 
</body> 
</html> 
+0

Hai provato ad aumentare l'intervallo a qualcosa come 30? – cloudhead

+0

Sì, succede anche con intervalli negli anni 1000 – DFectuoso

risposta

2

Non è il garbage collector fare il lavoro, ma nel codice quando si tenta di impostare le prime posizioni e sinistra, in un momento in particuar il valore che provi a impostare non un numero. Quindi il codice si rompe ....

Penso che questo si verifica quando il div in movimento attraversa la parte superiore del contenitore con sfondo rosso.

+0

È attivo prima che escano dallo sfondo. Stavo pensando più ai punti decimali nella dichiarazione sinistra e destra; fammi controllare – DFectuoso

+0

Il gioco è molto bello .... – rahul

+0

Controlla anche questo in IE7. Genera un errore di script. – rahul

2

Sì, è giusto: il ritardo è perché quando ci sono troppi mostri, ci sono troppi aggiornamenti di posizione che devono essere fatti. Questo causa il ritardo del "ridisegno".

Vedo che c'è un elemento DOM per ogni mostro (come dovrebbe essere il caso). Ma stai aggiornando le loro posizioni una per una.

Suggerimenti per ridurre questo ritardo:

In primo luogo, sarebbe uno stategy meglio per aggiornare le loro posizioni in massa:

<div id='monster-container'> 
    <div id='monstser-1'></div> 
    <div id='monstser-2'></div> 
    <div id='monstser-3'></div> 
</div> 

Quindi aggiornare la posizione di '# mostro-container', quando i mostri mossa. In questo modo il tempo di ridisegno sarà sicuramente ridotto al minimo. Quello che dico è da una comprensione primitiva del tuo gioco. Potrebbe essere necessario modificare questo approccio a seconda del percorso dei mostri. Il mio approccio funzionerà direttamente solo se i mostri si muovono solo in linea retta.

  • In secondo luogo, se si sta utilizzando img di per i mostri, considerare l'utilizzo di div, e impostare le immagini come sfondo del div. Ciò ha dato prestazioni di ridisegno più veloci in molti dei miei giochi di animali domestici.

  • In terzo luogo, se si utilizzano immagini singole per i mostri, prendere in considerazione l'uso di un'immagine composita e la scrittura CSS.

Ti auguro buona fortuna con il tuo gioco! Saluti!!

jrh

+0

Sì; ma ho bisogno di spostarli uno per uno per rendere il gioco il modo in cui ho bisogno di essere. Grazie per gli altri consigli! – DFectuoso

+0

che è fatto facilmente: spostarli rispetto al loro contenitore div! Li ho già affrontati prima ... E se vuoi davvero creare un gioco intensivo, usa . In realtà, lo spostamento di div e img su di esso non ti permetterà di farlo. – jrharshath

+0

Questa è una buona idea ... hummm hummm – DFectuoso

1

Sì, questo è sicuramente un netturbino. Sto sviluppando un gioco JavaScript anch'io, e ho passato gli ultimi giorni a cercare di liberarmi di questo problema. Per ora posso dire che è impossibile.

Tuttavia, desidero notare che diversi browser hanno diversi garbage collector e, ad esempio, in Safari 4, il tuo esempio funziona perfettamente liscio.

Ed ecco link interessante su questo argomento: Reducing freezing with Object Pooling

Onestamente, credo, che la tecnica descritta in questo articolo non è molto utile, perché anche nel tuo esempio, che non ha nessun variabili necessarie per essere eliminato, il congelamento è davvero notevole.

Inoltre ho riscritto il tuo esempio, per verificare se le variabili globali hanno rovinato le prestazioni. You can see the difference yourself

+0

Non selezionare la risposta come corretta perché non risolve il problema, ma tu rock! uomo !, ottima risposta, buon contenuto, comprensione del problema e decisamente utile !!! – DFectuoso

Problemi correlati