Phaser 3 실전 프로젝트: 충돌·물리·애니메이션 완벽 마스터 2026

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);
let player;
let cursors;
let score = 0;

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.image('star', 'assets/star.png');
  this.load.image('bomb', 'assets/bomb.png');
}

function create() {
  this.add.image(400, 300, 'sky');
  
  // 플레이어 생성 (물리 활성화)
  player = this.add.sprite(100, 450, 'dude');
  this.physics.add.existing(player);
  player.body.setBounce(0.2);
  player.body.setCollideWorldBounds(true);
  
  // 키보드 입력
  cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  if (cursors.left.isDown) {
    player.body.setVelocityX(-160);
  } else if (cursors.right.isDown) {
    player.body.setVelocityX(160);
  } else {
    player.body.setVelocityX(0);
  }
  
  if (cursors.up.isDown && player.body.touching.down) {
    player.body.setVelocityY(-330);
  }
}

function create() {
  // ... 기존 코드 ...
  
  const platforms = this.physics.add.staticGroup();
  platforms.create(400, 568, 'ground');
  platforms.create(600, 400, 'ground');
  platforms.create(50, 250, 'ground');
  platforms.create(750, 220, 'ground');
  
  // 플레이어와 플랫폼의 충돌
  this.physics.add.collider(player, platforms);
}

let stars;

function create() {
  // ... 기존 코드 ...
  
  stars = this.physics.add.group();
  for (let i = 0; i < 12; i++) {
    const x = Phaser.Math.Between(50, 750);
    const y = Phaser.Math.Between(0, 300);
    stars.create(x, y, 'star');
  }
  
  // 플레이어가 별을 만나면 collectStar 함수 호출
  this.physics.add.overlap(player, stars, collectStar, null, this);
}

function collectStar(player, star) {
  star.disableBody(true, true); // 별 제거
  score += 10;
  // 게임 오버 조건: 별이 모두 사라지면 게임 승리
}

let bombs;

function create() {
  // ... 기존 코드 ...
  
  bombs = this.physics.add.group();
  
  // 플레이어와 폭탄의 충돌 → 게임 오버
  this.physics.add.collider(bombs, platforms);
  this.physics.add.overlap(player, bombs, hitBomb, null, this);
}

function update() {
  // ... 기존 코드 ...
  
  // 별을 전부 수집하면 폭탄 생성
  if (stars.children.entries.length === 0) {
    const x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
    const bomb = bombs.create(x, 16, 'bomb');
    bomb.setBounce(1);
    bomb.setCollideWorldBounds(true);
    bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
  }
}

function hitBomb(player, bomb) {
  this.physics.pause();
  player.setTint(0xff0000);
  gameOver = true;
}

function preload() {
  // ... 기존 코드 ...
  this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}

function create() {
  // 왼쪽 이동 애니메이션
  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
  
  // 오른쪽 이동 애니메이션
  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });
  
  // 정지 상태
  this.anims.create({
    key: 'turn',
    frames: [{ key: 'dude', frame: 4 }],
    frameRate: 20
  });
}

function update() {
  if (cursors.left.isDown) {
    player.body.setVelocityX(-160);
    player.play('left', true);
  } else if (cursors.right.isDown) {
    player.body.setVelocityX(160);
    player.play('right', true);
  } else {
    player.body.setVelocityX(0);
    player.play('turn');
  }
}

// 1. 난이도 조절: 폭탄 속도 점진적 증가
let level = 1;
let bombSpeed = 100 + (level * 20);
bomb.setVelocity(
  Phaser.Math.Between(-bombSpeed, bombSpeed),
  20
);

// 2. UI 표시: 점수와 레벨
let scoreText = this.add.text(16, 16, 'Score: 0', {
  fontSize: '32px',
  fill: '#fff'
});
scoreText.setText('Score: ' + score);

// 3. 게임 오버 화면
let gameOverText = this.add.text(400, 300, 'GAME OVER', {
  fontSize: '64px',
  fill: '#ff0000',
  align: 'center'
});
gameOverText.setOrigin(0.5);

// 4. 재시작 기능
this.input.keyboard.on('keydown-SPACE', () => {
  if (gameOver) this.scene.restart();
});