Click here for free DL of the app version that can save data.

No:7787

903

←

Prev Next

→

Thats Deneb Altair Vega, you point to it, the Summ..ALL
Developer User3788｜Date and time 23/7/9 21:13:21
Build time 11.26 sec｜Game capacity 2.614KB｜

Script

星座探しゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>星座探しゲーム</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>星座探しゲーム</h1>
    
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Canvas要素を取得
        const canvas = document.getElementById("gameCanvas");

// 描画コンテキストを取得
        const ctx = canvas.getContext("2d");

// 星座の座標と名前のリスト
        const constellations = [
            { name: "デネブ", x: 200, y: 100 },
            { name: "アルタイル", x: 100, y: 300 },
            { name: "ベガ", x: 300, y: 300 }
        ];

// 初期状態では全ての星座が隠れている
        const hiddenConstellations = [...constellations];

// クリックした座標を追跡する変数
        let lastClickedX = null;
        let lastClickedY = null;

// Canvas上でクリックした時の処理
        canvas.addEventListener('click', function(event) {
            const rect = canvas.getBoundingClientRect();
            lastClickedX = event.clientX - rect.left;
            lastClickedY = event.clientY - rect.top;

checkClickedConstellation();
        });

// クリックした座標が星座の座標に近いかどうかをチェックする
        function checkClickedConstellation() {
            hiddenConstellations.forEach(constellation => {
                const distance = Math.sqrt((lastClickedX - constellation.x) ** 2 + (lastClickedY - constellation.y) ** 2);
                if (distance < 20) {
                    alert(`見つけた！ ${constellation.name}`);
                    hiddenConstellations.splice(hiddenConstellations.indexOf(constellation), 1);
                }
            });
        }

// ゲームのメインループ
        function gameLoop() {
            // 画面をクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// 隠れている星座を描画
            hiddenConstellations.forEach(constellation => {
                ctx.fillText("？", constellation.x, constellation.y);
            });

// ゲームループを再帰的に呼び出す
            requestAnimationFrame(gameLoop);
        }

// ゲームを開始
        gameLoop();
    </script>
</body>
</html>