1

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

(component1) esta es la imagen de fondo de prueba [(link) imagen de frames]

1
  • 1
    No tengo mucha idea, pero quizás deberías asignar personajeAnimado a false en un evento onKeyUp (si es que existe ese evento)
    – Jakala
    Commented el 23 sept. 2023 a las 16:59

1 respuesta 1

0

Esto no lo he probado pero pinta a que la solución está por aquí. Las cosas importantes en el código están en la función que dibuja al personaje y en lo que pasa cuando tocas el teclado. En la función de dibujo del personaje, le pusimos un timer pa que no se mueva como loco. Cuando tocas una tecla que hace que el personaje se mueva, se enciende un reloj (llamado tiempoUltimaAnimacion) para asegurarnos de que la animación funcione correctamente. Esto significa que la animación volverá a empezar cuando vuelvas a mover al personaje.

// Nueva variable para rastrear el tiempo de la última animación
var tiempoUltimaAnimacion = 0;

// ...

// 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 con límite de tiempo
    var tiempoActual = performance.now();
    if (tiempoActual - tiempoUltimaAnimacion > 100) {
        // Cambia de fotograma cada 100 ms (ajusta el valor según tu preferencia)
        indiceX = indiceX + 1;
        if (indiceX > 4) {
            indiceX = 0;
        }
        tiempoUltimaAnimacion = tiempoActual; // Actualiza el tiempo de la última animación
    }
}

// ...

// 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
                tiempoUltimaAnimacion = performance.now(); // Inicia el tiempo de animación
                break;
            case 65: // izquierda
                linkX = linkX - 20; // Controla la velocidad horizontal hacia la izquierda
                indiceY = 1;
                personajeAnimado = true; // Comienza la animación
                tiempoUltimaAnimacion = performance.now(); // Inicia el tiempo de animación
                break;
            case 87: // arriba
                linkY = linkY - 20; // Controla la velocidad vertical hacia arriba
                indiceY = 2;
                personajeAnimado = true; // Comienza la animación
                tiempoUltimaAnimacion = performance.now(); // Inicia el tiempo de animación
                break;
            case 68: // derecha
                linkX = linkX + 20; // Controla la velocidad horizontal hacia la derecha
                indiceY = 3;
                personajeAnimado = true; // Comienza la animación
                tiempoUltimaAnimacion = performance.now(); // Inicia el tiempo de animación
                break;
            default:
                break;
        }
    }
};

Repito que esto no esta probado y posiblemente no sea tu respuesta final, pero creo que tiene sentido tirar por aquí. Suerte crack esta guapo el programa.

1
  • 1
    Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 25 sept. 2023 a las 14:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.