<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スペースデストロイヤー (デバッグ版)</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: 'Helvetica', 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            height: 100vh;
        }
        h1 {
            font-size: 2.5rem;
            color: #4CAF50;
            text-shadow: 2px 2px #000;
        }
        canvas {
            background-color: #111;
            border: 2px solid #fff;
            box-shadow: 0 0 15px #fff;
        }
        p {
            font-size: 1.2rem;
        }
    </style>
</head>
<body>

    <h1>スペースデストロイヤー（パソコン専用）</h1>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <p>操作: ← → で移動, ↑ で発射, ESC で一時停止</p>

<script>
console.log("ゲームスクリプトが読み込まれました。");

// ===============================================
// 1. ゲームの基本設定
// ===============================================
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const PLAYER_WIDTH = 50, PLAYER_HEIGHT = 30, PLAYER_SPEED = 7, BULLET_SPEED = 10;
const ENEMY_ROWS = [4, 5, 5], ENEMY_COLS = [8, 10, 12], ENEMY_SHOOT_INTERVAL = [800, 600, 400];

let score = 0, lives = 3, stage = 1;
let gameState = 'start', previousGameState;
let keys = {}, scoreForNextLife = 5000;

// ===============================================
// 2. クラス定義
// ===============================================
class Player {
    constructor() {
        this.width = PLAYER_WIDTH; this.height = PLAYER_HEIGHT;
        this.x = canvas.width / 2 - this.width / 2;
        this.y = canvas.height - this.height - 20;
        this.speed = PLAYER_SPEED; this.shootCooldown = 0;
    }
    draw() {
        ctx.fillStyle = '#4CAF50'; ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = '#ADFF2F'; ctx.fillRect(this.x + this.width / 2 - 2.5, this.y - 5, 5, 5);
    }
    update() {
        if (keys['ArrowLeft'] && this.x > 0) this.x -= this.speed;
        if (keys['ArrowRight'] && this.x < canvas.width - this.width) this.x += this.speed;
        if (keys['ArrowUp'] && this.shootCooldown <= 0) this.shoot();
        if (this.shootCooldown > 0) this.shootCooldown--;
    }
    shoot() {
        playerBullets.push(new Bullet(this.x + this.width / 2 - 2.5, this.y, 5, 10, '#ADFF2F', -BULLET_SPEED));
        this.shootCooldown = 20;
    }
}

class Bullet {
    constructor(x, y, w, h, c, s, sx = 0) { this.x = x; this.y = y; this.width = w; this.height = h; this.color = c; this.speed = s; this.speedX = sx; }
    draw() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); }
    update() { this.y += this.speed; this.x += this.speedX; }
}

class Enemy {
    constructor(x, y, w, h, c, v) { this.x = x; this.y = y; this.width = w; this.height = h; this.color = c; this.scoreValue = v; }
    draw() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); }
}

class Boss {
    constructor(stage) {
        this.baseHealth = 100; this.width = 150 + (stage - 1) * 20; this.height = 80 + (stage - 1) * 10;
        this.x = canvas.width / 2 - this.width / 2; this.y = 50; this.speed = 2 + stage;
        this.health = this.baseHealth * stage; this.maxHealth = this.baseHealth * stage;
        this.color = `hsl(${stage * 60}, 100%, 50%)`; this.shootInterval = 50 - (stage * 10); this.shootTimer = 0;
    }
    draw() {
        ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = '#555'; ctx.fillRect(this.x, this.y - 20, this.width, 10);
        ctx.fillStyle = 'red'; ctx.fillRect(this.x, this.y - 20, this.width * (this.health / this.maxHealth), 10);
    }
    update() {
        this.x += this.speed; if (this.x <= 0 || this.x + this.width >= canvas.width) this.speed *= -1;
        this.shootTimer++; if (this.shootTimer >= this.shootInterval) { this.shoot(); this.shootTimer = 0; }
    }
    shoot() {
        const bs = 4 + stage, bc = this.color; enemyBullets.push(new Bullet(this.x + this.width / 2, this.y + this.height, 8, 8, bc, bs));
        if (stage >= 2) { enemyBullets.push(new Bullet(this.x + this.width / 4, this.y + this.height, 8, 8, bc, bs)); enemyBullets.push(new Bullet(this.x + (this.width * 3 / 4), this.y + this.height, 8, 8, bc, bs)); }
        if (stage >= 3) { enemyBullets.push(new Bullet(this.x, this.y + this.height / 2, 10, 10, bc, bs, -2)); enemyBullets.push(new Bullet(this.x + this.width, this.y + this.height / 2, 10, 10, bc, bs, 2)); }
    }
}

class Particle {
    constructor(x, y, color) {
        this.x = x; this.y = y; this.size = Math.random() * 5 + 2;
        this.speedX = (Math.random() - 0.5) * 8; this.speedY = (Math.random() - 0.5) * 8;
        this.color = color || `hsl(${Math.random() * 60 + 30}, 100%, 50%)`; this.life = 60;
    }
    update() { this.x += this.speedX; this.y += this.speedY; this.life--; }
    draw() { ctx.globalAlpha = this.life / 60; ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.size, this.size); ctx.globalAlpha = 1.0; }
}

// ===============================================
// 3. ゲームオブジェクトの管理
// ===============================================
let player, playerBullets, enemies, enemyBullets, boss, particles;
let enemyDirection = 1, enemySpeed = 0.5, enemyMoveDown = false, lastEnemyShootTime = 0;

// ===============================================
// 4. ゲームの初期化・ステージ設定
// ===============================================
function init() {
    console.log("init()関数が呼び出されました。ゲームを開始します。");
    score = 0; lives = 3; stage = 1; scoreForNextLife = 5000;
    setupStage(); 
    gameState = 'playing';
}

function setupStage() {
    console.log("setupStage()関数が呼び出されました。ステージを準備します。");
    player = new Player(); playerBullets = []; enemies = []; enemyBullets = []; particles = []; boss = null;
    const rows = ENEMY_ROWS[stage - 1], cols = ENEMY_COLS[stage - 1];
    const ew = 40, eh = 30, ep = 15;
    for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) {
        let x = c * (ew + ep) + 50, y = r * (eh + ep) + 50, color = `hsl(${r * 30}, 70%, 50%)`;
        enemies.push(new Enemy(x, y, ew, eh, color, (r + 1) * 10));
    }}
    enemySpeed = 0.5 + (stage - 1) * 0.3;
    console.log(`ステージ${stage}の準備が完了しました。`);
}

function nextStage() {
    stage++;
    if (stage > 3) { gameState = 'gameClear'; }
    else { gameState = 'stageClear'; setTimeout(() => { setupStage(); gameState = 'playing'; }, 3000); }
}

// ===============================================
// 5. 更新処理 (Update)
// ===============================================
function update() {
    if (gameState === 'paused') return;
    particles.forEach((p, i) => { p.update(); if (p.life <= 0) particles.splice(i, 1); });
    if (gameState === 'playerExploding') return;
    if (gameState !== 'playing' && gameState !== 'boss') return;
    
    player.update();
    playerBullets.forEach((b, i) => { b.update(); if (b.y < 0) playerBullets.splice(i, 1); });
    enemyBullets.forEach((b, i) => { b.update(); if (b.y > canvas.height) enemyBullets.splice(i, 1); });
    
    if (gameState === 'playing') updateEnemies(); else if (gameState === 'boss') updateBoss();
    handleCollisions();
    if (score >= scoreForNextLife) { lives++; scoreForNextLife += 5000; }
}

function updateEnemies() {
    enemyMoveDown = false;
    for (const e of enemies) { if ((e.x <= 0 && enemyDirection === -1) || (e.x + e.width >= canvas.width && enemyDirection === 1)) {
        enemyDirection *= -1; enemyMoveDown = true; break;
    }}
    enemies.forEach(e => { if (enemyMoveDown) e.y += 20; e.x += enemySpeed * enemyDirection; });
    if (Date.now() - lastEnemyShootTime > ENEMY_SHOOT_INTERVAL[stage - 1] && enemies.length > 0) {
        const se = enemies[Math.floor(Math.random() * enemies.length)];
        enemyBullets.push(new Bullet(se.x + se.width / 2, se.y + se.height, 5, 10, '#FF4136', 5));
        lastEnemyShootTime = Date.now();
    }
    if (enemies.length === 0) { gameState = 'boss'; boss = new Boss(stage); }
}

function updateBoss() { if (boss) boss.update(); }

// ===============================================
// 6. 当たり判定と被弾処理
// ===============================================
function handleCollisions() {
    // 自機の弾 vs 敵
    if (gameState === 'playing') {
        for (let bIndex = playerBullets.length - 1; bIndex >= 0; bIndex--) {
            for (let eIndex = enemies.length - 1; eIndex >= 0; eIndex--) {
                const bullet = playerBullets[bIndex], enemy = enemies[eIndex];
                if (bullet && enemy && isColliding(bullet, enemy)) {
                    particles.push(...createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.color, 10));
                    score += enemy.scoreValue;
                    playerBullets.splice(bIndex, 1); enemies.splice(eIndex, 1);
                    enemySpeed += 0.05; break;
                }
            }
        }
    }
    // 自機の弾 vs ボス
    if (gameState === 'boss' && boss) {
        for (let bIndex = playerBullets.length - 1; bIndex >= 0; bIndex--) {
            const bullet = playerBullets[bIndex];
            if (bullet && isColliding(bullet, boss)) {
                particles.push(...createExplosion(bullet.x, bullet.y, boss.color, 5));
                playerBullets.splice(bIndex, 1); boss.health -= 10; score += 20;
                if (boss.health <= 0) {
                    particles.push(...createExplosion(boss.x + boss.width / 2, boss.y + boss.height / 2, boss.color, 200));
                    score += stage * 1000; boss = null; nextStage();
                } break;
            }
        }
    }
    // 敵の弾 vs 自機
    for (let i = enemyBullets.length - 1; i >= 0; i--) {
        if (enemyBullets[i] && player && isColliding(enemyBullets[i], player)) {
            enemyBullets.splice(i, 1); playerHit(); return;
        }
    }
    // 敵 vs 自機
    if (gameState === 'playing') {
        for (let i = enemies.length - 1; i >= 0; i--) {
            if (enemies[i] && player && isColliding(enemies[i], player)) {
                playerHit(); return;
            }
        }
    }
}

function isColliding(r1, r2) {
    if (!r1 || !r2) return false;
    return r1.x < r2.x + r2.width && r1.x + r1.width > r2.x && r1.y < r2.y + r2.height && r1.y + r1.height > r2.y;
}

function playerHit() {
    if (gameState === 'playerExploding') return; 
    lives--;
    particles.push(...createExplosion(player.x + player.width / 2, player.y + player.height / 2, '#4CAF50', 50));
    if (lives <= 0) { gameState = 'gameOver'; }
    else {
        const currentGameState = gameState;
        gameState = 'playerExploding';
        setTimeout(() => { player.x = canvas.width / 2 - player.width / 2; player.y = canvas.height - player.height - 20; gameState = currentGameState; }, 2000);
    }
}

function createExplosion(x, y, color, count) {
    const explosionParticles = [];
    for (let i = 0; i < count; i++) { explosionParticles.push(new Particle(x, y, color)); }
    return explosionParticles;
}

// ===============================================
// 7. 描画処理 (Draw)
// ===============================================
function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const isPlaying = gameState === 'playing' || gameState === 'boss';
    const showPlayer = isPlaying || gameState === 'stageClear';

    if (showPlayer && player) player.draw();
    if (isPlaying || gameState === 'paused' || gameState === 'stageClear') {
        if(playerBullets) playerBullets.forEach(b => b.draw()); 
        if(enemies) enemies.forEach(e => e.draw());
        if(enemyBullets) enemyBullets.forEach(b => b.draw()); 
        if (boss) boss.draw();
    }
    if(particles) particles.forEach(p => p.draw());
    drawUI();

    if (gameState === 'start') drawMessage("スペースデストロイヤー", "クリックまたはキーを押して開始");
    else if (gameState === 'gameOver') drawMessage("ゲームオーバー", `最終スコア: ${score}`, "クリックまたはキーで Restart");
    else if (gameState === 'gameClear') drawMessage("ゲームクリア！", `おめでとう！最終スコア: ${score}`, "クリックで最初からプレイ");
    else if (gameState === 'stageClear') drawMessage(`ステージ ${stage-1} クリア！`, `ステージ ${stage} へ...`);
    else if (gameState === 'paused') {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
        drawMessage("PAUSED", "Press ESC to Resume");
    }
}

function drawUI() {
    ctx.fillStyle = '#fff'; ctx.font = '20px Arial';
    ctx.textAlign = 'left'; ctx.fillText(`スコア: ${score}`, 10, 30);
    ctx.fillText(`ステージ: ${stage}`, canvas.width / 2 - 50, 30);
    ctx.textAlign = 'right'; ctx.fillText(`残機: ${lives}`, canvas.width - 10, 30);
}

function drawMessage(mainText, subText, subText2 = "") {
    ctx.fillStyle = '#fff'; ctx.textAlign = 'center';
    ctx.font = '50px Arial'; ctx.fillText(mainText, canvas.width / 2, canvas.height / 2 - 40);
    if (subText) { ctx.font = '24px Arial'; ctx.fillText(subText, canvas.width / 2, canvas.height / 2 + 20); }
    if (subText2) { ctx.font = '20px Arial'; ctx.fillText(subText2, canvas.width / 2, canvas.height / 2 + 70); }
}

// ===============================================
// 8. メインループ
// ===============================================
function gameLoop() {
    try {
        update(); 
        draw(); 
    } catch (error) {
        console.error("ゲームループでエラーが発生しました:", error);
    }
    requestAnimationFrame(gameLoop);
}

// ===============================================
// 9. イベントリスナー
// ===============================================
document.addEventListener('keydown', (e) => {
    console.log(`キーが押されました: ${e.key}, 現在のゲーム状態: ${gameState}`);
    if (e.key === 'Escape') {
        if (gameState === 'playing' || gameState === 'boss') { 
            previousGameState = gameState; 
            gameState = 'paused';
            console.log("ゲームを一時停止しました。");
        }
        else if (gameState === 'paused') { 
            gameState = previousGameState;
            console.log("ゲームを再開しました。");
        }
        return;
    }
    keys[e.key] = true;
    if (gameState === 'start' || gameState === 'gameOver' || gameState === 'gameClear') {
        init();
    }
});
document.addEventListener('keyup', (e) => { keys[e.key] = false; });
canvas.addEventListener('click', () => {
    console.log(`キャンバスがクリックされました。現在のゲーム状態: ${gameState}`);
    if (gameState === 'start' || gameState === 'gameOver' || gameState === 'gameClear') {
        init();
    }
});

// ===============================================
// 10. ゲーム開始
// ===============================================
console.log("ゲームループを開始します。");
gameLoop();

</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7855061578893179"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-gw-3+1f-3d+2z"
     data-ad-client="ca-pub-7855061578893179"
     data-ad-slot="8574377639"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LLZX3KXMVF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LLZX3KXMVF');
</script>
</body>
</html>