Videojuego arcade con Bootstrap 5.3 y Phaser 3 desde Cerewro

Combina el motor de juego Phaser 3 (el más popular para HTML5) con Bootstrap 5.3 para crear un videojuego arcade con interfaz de usuario moderna: menú responsivo, HUD en tiempo real, tabla de récords y pantalla de game over con animaciones.

¿Por qué Phaser 3 + Bootstrap?

ComponenteRolLo mejor de cada uno
Phaser 3Motor de juegoPhysics, sprites, animaciones, tilemaps, audio, cámaras
Bootstrap 5.3UI fuera del juegoMenú principal, modales, formularios, ranking, diseño responsive

Estructura del proyecto

Organización de archivos
mi-juego/
├── index.html           ← Bootstrap UI (menú, modales, ranking)
├── game.js              ← Phaser 3 (escenas del juego)
├── assets/
│   ├── sprites/         ← imágenes de personajes y objetos
│   ├── tilemaps/        ← mapas de niveles
│   └── audio/           ← efectos y música

Prompt para generar el juego completo

Cerewro Chat
Crea un videojuego de plataformas completo con Phaser 3.70 y Bootstrap 5.3:

UI con Bootstrap:
- Pantalla de inicio con logo, botón "Jugar" y "Ranking"
- Modal de configuración (volumen, controles)
- Tabla de récords con localStorage
- Pantalla de game over con puntuación y botón reiniciar

Motor de juego con Phaser 3:
- Escena de carga (preloader con barra de progreso)
- Escena principal con plataformas, enemigos y monedas
- Física de arcade (gravedad, salto, colisiones)
- HUD con puntos y vidas
- Efectos de partículas en monedas y explosiones
- Música de fondo y efectos de sonido
- Soporte para teclado y pantalla táctil

Estructura del código Phaser 3

game.js — Configuración Phaser
const config = {
  type:   Phaser.AUTO,
  width:  800,
  height: 600,
  parent: 'game-container',    // div dentro del layout Bootstrap
  backgroundColor: '#1a1a2e',
  physics: {
    default: 'arcade',
    arcade:  { gravity: { y: 800 }, debug: false }
  },
  scene: [PreloadScene, MenuScene, GameScene, GameOverScene]
};

class GameScene extends Phaser.Scene {
  create() {
    // Plataformas
    this.platforms = this.physics.add.staticGroup();
    this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    this.platforms.create(600, 400, 'ground');

    // Jugador con física
    this.player = this.physics.add.sprite(100, 450, 'dude');
    this.player.setBounce(0.2);
    this.player.setCollideWorldBounds(true);

    // Animaciones
    this.anims.create({
      key:    'run',
      frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
      frameRate: 10, repeat: -1
    });

    // Colisiones
    this.physics.add.collider(this.player, this.platforms);

    // Teclado
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-200);
      this.player.anims.play('run', true);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(200);
    } else {
      this.player.setVelocityX(0);
    }
    if (this.cursors.up.isDown && this.player.body.touching.down) {
      this.player.setVelocityY(-600);
    }
  }
}

HUD con Bootstrap fuera del canvas

index.html — Layout Bootstrap + Canvas



  


  
  
⭐ Puntos: 0 ❤️ Vidas: 3 🏆 Nivel: 1
Phaser 3 + Bootstrap = lo mejor de dos mundos: Usa Phaser 3 para todo lo que ocurre dentro del canvas (física, sprites, animaciones) y Bootstrap para toda la UI exterior al canvas (menús, formularios, modales, tablas de récords). Nunca mezcles Bootstrap dentro del canvas.