【ジャンプでよけろ！】キャラジャンプゲームを作ってみよう！

🎮【ジャンプでよけろ！】キャラジャンプゲームを作ってみよう！
💡 どんなゲーム？
📷 ゲーム画面のイメージ
✏️ 用意するもの
🔧 作り方（かんたん3ステップ）
🎮 あそびかた
🏆 ルール
🧠 こんな力がつくよ！
💬 おわりに

🎮【ジャンプでよけろ！】キャラジャンプゲームを作ってみよう！

こんにちは！今回は、パソコンに入っている「メモ帳」だけで作れる
とっても楽しい【キャラジャンプゲーム】の作り方を紹介します😊

💡 どんなゲーム？

キャラをジャンプさせて、黒いしかく（障害物）をよけるゲーム！
スペースキーでジャンプ！
10回よけられたら「ゲームクリア！」🎉
**「ぶつかるとゲームオーバー！」**という、ドキドキのルール！

📷 ゲーム画面のイメージ

【ジャンプでよけろ！】キャラジャンプゲーム

✏️ 用意するもの

✅ WindowsでもMacでもOK！
✅ メモ帳（またはテキストエディタ）
✅ インターネットなしでOK！（ChromeやEdgeなどのブラウザが必要です）

🔧 作り方（かんたん3ステップ）

① メモ帳をひらこう

デスクトップで右クリック →「新規作成」→「テキストドキュメント」を選びます。
ファイルをダブルクリックして開こう！

② 下のコードをぜんぶコピーしてペーストしよう

キャラジャンプゲーム（HTML）

html

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>ジャンプゲーム</title>

  <style>

    body {

      text-align: center;

      font-family: sans-serif;

      background-color: #f0f8ff;

    }

    #gameArea {

      position: relative;

      width: 600px;

      height: 200px;

      background: #d0f0d0;

      margin: 20px auto;

      border: 3px solid #333;

      overflow: hidden;

    }

    #player {

      position: absolute;

      width: 40px;

      height: 40px;

      background: red;

      bottom: 0;

      left: 50px;

      border-radius: 10px;

    }

    #obstacle {

      position: absolute;

      width: 30px;

      height: 30px;

      background: black;

      bottom: 0;

      left: 600px;

    }

    #info {

      font-size: 16px;

      margin-top: 10px;

    }

    #message {

      font-size: 20px;

      font-weight: bold;

      color: green;

      margin-top: 10px;

    }

  </style>

</head>

<body>

  <h1>ジャンプゲーム</h1>

  <div id="gameArea">

    <div id="player"></div>

    <div id="obstacle"></div>

  </div>

  <div id="info">スペースキーでジャンプ！ Rキーでリセット　10回成功でクリア！</div>

  <div id="message"></div>
  <script>

    const player = document.getElementById("player");

    const obstacle = document.getElementById("obstacle");

    const message = document.getElementById("message");
    let isJumping = false;

    let score = 0;

    let gameOver = false;

    let obstacleInterval;
    function jump() {

      if (isJumping || gameOver) return;

      isJumping = true;

      let height = 0;

      const upInterval = setInterval(() => {

        if (height >= 100) {

          clearInterval(upInterval);

          const downInterval = setInterval(() => {

            if (height <= 0) {

              clearInterval(downInterval);

              isJumping = false;

            }

            height -= 5;

            player.style.bottom = height + "px";

          }, 20);

        }

        height += 5;

        player.style.bottom = height + "px";

      }, 20);

    }
    function moveObstacle() {

      let pos = 600;

      obstacle.style.left = pos + "px";

      obstacleInterval = setInterval(() => {

        if (gameOver) {

          clearInterval(obstacleInterval);

          return;

        }

        pos -= 5;

        obstacle.style.left = pos + "px";
        const playerBottom = parseInt(player.style.bottom) || 0;
        if (pos < 90 && pos > 50 && playerBottom < 40) {

          message.textContent = "ぶつかった！ゲームオーバー";

          gameOver = true;

          clearInterval(obstacleInterval);

          return;

        }
        if (pos < -30) {

          pos = 600;

          if (!gameOver) {

            score++;

            if (score >= 10) {

              message.textContent = "ゲームクリア！おめでとう🎉";

              gameOver = true;

              clearInterval(obstacleInterval);

            }

          }

        }

      }, 30);

    }
    function resetGame() {

      score = 0;

      message.textContent = "";

      gameOver = false;

      player.style.bottom = "0px";

      obstacle.style.left = "600px";

      clearInterval(obstacleInterval);

      moveObstacle();

    }
    document.addEventListener("keydown", (e) => {

      if (e.code === "Space") jump();

      if (e.code === "KeyR") resetGame();

    });