JavaScriptで つくる！
りんごキャッチ・ゲーム 🍎

スコアを 表示ひょうじする 場所ばしょ、りんご、プレイヤーを 用意よういしよう。
HTMLの 中なか に 書かいてね。

    <!-- スコアを表示するところ -->
    <div id="score">スコア: 0</div>

    <!-- ゲームのステージ -->
    <div id="stage">
        <!-- 落ちてくるりんご (id="apple") -->
        <div id="apple">🍎</div>
        <!-- 動かすプレイヤー (id="player") -->
        <div id="player">🏃‍♂️</div>
    </div>

プレイヤーを 右向き にして、ステージの 中なかを 自由に 動うごけるようにするよ。
CSS の中なかに 書かいてね。

        body { text-align: center; background-color: #e3f2fd; }

        #stage {
            width: 400px;        /* ステージのよこはば */
            height: 400px;       /* ステージのたかさ */
            background-color: #fff; /* ステージの色(白) */
            margin: 20px auto;   /* ステージをまんなかに置く */
            position: relative;  /* 子要素(キャラ)を自由に置くための基準 */
            overflow: hidden;    /* ステージからはみ出たものは隠す */
            border: 5px solid #333;
        }

        #apple, #player {
            position: absolute;  /* 👈 座標(x, y)で自由に動かせるモード */
            font-size: 40px;
        }

        #player {
            bottom: 10px;        /* 下から10pxのところに固定 */
            /* --- 👇 キャラを右向きにするまほう --- */
            transform: scaleX(-1); /* 左右をはんてんさせる */
        }

りんごを 落おとして、プレイヤーで キャッチしよう！
JS の中なかに 書かいてね。

    let score = 0;      // スコアをいれる変数
    let px = 180;       // プレイヤーの横の位置(x)
    let ax = 200;       // りんごの横の位置(x)
    let ay = 0;         // りんごのたての位置(y)

    // ① りんごを落とすプログラム (0.05秒ごとに動く)
    setInterval(function() {
        ay = ay + 5;    // たての位置を 5 ずつ増やす(落ちる)
        
        // --- 💡 当たり判定のチェック！ ---
        if (ay > 340) { // もし りんごが プレイヤーの高さまで来たら...
            // もし 横の位置(ax)が プレイヤー(px)と 近かったら...
            if (Math.abs(ax - px) < 40) {
                score = score + 1; // キャッチ！スコアをふやす
                document.getElementById("score").innerHTML = "スコア: " + score;
                ay = 0; // りんごを上に戻す
                ax = Math.floor(Math.random() * 350); // 横の位置をランダムに変える
            }
        }

        // りんごが一番下まで行っちゃったら(見逃したら)
        if (ay > 400) {
            ay = 0; // 上に戻す
            ax = Math.floor(Math.random() * 350);
        }

        // りんごの場所を 画面にセットする
        document.getElementById("apple").style.top = ay + "px";
        document.getElementById("apple").style.left = ax + "px";
    }, 50);

    // ② 矢印キーで プレイヤーを動かす
    document.addEventListener("keydown", function(e) {
        if (e.key == "ArrowLeft") { px = px - 20; } // 左へ移動
        if (e.key == "ArrowRight") { px = px + 20; } // 右へ移動
        document.getElementById("player").style.left = px + "px";
    });