PhaserJS入門
最初のゲーム（基本編） 🎮

// src/scenes/GameScene.ts
import * as Phaser from 'phaser';

export class GameScene extends Phaser.Scene {
    // モグラの穴の位置（画面の中央）
    private holeX: number = 400;
    private holeY: number = 300;
    
    // ゲームで使用するオブジェクトを格納する変数
    private hole: Phaser.GameObjects.Image | null = null;
    private mole: Phaser.GameObjects.Image | null = null;
    
    // モグラの状態を管理する変数
    private moleVisible: boolean = false;
    
    // タイマー関連の変数（deltaTime使用）
    private moleTimer: number = 0; // モグラ表示時間のカウンタ
    private spawnTimer: number = 0; // モグラ出現間隔のカウンタ
    private moleShowDuration: number = 3000; // モグラ表示時間（ミリ秒）
    private moleSpawnInterval: number = 2000; // モグラ出現間隔（ミリ秒）
    private hitShowDuration: number = 500; // やられ状態表示時間（ミリ秒）
    private moleHit: boolean = false; // モグラがやられた状態かどうか

    constructor() {
        super({ key: 'GameScene' });
    }

    // ゲーム開始前にアセットを読み込む
    preload(): void {
        // 画像ファイルを読み込み
        this.load.image('hole', 'assets/hole.png');
        this.load.image('mole', 'assets/mole.png');
        this.load.image('mole_hit', 'assets/mole_hit.png');
    }

    // シーンが開始されたときに実行
    create(): void {
        // 背景色を設定
        this.cameras.main.setBackgroundColor('#4ade80');

        // 穴を画面に配置
        this.hole = this.add.image(this.holeX, this.holeY, 'hole');
    }

    // フレーム毎に実行される処理
    update(time: number, delta: number): void {
        // モグラが表示されていない場合の出現タイマー
        if (!this.moleVisible) {
            this.spawnTimer += delta;
            if (this.spawnTimer >= this.moleSpawnInterval) {
                this.showMole();
                this.spawnTimer = 0;
            }
        } else {
            // モグラが表示されている場合の非表示タイマー
            this.moleTimer += delta;
            const duration = this.moleHit ? this.hitShowDuration : this.moleShowDuration;
            
            if (this.moleTimer >= duration) {
                this.hideMole();
                this.moleTimer = 0;
            }
        }
    }
}

// GameScene.tsのcreate()メソッドの後に追加

// モグラを表示する
private showMole(): void {
    // すでにモグラが表示されている場合は何もしない
    if (this.moleVisible) {
        return;
    }

    // モグラを作成して画面に表示
    this.mole = this.add.image(this.holeX, this.holeY, 'mole');
    
    // モグラをクリック可能にする
    this.mole.setInteractive();
    
    // クリックされたときの処理を設定
    this.mole.on('pointerdown', () => {
        this.hitMole();
    });

    // モグラが表示されている状態にする
    this.moleVisible = true;
    this.moleHit = false;
    this.moleTimer = 0; // タイマーをリセット
}

// モグラがクリックされたときの処理
private hitMole(): void {
    // モグラが表示されていない場合は何もしない
    if (!this.moleVisible || !this.mole) {
        return;
    }

    // 画像をやられた状態に変更
    this.mole.setTexture('mole_hit');
    
    // クリックを無効にする
    this.mole.disableInteractive();
    
    // やられた状態にしてタイマーをリセット
    this.moleHit = true;
    this.moleTimer = 0;
}

// モグラを隠す
private hideMole(): void {
    // モグラが存在する場合は削除
    if (this.mole) {
        this.mole.destroy();
        this.mole = null;
    }
    
    // モグラが隠れている状態にする
    this.moleVisible = false;
    this.moleHit = false;
}

// src/main.ts
import './style.css';
import * as Phaser from 'phaser';
import { GameScene } from './scenes/GameScene';

// ゲーム設定用の変数
const gameWidth: number = 800;
const gameHeight: number = 600;
const backgroundColor: string = '#4ade80';

// ゲーム設定
const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    width: gameWidth,
    height: gameHeight,
    parent: 'app',
    backgroundColor: backgroundColor,
    scene: [GameScene]
};

// ゲームを開始
new Phaser.Game(config);