En esta serie de posts vamos a construir paso a paso un pequeño juego en 2D. Hoy partimos por lo más esencial: un jugador que se puede mover libremente en pantalla. Aprenderás a usar Phaser 3, un potente motor de videojuegos para navegador, sin complicaciones.


Paso 1:

Crea una carpeta llamada "mi_juego"


Paso 2:

Necesitaremos Visual Studio Code, puedes descargarlo en: https://code.visualstudio.com/, luego en el menú archivo, haz click en "abrir carpeta", y luego selecciona la carpeta "mi_juego" que creaste.


Paso 3:

Vamos a crear en esta carpeta los siguientes archivos con esta estructura:

mi-juego/
│
├── index.html
├── main.js
└── assets/
    └── greenie.png  ← un sprite de 32x32 px

Nuestro heroe lo puedes descargar aquí:
greenie.png 341 Bytes

Paso 4:

En Visual Studio Code Presiona las siguientes teclas: Ctrl+Shift+X (o Cmd+Shift+X en Mac). Esto te llevara al Marketplace, donde buscaras "live server", vas a utilizar el siguiente:
live_server.jpg 36.6 KB
Haz click en "instalar".


Paso 5:


Nuestro archivo index.html debe tener el siguiente contenido:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mi Primer Juego</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js"></script>
    <style>
      body {
        margin: 0;
        background: #000;
      }
      canvas {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
Básicamente estamos cargando la librería Phaser para nuestro juego, y cargando el archivo principal donde vamos a escribir el código necesario.


Paso 6:

Vamos a escribir el main.js:

// Configuración básica de nuestro juego
const config = {
    type: Phaser.AUTO,
    width: 800,                 // Ancho del canvas
    height: 600,                // Alto del canvas
    backgroundColor: '#1d1d1d', // Color de fondo
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },  // Sin gravedad (juego top-down)
            debug: false
        }
    },
    scene: {
        preload,
        create,
        update
    }
};

let player;
let teclas;

const game = new Phaser.Game(config);

function preload() {
    // Cargar sprite del jugador desde assets
    this.load.image('jugador', 'assets/greenie.png');
}

function create() {
    // Crear el jugador en la escena y aplicarle física
    player = this.physics.add.image(100, 450, 'jugador');
    this.physics.add.existing(player);

    // Impedir que el jugador se salga del canvas
    player.body.setCollideWorldBounds(true);

    // Asignar las teclas de control
    teclas = this.input.keyboard.createCursorKeys();
    this.input.keyboard.addKeys('W,S,A,D');
}

function update() {
    const speed = 200;
    player.body.setVelocity(0);

    // Movimiento horizontal
    if (teclas.left.isDown || this.input.keyboard.keys[65].isDown) {
        player.body.setVelocityX(-speed);
    } else if (teclas.right.isDown || this.input.keyboard.keys[68].isDown) {
        player.body.setVelocityX(speed);
    }

    // Movimiento vertical
    if (teclas.up.isDown || this.input.keyboard.keys[87].isDown) {
        player.body.setVelocityY(-speed);
    } else if (teclas.down.isDown || this.input.keyboard.keys[83].isDown) {
        player.body.setVelocityY(speed);
    }
}


Paso 7:

En Visual Studio Code, haz click con el botón derecho del mouse en el archivo index.html donde dice "open with live server":

open_game.jpg 41.6 KB
Esto ejecutara el juego en tu navegador, donde nuestro heroe puede moverse por la pantalla usando las flechas del teclado o los botones WASD.


¿Qué logramos?

• Tu jugador aparece en pantalla como un sprite
• Puedes moverlo libremente con las flechas o WASD
• Está contenido dentro del espacio del juego


¿Qué sigue?

En la próxima entrega vamos a:
• Añadir un enemigo que patrulla automáticamente
• Detectar colisión con el jugador
• Preparar la mecánica para disparar

Foto de orva studio en Unsplash