Juego de Javascript; ralentizando y congelando! ¿Cómo resolverlo?

Estoy empezando a programar una defensa de torre de JavaScript; hasta ahora tengo el movimiento de los minions en una trayectoria. Pero tengo un problema muy grande, el juego se congela de repente por un par de segundos. Supongo que es el recolector de basura haciendo su trabajo, cualquier idea sobre cómo puedo resolver esto será muy buena ya que planeo agregar muchos más elementos al juego y no quiero seguir codificando hasta que consiga ¡esto fluye perfectamente!Juego de Javascript; ralentizando y congelando! ¿Cómo resolverlo?

El código hasta ahora es bastante simple; se puede comprobar que funciona here

Aquí está el código:

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

Fuente

2009-06-12 DFectuoso

¿Intentó aumentar el intervalo a algo así como 30? – cloudhead

Sí, ocurre incluso con intervalos en el 1000 – DFectuoso

No es el recolector de basura de hacer el trabajo, pero en su código cuando se intenta establecer las posiciones superior e izquierdo, a la vez particuar el valor que intentas establecer no un número. Así que el código se rompe ...

Creo que esto ocurre cuando el div en movimiento cruza la parte superior del contenedor con fondo rojo.

Fuente

2009-06-12 05:03:02 rahul

Se abre antes de que salgan del fondo. Estaba pensando más en los puntos decimales en la declaración de la izquierda y la derecha; déjame verlo – DFectuoso

El juego es muy bueno .... – rahul

También verifica esto en IE7. Genera un error de script. – rahul

Sí, así es: la demora se debe a que cuando hay demasiados monstruos, hay demasiadas actualizaciones de posición que deben realizarse. Esto causa el retraso de "volver a dibujar".

Veo que hay un elemento DOM para cada monstruo (como debería ser el caso). Pero, estás actualizando sus posiciones una por una.

Consejos para reducir este retraso:

En primer lugar, sería una mejor stategy para actualizar sus posiciones en masa:

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

Así actualizar la posición de '# monstruo-contenedor' cuando los monstruos movimiento. De esta forma, el tiempo de redibujado definitivamente se minimizará. Lo que digo proviene de una comprensión primitiva de tu juego. Es posible que deba modificar este enfoque según la ruta de los monstruos. Mi enfoque funcionará directamente solo si los monstruos solo se mueven en línea recta.

En segundo lugar, si está utilizando img de los monstruos, considerar el uso de divs, y establecer las imágenes como fondo del div. Esto ha dado un rendimiento de redibujado más rápido en muchos de mis juegos de mascotas.
En tercer lugar, si está utilizando imágenes individuales para los monstruos, considere usar una imagen compuesta y CSS spriting.

¡Te deseo suerte con tu juego! ¡¡Aclamaciones!!

JRH

Fuente

2009-06-12 05:15:41 jrharshath

Sí; pero necesito moverlos uno por uno para que el juego sea como yo lo necesito. Gracias por los otros consejos, pero! – DFectuoso

que se hace fácilmente: muévelos con respecto a su div contenedor! En realidad, me he enfrentado a estos antes ... Y si realmente quieres construir un juego intensivo, usa

Es una buena idea ... hummm hummm – DFectuoso

Sí, eso es sin duda un recolector de basura. Estoy desarrollando un juego de JavaScript, y pasé los últimos días tratando de deshacerme de este problema. Hasta ahora puedo decir que es imposible.

Sin embargo, me gustaría señalar que diferentes navegadores tienen diferentes recolectores de basura, y por ejemplo, en Safari 4, su ejemplo se ejecuta perfectamente sin problemas.

Y aquí es enlace interesante sobre este tema: Reducing freezing with Object Pooling

Honestamente, creo, que la técnica descrita en este artículo no es muy útil, ya que incluso en su ejemplo, que no tiene ninguna de las variables necesarias para ser despejado, la congelación es realmente notable.

También he reescrito su ejemplo para comprobar si las variables globales han arruinado el rendimiento. You can see the difference yourself

Fuente

2009-07-31 10:42:11

No selecciona tu respuesta como correcta porque no resuelve el problema, ¡pero te encanta! ¡hombre !, ¡excelente respuesta, buen contenido, comprensión del problema y definitivamente útil! – DFectuoso

Juego de Javascript; ralentizando y congelando! ¿Cómo resolverlo?

Respuesta

Cuestiones relacionadas