Jumping on a trampoline's game | AI game creator

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

No:1436

158

Jumping on a trampoline
Developer User3307｜Date and time 23/6/18 15:58:26
Build time 34.538 sec｜Game capacity 3.537KB｜

するゲームを作ります。スマホで遊べるように、画面タップでジャンプ操作を行います。トランポリンの上をジャンプしながら、空から落ちてくるキャンディーを取ります。以下がプログラムの内容です。

このプログラムでは、トランポリンの上に赤いプレイヤーを表示しています。画面をタップすると、プレイヤーがジャンプしてトランポリンから跳ねます。また、空から落ちてくるキャンディーを表示して、プレイヤーがそれらを取るとスコアが加算されます。スコアはブラウザのコンソールに表示されます。スマホでも遊べるように、タップイベントを利用してジャンプ操作を行っています。また、CSSアニメーションを利用して、キャンディーを落下させています。スマホの画面サイズに合わせて、トランポリンとプレイヤーの表示位置を調整しています。絵文字を多めに使い、ゲームをより楽しく遊べるようにしています。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

するゲームを作ります。スマホで遊べるように、画面タップでジャンプ操作を行います。トランポリンの上をジャンプしながら、空から落ちてくるキャンディーを取ります。

以下がプログラムの内容です。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>トランポリンゲーム</title>
    <style>
      #trampoline {
        overflow: hidden;
        height: 100vh;
        background-color: skyblue;
      }
      #player {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .candy {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: yellow;
        position: absolute;
        top: -30px;
      }
      .falling {
        animation: fall 2s linear infinite;
      }
      @keyframes fall {
        0% {
          top: -30px;
        }
        100% {
          top: 100vh;
        }
      }
    </style>
  </head>
  <body>
    <div id="trampoline">
      <div id="player"></div>
    </div>
    <script>
      let trampoline = document.getElementById("trampoline");
      let player = document.getElementById("player");
      let score = 0;

trampoline.addEventListener("click", function() {
        player.style.bottom = "100px";
        setTimeout(function() {
          player.style.bottom = "0";
        }, 500);
      });

setInterval(function() {
        let candy = document.createElement("div");
        candy.classList.add("candy");
        candy.style.left = Math.random()*90 + "%";
        trampoline.appendChild(candy);
        setTimeout(function() {
          if (candy.parentNode === trampoline) {
            trampoline.removeChild(candy);
          }
        }, 2000);
      }, 1000);

setInterval(function() {
        let candies = document.getElementsByClassName("candy");
        for (let i = 0; i < candies.length; i++) {
          let candy = candies[i];
          if (isColliding(player, candy)) {
            trampoline.removeChild(candy);
            score += 10;
            console.log("スコア: " + score);
          }
        }
      }, 100);

function isColliding(a, b) {
        let aRect = a.getBoundingClientRect();
        let bRect = b.getBoundingClientRect();
        return !(
          (aRect.bottom < bRect.top) ||
          (aRect.top > bRect.bottom) ||
          (aRect.right < bRect.left) ||
          (aRect.left > bRect.right)
        );
      }
    </script>
  </body>
</html>
```

このプログラムでは、トランポリンの上に赤いプレイヤーを表示しています。画面をタップすると、プレイヤーがジャンプしてトランポリンから跳ねます。また、空から落ちてくるキャンディーを表示して、プレイヤーがそれらを取るとスコアが加算されます。スコアはブラウザのコンソールに表示されます。

スマホでも遊べるように、タップイベントを利用してジャンプ操作を行っています。また、CSSアニメーションを利用して、キャンディーを落下させています。スマホの画面サイズに合わせて、トランポリンとプレイヤーの表示位置を調整しています。

絵文字を多めに使い、ゲームをより楽しく遊べるようにしています。