Tipo: Videojuego educativo/capstone assessment Estado: Completado, funcional Live URL: https://robo-blaster-game.netlify.app/
src/index.js→ Clase Game extiende Phaser.Gamewindow.game = new Game()→ Instancia globalthis.globals = { model, bgMusic: null }→ Estado global
src/Config/config.js→ type: Phaser.AUTO, 1000x630, physics: arcade- NO gravity por defecto (y: 0), debug: false
Entity (base class)
├── Player (hp: 1000, damage: 10)
├── ChaserDude (enemy)
└── JumperDude (enemy)
Game extends Phaser.Game
└── 8 Scenes (Boot, Preloader, Menu, Game, GameOver, etc.)
Componentes:
- Laser/LaserGroup (disparos)
- Slash/SlashGroup (ataques melee)
- Sound (audio management)
- Button (UI)
- BootScene → PreloaderScene → MenuScene
- MenuScene → GameScene (main gameplay)
- GameScene → GameOverScene (on death)
- Side scenes: LeaderBoardScene, CreditsScene, OptionsScene
src/Js/Player.js→ Lógica del jugador, sistema de corazones, doble saltosrc/Scenes/GameScene.js→ Gameplay principal, tile world, rampas, UI corazonessrc/Js/Entity.js→ Clase base para todas las entidadessrc/Config/config.js→ Configuración Phasersrc/Scenes/PreloaderScene.js→ Carga de assets de tiles, corazones, splat.pngsrc/Js/Laser.js→ Proyectiles con splat.png
// Todos usan ES6 modules
import Phaser from 'phaser';
import Entity from './Entity';
export default class Player extends Entityconstructor(config) {
super({ ...config, texture: 'stand' });
this.body.setSize(160, 200);
this.setScale(0.5);
// Player-specific
this.hp = 1000;
this.damage = 10;
// Sistema de corazones
this.maxHearts = 3;
this.hearts = 3;
this.isInvulnerable = false;
// Sistema de doble salto
this.jumpsAvailable = 2;
this.jumpForce = -470;
this.doubleJumpForce = -350;
}damageOrKill(damage)→ Aplica daño, retorna true si mueredie()→ Maneja muerteupdate()→ Lógica por frame (override de Phaser)activateInvulnerability(duration)→ Activa invulnerabilidad con parpadeoupdateJumpState(onGround)→ Actualiza estado de saltostryJump()→ Intenta realizar salto (doble salto)addHeart()→ Añade corazón al jugador
- Clases: PascalCase (Player, GameScene, ChaserDude)
- Métodos: camelCase (damageOrKill, update)
- Variables: camelCase (bgMusic, touchDamage)
- Archivos: PascalCase para clases, camelCase para utilidades
Entity.js # Base class for all game entities
Player.js # Main player (extends Entity)
ChaserDude.js # Chasing enemy
JumperDude.js # Jumping enemy
Laser.js # Projectile class
LaserGroup.js # Projectile group management
Slash.js # Melee attack
SlashGroup.js # Melee attack group
Sound.js # Audio management
Button.js # UI buttons
BootScene.js # Initialization
PreloaderScene.js # Asset loading
MenuScene.js # Main menu
GameScene.js # Main gameplay
GameOverScene.js # Game over screen
LeaderBoardScene.js# Score leaderboard
CreditsScene.js # Credits
OptionsScene.js # Game options
src/Js/api.js # API calls (leaderboard)
src/Js/dom.js # DOM manipulation
src/Js/localStorage.js # Local storage wrapper
"scripts": {
"test": "jest",
"build": "webpack --config webpack/prod.js",
"start": "webpack-dev-server --config webpack/base.js --open"
},
"dependencies": {
"phaser": "^3.24.1"
}webpack/base.js→ Desarrollowebpack/prod.js→ Producción
- Jest con
jest-canvas-mock - Mocks para assets (.gif, .png, etc.)
test/mocks/fileMock.js
// En src/index.js
this.globals = {
model: new Sound(), // Audio state
bgMusic: null // Current background music
};
// En Player.js (SISTEMA DE CORAZONES)
this.maxHearts = 3; // Máximo de corazones (3 corazones completos = 6 medios)
this.hearts = 3; // Corazones actuales
this.isInvulnerable = false; // Estado de invulnerabilidad
this.invulnerabilityTimer = null; // Temporizador de invulnerabilidad
this.alive = true; // Estado de vida
this.damage = 10; // Base damage
// Sistema de doble salto
this.jumpsAvailable = 2; // Saltos disponibles (doble salto)
this.jumpForce = -470; // Fuerza del primer salto
this.doubleJumpForce = -350; // Fuerza del segundo salto (75% del primero)
this.wasOnGround = true; // Para detectar cuando toca el suelo- Arcade physics (no gravity default)
- Player:
setGravityY(520)→ Custom gravity setCollideWorldBounds(true)→ No salir de pantalla- Body size: 160x200 (Player), scaled 0.5
- Phaser built-in collision system
- Groups para manejo de múltiples entidades
- Scene events para transiciones
- Directorio
images/para sprites y UI - Sonidos manejados por clase
Sound - PreloaderScene carga todos los assets
- Tile assets:
/home/pablo/Documentos/spreets/kenney_new-platformer-pack-1.1/Sprites/Tiles/Double/ - Ramp tiles:
terrain_stone_ramp_long_a,terrain_stone_ramp_long_b,terrain_stone_ramp_long_c - Heart system:
hud_heart,hud_heart_half,hud_heart_empty,heart(collectible) - Projectile:
splat.pngusado comoredlightysplat
- Crear clase en
src/Js/que extiendaEntity - Añadir a
GameScene.jsencreate()method - Configurar física y comportamiento en
update()
src/Js/Player.js→ Stats, movimiento, habilidadessrc/Scenes/GameScene.js→ Input handling, game logic
- Crear archivo en
src/Scenes/ - Importar en
src/index.js - Añadir a
this.scene.add() - Configurar transiciones desde otras escenas
src/Js/Button.js→ Botones reutilizables- Cada Scene tiene sus propios elementos UI
- DOM manipulation en
src/Js/dom.js
- NO gravity por defecto → Player tiene gravity personalizada (520)
- Entity es clase abstracta → Todas las entidades la extienden
- window.game es global → Acceder desde cualquier lugar
- Scene management → Phaser maneja transiciones automáticas
- Audio via Sound class → No usar Phaser audio directamente
- Testing requiere mocks → Canvas y assets mockeados
- Arcade physics solo rectángulos/círculos → Rampas implementadas con múltiples cuerpos pequeños
- Sistema de corazones → 3 corazones = 6 medios, invulnerabilidad 3 segundos tras daño
- Doble salto → 2 saltos disponibles, segundo salto 75% fuerza del primero
- Shooting while running → Separado de lógica de movimiento en GameScene.js
# Ver estado actual
git status
npm run test
# Desarrollo
npm start # http://localhost:8080
# Build
npm run build # Output en dist/
# Ver estructura
find src -name "*.js" | grep -v node_modules- Game balance:
Player.js(hp, damage), enemy classes - Graphics:
images/directory, Scene preload methods - Audio:
Sound.js, Scene create methods - UI:
Button.js, Scene create methods - Game flow: Scene transition methods
- Physics:
config.js, Entity constructors - Tile system:
GameScene.jscreateTileWorld(), PreloaderScene.js - Ramp physics:
GameScene.jscreateRealRamp() - Heart system:
Player.jsdamageOrKill(),GameScene.jscreateHeartsUI() - Double jump:
Player.jstryJump(),GameScene.jsupdate() jump logic - Shooting:
Laser.js,LaserGroup.js,GameScene.jsshooting logic