0
248
VistasIntentando actualizar el temporizador dentro del lienzo (JS)
Estoy tratando de recrear un juego inspirado en el minijuego de New Super Mario Bros. llamado "¡Se busca!". Aquí está la situación:
Estoy tratando de tener un temporizador de cuenta regresiva de 10 segundos, usando JavaScript. Cuando el temporizador cuenta regresivamente, quiero que el temporizador se actualice cada segundo que pasa. Pero como verá en la imagen a continuación, el temporizador se escribe sobre sí mismo. Estoy tratando de hacer esto con JavaScript puro, pero HTML también funcionará si es un método preferido. Tenga en cuenta que este es un cuadro fijo. Esto es lo que tengo:
function drawTimer() { var timeLeft = 10; // Set seconds let countDown = setInterval(function() { // Check if we reached 0. if (timeLeft <= 0) { alert("Time's up!"); isWinner = false; document.location.reload(); // reload the page clearInterval(countDown); } else { // Less than 10, requestAnimationFrame(drawTimer); ctx.beginPath(); ctx.font = "16px Arial"; ctx.fillStyle = "#FFFFFF"; ctx.strokeStyle = "#000000"; ctx.fillText("Time left: " + timeLeft, 200, 20); ctx.closePath(); } timeLeft -= 1; }, 1000); } Esto es lo que parece: 
1 Respuestas
Responde la pregunta0
No estoy seguro si entiendes lo que hace el lienzo. Es solo un "lienzo", como dice, y dibujas píxeles.
Por ejemplo, si dibuja algo y desea moverlo a algún lugar, debe dibujar nuevos píxeles en el lugar donde debe moverse y borrar los píxeles anteriores. Es como si estuvieras dibujando un círculo en un papel y quisieras dibujarlo (moverlo) a otro lugar (ese sería otro cuadro), deberías borrar el círculo actual y dibujar uno nuevo en otro lugar.
En su caso, para mostrar el texto del temporizador, dibuja píxeles, cada píxel dibujado permanecerá en el lienzo a menos que lo borre en algún momento. Debería encontrar una manera de borrarlo, pero sería más fácil tener un elemento en html que esté sobre el lienzo (posición absoluta) y no tendrá problemas para volver a pintar.