*Estoy trabajando en un proyecto de juego en HTML5 que implica un personaje que se mueve por un canvas. Ya tengo un código funcional que permite que el personaje se mueva en diferentes direcciones cuando se presionan las teclas correspondientes (abajo, izquierda, arriba, derecha). Sin embargo, estoy tratando de lograr dos cosas:
Que el personaje se quede quieto cuando no se presionen teclas: Actualmente, el personaje sigue animándose incluso cuando no se están presionando teclas. Quiero que el personaje se quede en su último fotograma cuando no se estén utilizando las teclas.
Que el personaje vuelva a animarse al moverlo: Cuando se presiona una tecla y el personaje se mueve, la animación funciona correctamente. Pero después de soltar la tecla, el personaje se queda en el último fotograma de la animación. Quiero que la animación vuelva a empezar cuando el personaje se mueva nuevamente. Los elementos que necesitaran serán "component1.png" y "link.png"*
<canvas id="CanvasG" width="1720px" height="768%"></canvas> <!-- Elemento canvas para renderizar gráficos con un identificador 'CanvasG' y dimensiones especificadas -->
<script> <!-- Script JavaScript para interactuar con la página -->
var name = parseFloat(prompt("Escribe el nombre de tu personaje")) // Variable para almacenar el nombre del personaje obtenido a través de una ventana emergente de entrada de datos
var canvasC = document.getElementById("CanvasG"); // Obtiene una referencia al elemento canvas con ID 'CanvasG'
var pant = canvasC.getContext("2d"); // Obtiene el contexto 2D del canvas para dibujar gráficos
var anchoPantalla = 1720; // Variable para el ancho de la pantalla
var altoPantalla = 758; // Variable para el alto de la pantalla
var teclap = 0; // Variable para rastrear la tecla presionada
var personajeAnimado = false; // Variable para rastrear si se debe animar el personaje
var backgroundImg = new Image(); // Creación de un objeto de imagen para el fondo
backgroundImg.src = "component1.png"; // Establece la fuente de la imagen de fondo
backgroundImg.onload = function () { // Función que se ejecuta cuando la imagen de fondo se ha cargado
var sprite = new Image(); // Creación de un objeto de imagen para el personaje
sprite.src = "link.png"; // Establece la fuente de la imagen del personaje
var indiceX = 0; // Variable para rastrear el índice X del sprite
var indiceY = 0; // Variable para rastrear el índice Y del sprite
var linkX = 0; // Posición X inicial del personaje en el canvas
var linkY = 0; // Posición Y inicial del personaje en el canvas
// Función para dibujar el personaje
function dibujarPersonaje() {
// Dibuja el personaje en el canvas
pant.drawImage(sprite, indiceX * 32, indiceY * 32, 32, 32, linkX, linkY, 90, 90);
// Animación de sprite
indiceX = indiceX + 1;
if (indiceX > 4) {
indiceX = 0;
}
}
// Función para dibujar el fondo y el personaje en el canvas
function dibujaCanvas() {
// Dibuja la imagen de fondo en el canvas
pant.drawImage(backgroundImg, 0, 0, anchoPantalla, altoPantalla);
if (personajeAnimado) {
// Llama a la función para dibujar el personaje
dibujarPersonaje();
} else {
// Dibuja el primer fotograma del personaje (estático) en el canvas
pant.drawImage(sprite, 0, 0, 32, 32, linkX, linkY, 90, 90);
}
// Dibuja información sobre la tecla presionada en el canvas
pant.fillStyle = 'white';
pant.font = 'italic bold 18pt Times New Roman';
pant.fillText("Tecla Presionada: " + teclap + ", X: " + linkX + " Y: " + linkY, 10, 30, (anchoPantalla - 10));
// Llama a la función de dibujo de nuevo para la animación continua
requestAnimationFrame(dibujaCanvas);
}
// Eventos de teclado
document.onkeydown = function (event) {
if (event == null) {
teclap = window.event.keyCode;
} else {
teclap = event.keyCode;
// Controla el movimiento del personaje según la tecla presionada
switch (teclap) {
case 83: // abajo
linkY = linkY + 20; // Controla la velocidad vertical hacia abajo
indiceY = 0;
personajeAnimado = true; // Comienza la animación
break;
case 65: // izquierda
linkX = linkX - 20; // Controla la velocidad horizontal hacia la izquierda
indiceY = 1;
personajeAnimado = true; // Comienza la animación
break;
case 87: // arriba
linkY = linkY - 20; // Controla la velocidad vertical hacia arriba
indiceY = 2;
personajeAnimado = true; // Comienza la animación
break;
case 68: // derecha
linkX = linkX + 20; // Controla la velocidad horizontal hacia la derecha
indiceY = 3;
personajeAnimado = true; // Comienza la animación
break;
default:
break;
}
}
};
// Inicia la animación después de cargar el fondo
requestAnimationFrame(dibujaCanvas);
};
</script> <!-- Fin del script JavaScript -->
personajeAnimado
a false en un eventoonKeyUp
(si es que existe ese evento)