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

No:7654

199

←

Prev Next

→

ward off (an attack)
Developer o2pi4｜Date and time 23/7/9 8:00:16
Build time 8.378 sec｜Game capacity 1.705KB｜

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>
      #player {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>ジャンプゲーム</h1>
    <p>下の障害物をジャンプして避けよう！</p>
    <div id="player">🐱</div>
    
    <script>
      const player = document.getElementById("player");
      let isJumping = false;
      
      document.addEventListener("keydown", jump);
      
      function jump(event) {
        if (event.keyCode === 32 && !isJumping) {
          isJumping = true;
          let position = 0;
          let timerId = setInterval(function() {
            if (position === 150) {
              clearInterval(timerId);
              let downTimerId = setInterval(function() {
                if (position === 0) {
                  clearInterval(downTimerId);
                  isJumping = false;
                }
                position -= 5;
                player.style.bottom = position + "px";
              }, 20);
            }
            position += 20;
            player.style.bottom = position + "px";
          }, 20);
        }
      }
    </script>
  </body>
</html>
```