10. 1.motor basico bucle del juego

Creando un Motor Básico para un Juego en JavaScript

En este post vamos a explorar cómo crear una estructura básica para el bucle principal de un juego usando JavaScript. Este es el fundamento de lo que podría convertirse en un motor de juego más complejo.

📝 Estructura Básica del Juego

javascript
var fps = 10;
var xEscenario = 0;

function atacar() {
    console.log('estas atacando a tu enemigo!!!');
}

function mueveescenario() {
    xEscenario++;
    console.log(xEscenario);
}

function principal() {
    mueveescenario();
}

setInterval(principal, 1000 / fps);

� Explicación del Código

  1. Variables iniciales:

    • fps: Fotogramas por segundo (en este caso, 10)

    • xEscenario: Posición inicial del escenario (comienza en 0)

  2. Función atacar():

    • Simula un ataque en el juego

    • Se activa con un botón en el HTML

  3. Función mueveescenario():

    • Incrementa la posición del escenario (xEscenario++)

    • Muestra el valor actual en consola

  4. Función principal():

    • Actúa como el núcleo del bucle del juego

    • Llama a mueveescenario() en cada iteración

  5. setInterval:

    • Ejecuta la función principal() repetidamente

    • El intervalo se calcula como 1000 / fps para mantener 10 actualizaciones por segundo

🚀 Cómo Funciona el Motor

El corazón del sistema es setInterval, que llama a la función principal() según la tasa de FPS establecida. Cada vez que se ejecuta:

  1. Llama a mueveescenario()

  2. Incrementa la posición del escenario

  3. Muestra el nuevo valor en consola

Simultáneamente, el botón "Atacar" en la página HTML puede activar la función atacar() cuando el usuario hace clic.

💡 Por Qué es Importante

Esta estructura simple demuestra:

  • El concepto de bucle de juego

  • Control de velocidad de actualización (FPS)

  • Separación de responsabilidades (movimiento, acciones)

  • Interacción con elementos HTML

Es el punto de partida perfecto para expandir hacia un juego más complejo añadiendo gráficos, colisiones, y más mecánicas de juego.

¿Te animas a expandir este motor básico? ¡Comparte tus ideas en los comentarios! 

  1. Función actual:

    • Incrementa la variable xEscenario en 1 cada vez que se llama.

    • Imprime el valor de xEscenario en la consola (con console.log).

  2. Contexto:

    • Se llama repetidamente gracias a setInterval(principal, 1000 / fps), que ejecuta principal() 10 veces por segundo (porque fps = 10).

    • Sin embargo, no hay ningún efecto visual porque el código no dibuja nada en el <canvas> ni utiliza xEscenario para mover elementos gráficos.

  3. Posible propósito (lo que probablemente se intenta hacer):

    • xEscenario parece destinado a controlar el desplazamiento horizontal de un fondo o escenario (como en un juego de desplazamiento lateral).

    • En un desarrollo completo, esta variable probablemente se usaría para:

      • Mover una imagen de fondo (ej. context.drawImage(backgroundImage, -xEscenario, 0)).

      • Desplazar sprites o tiles de un juego.

  4. Problema actual:

    • El código solo incrementa xEscenario y muestra su valor en consola, pero no hay lógica para renderizar gráficos basados en este valor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rectángulo Amarillo Móvil</title>
</head>
<body onload="inicializa()">
    <canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>

<script>
let canvas, ctx;
let FPS = 50;

// Clase Personaje (rectángulo amarillo)
class Personaje {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.direccion = 1; // 1 para derecha, -1 para izquierda
    }

    dibuja() {
        ctx.fillStyle = "#fff000"; // Amarillo
        ctx.fillRect(this.x, this.y, 50, 50); // Rectángulo de 50x50
    }

    mueve() {
        this.x += 2 * this.direccion;

        // Cambiar dirección al alcanzar el borde
        if (this.x <= 0 || this.x >= canvas.width - 50) {
            this.direccion *= -1;
        }
    }
}

// Inicialización
function inicializa() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    let personaje = new Personaje(50, 50); // Solo un personaje

    function principal() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas
        personaje.dibuja();
        personaje.mueve();
    }

    setInterval(principal, 1000 / FPS);
}
</script>
</body>
</html>

¡Claro! Vamos a modificar tu código para que sea visual, moviendo una letra (por ejemplo, la letra "A") horizontalmente por el canvas usando xEscenario. Aquí está el código completo:

La función borraCanvas() se utiliza para limpiar todo el contenido del canvas en cada frame del juego. Esto es esencial en la programación de juegos o animaciones basadas en canvas, y aquí te explico por qué:

  1. Limpieza entre frames: En un juego o animación, cada frame debe dibujarse desde cero. Si no limpiáramos el canvas, los elementos dibujados en frames anteriores permanecerían visibles, creando un efecto de "arrastre" o "fantasma".

  2. Rendimiento: Es más eficiente borrar y redibujar todo que intentar borrar selectivamente partes del canvas.

  3. Movimiento: Para crear la ilusión de movimiento, necesitamos borrar la posición anterior de los objetos antes de dibujarlos en su nueva posición.

En tu código, esta función se llama al principio de la función principal(), que se ejecuta 50 veces por segundo (según tu variable FPS). Esto asegura que:

  • El protagonista

  • Los enemigos

  • Las balas

  • La barra de vida
    se redibujen limpiamente en cada frame, sin dejar rastros de sus posiciones anteriores.

El método clearRect() toma 4 parámetros:

  • Las coordenadas X e Y (0, 0 en este caso) desde donde empezar a borrar

  • El ancho y alto del área a borrar (todo el canvas en este caso)

Sin esta función, verías un efecto de "estela" detrás de todos los elementos móviles del juego.

Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer más

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duración:  8:17 / 8:34 Introducción a las funciones en JavaScript Hola, ¿qué tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera función La sintaxis básica de una función comienza con la palabra reservada  function , seguida del nombre de la función: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta función tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta función a un botón en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este botón, se ejecutará la función y veremos nuestro nivel de vida (10...
Leer más