クリックゲームの進化 ～続編：新機能＆改善点を解説～

document.addEventListener("DOMContentLoaded", function() {
    const canvas = document.getElementById("click-game-canvas");
    const progressBar = document.getElementById("click-game-progress");
    if (!canvas || !progressBar) return;

    const ctx = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 300;

    let level = 1;
    let defaultClicks = 2; // 初期のクリック回数
    let targetClicks = defaultClicks;
    let addClicks = 2; // 加算するクリック数
    let ClickGameTimeLeft = 10;
    let gameActive = false;
    let timer;
    let remainingClicks;
    let targetX, targetY;
    const targetRadius = 20;

    const today = new Date().toISOString().split('T')[0]; // 今日の日付（YYYY-MM-DD）
    const savedData = JSON.parse(localStorage.getItem("clickGameScores")) || {};

    // ハイスコアをローカルストレージから取得（なければ 0）
    let todayHighScore = savedData[today] || 0;
    let highScore = savedData["highScore"] || 0;

    const targetImages = clickGameData.imageUrls; // PHP から渡された画像URL
    let targetImage = new Image(); // グローバル変数として定義

    function loadRandomTargetImage() {
        targetImage.src = targetImages[Math.min(level - 1, targetImages.length - 1)];
        targetImage.style.left = `${Math.random() * (canvas.width - 48)}px`;
        targetImage.style.top = `${Math.random() * (canvas.height - 48)}px`;
    }

    function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = "black";
        ctx.font = "18px Arial";
        // 現在のレベルを表示
        ctx.fillText("Level: " + level, 200, 40);
        // 残り時間を表示
        ctx.fillText("Time: " + ClickGameTimeLeft, 200, 20);
        // ハイスコアを表示
        ctx.fillText("High Score: " + highScore, 10, 20);
        ctx.fillText("Today High Score: " + todayHighScore, 10, 40);

        if (gameActive) {
            ctx.drawImage(targetImage, targetX - targetRadius, targetY - targetRadius, targetRadius * 2, targetRadius * 2);
        } else {
            // ゲーム開始ボタンを描画
            ctx.fillStyle = "blue";
            ctx.fillRect(90, 120, 120, 40);

            ctx.fillStyle = "white";
            ctx.font = "20px Arial";
            ctx.fillText("START", 120, 147);
        }
    }

    function updateProgressBar() {
        const percentage = Math.max((remainingClicks / targetClicks) * 100, 0);
        progressBar.style.width = percentage + "%";

        // 色を変更
        if (percentage > 66) {
            progressBar.style.backgroundColor = "green"; // 2/3以上 → 緑
        } else if (percentage > 33) {
            progressBar.style.backgroundColor = "yellow"; // 1/3以上 → 黄
        } else {
            progressBar.style.backgroundColor = "red"; // 1/3以下 → 赤
        }
    }

    function moveTarget() {
        targetX = Math.random() * (canvas.width - 2 * targetRadius) + targetRadius;
        targetY = Math.random() * (canvas.height - 2 * targetRadius) + targetRadius;
        loadRandomTargetImage();
    }

    function checkClick(event) {
        if (!gameActive) return;

        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const distance = Math.sqrt((x - targetX) ** 2 + (y - targetY) ** 2);

        if (distance < targetRadius) {
            remainingClicks--;
            updateProgressBar();

            if (remainingClicks <= 0) { levelUp(); return; } moveTarget(); } drawGame(); } function levelUp() { clearInterval(timer); gameActive = false; ctx.fillStyle = "green"; ctx.font = "24px Arial"; ctx.fillText("Level Up!", 100, 150); setTimeout(() => {
            level++;
            targetClicks += addClicks;
            startGame();
        }, 2000);
    }

    function updateHighScore() {
        if (level > todayHighScore) {
            todayHighScore = level;
            savedData[today] = todayHighScore;
        }
        if (level > highScore) {
            highScore = level;
            savedData["highScore"] = highScore;
        }
        localStorage.setItem("clickGameScores", JSON.stringify(savedData));
    }

    function gameOver() {
        clearInterval(timer);
        gameActive = false;

        // ハイスコアを更新
        updateHighScore();

        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        ctx.fillText("Game Over!", 80, 150);
        ctx.fillText("High Score: " + highScore, 80, 180);
        ctx.fillText("Today High Score: " + todayHighScore, 80, 210);

        setTimeout(() => {
            level = 1; // レベルリセット
            targetClicks = defaultClicks;
            ClickGameTimeLeft = 10;
            drawGame();
        }, 3000);
    }

    function startGame() {
        if (gameActive) return; // ゲーム中は開始しない

        clearInterval(timer);
        ClickGameTimeLeft = 10;
        gameActive = true;
        remainingClicks = targetClicks;

        moveTarget();
        updateProgressBar();
        drawGame();

        timer = setInterval(() => {
            if (ClickGameTimeLeft > 0) {
                ClickGameTimeLeft--;
                drawGame();
            } else {
                gameOver();
            }
        }, 1000);
    }

    canvas.addEventListener("click", checkClick);
    // startButton.addEventListener("click", startGame);
    canvas.addEventListener("click", function(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        if (!gameActive && x >= 90 && x <= 210 && y >= 120 && y <= 160) {
            startGame();
        }
    });


    drawGame();
});