Estudio de Phaser.js

• Renderizado 2D y 3D
• Soporte para WebGL y Canvas
• Físicas integradas

• Juegos HTML5
• Juegos móviles
• Juegos en el navegador

Instalación: npm i phaser (o CDN)

new Phaser.Game({ type: Phaser.AUTO, width: 400, height: 300,
  scene: { create() { this.add.text(20, 20, 'Hola Phaser'); } } });

1. Movimiento con teclas

Un sprite se mueve con las flechas.

new Phaser.Game({
  type: Phaser.AUTO, width: 400, height: 300,
  scene: {
    create() {
      this.jug = this.add.rectangle(200, 150, 30, 30, 0xff6600);
      this.cursors = this.input.keyboard.createCursorKeys();
    },
    update() {
      const p = this.jug; const c = this.cursors;
      if (c.left.isDown) p.x -= 3; if (c.right.isDown) p.x += 3;
      if (c.up.isDown) p.y -= 3; if (c.down.isDown) p.y += 3;
    },
  },
});

2. Colisiones + marcador

Cuenta cuántas monedas recoge el jugador.

const game = new Phaser.Game({
  type: Phaser.AUTO, width: 400, height: 300,
  scene: {
    create() {
      this.puntos = 0;
      this.jug = this.add.rectangle(20, 150, 30, 30, 0x3399ff);
      this.moneda = this.add.circle(350, 150, 12, 0xffd700);
      this.txt = this.add.text(10, 10, 'Puntos: 0');
    },
    update() {
      const d = Phaser.Math.Distance.Between(this.jug.x, this.jug.y, this.moneda.x, this.moneda.y);
      if (d < 30) { this.puntos++; this.txt.setText('Puntos: ' + this.puntos); this.moneda.setVisible(false); }
    },
  },
});