<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>パソコン・シューティングゲーム</title>
    <style>
        body { text-align: center; background: #222; color: white; font-family: sans-serif; }
        canvas { background: black; display: block; margin: 10px auto; border: 2px solid white; }
    </style>
</head>
<body>

    <h2>🚀 パソコン・シューティング 🚀</h2>
    <p>【操作方法】「←」「→」キーで移動 ／ 「スペースキー」でビーム発射！</p>
    
    <canvas id="gameCanvas" width="400" height="500"></canvas>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        // 1. ゲームのデータ
        let playerX = 180; // プレイヤーの横の位置
        let laserY = -20;  // レーザーの縦の位置
        let laserX = 0;    // レーザーの横の位置
        let enemyX = Math.random() * 360; // 敵の横の位置
        let enemyY = 0;    // 敵の縦の位置
        let score = 0;     // 点数

        // キーボードが押されているか記録する部屋
        let leftPressed = false;
        let rightPressed = false;

        // 2. キーボードを押したときのセンサー
        document.addEventListener("keydown", function(e) {
            if (e.key === "ArrowLeft")  leftPressed = true;  // 左矢印
            if (e.key === "ArrowRight") rightPressed = true; // 右矢印
            
            // スペースキーが押されて、しかもレーザーが画面にないとき発射！
            if (e.key === " " && laserY < 0) {
                laserX = playerX + 15;
                laserY = 460;
            }
        });

        // キーボードを離したときのセンサー
        document.addEventListener("keyup", function(e) {
            if (e.key === "ArrowLeft")  leftPressed = false;
            if (e.key === "ArrowRight") rightPressed = false;
        });

        // 3. ゲームを動かし続けるメインの仕組み
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 画面を消す

            // プレイヤー🚀の移動チェック
            if (leftPressed && playerX > 0) playerX -= 5;       // 左に動く
            if (rightPressed && playerX < 360) playerX += 5;   // 右に動く

            // 敵👾を下に動かす
            enemyY += 3;
            ctx.font = "30px sans-serif";
            ctx.fillText("👾", enemyX, enemyY);

            // 敵が一番下まで行ったらリセット
            if (enemyY > 500) {
                enemyY = 0;
                enemyX = Math.random() * 360;
            }

            // レーザー🔥を上に動かす
            if (laserY >= 0) {
                laserY -= 10;
                ctx.fillText("🔥", laserX, laserY);
            }

            // 自分の飛行機🚀を描く
            ctx.fillText("🚀", playerX, 490);

            // 4. 当たり判定（ドカン！）
            if (Math.abs(laserX - enemyX) < 30 && Math.abs(laserY - enemyY) < 30) {
                score += 10;
                enemyY = 0;
                enemyX = Math.random() * 360;
                laserY = -20;
            }

            // 点数の表示
            ctx.fillStyle = "white";
            ctx.font = "20px sans-serif";
            ctx.fillText("スコア: " + score, 10, 30);

            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>
</html>

Embed on website

To embed this project on your website, copy the following code and paste it into your website's HTML: