Spring beyon-byeon movement's game

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

No:5616

3687

←

Prev Next

→

Spring beyon-byeon movement
Developer User3832｜Date and time 23/6/30 14:09:42
Build time 27.724 sec｜Game capacity 2.51KB｜

Script

了解です。以下に、ばねがビヨンビヨンと動くゲームの実装例を示します。

⚽️

この例では、ばねが画面の上下に跳ねるようになっています。スマホで画面をタップすると、ボールが少し上方向に跳ねます。ボールは絵文字のサッカーボールを使用しています。HTMLファイルとして実装されており、必ず JavaScript のコードは script タグで囲んでいます。以上が、ばねビヨンビヨンの動きを楽しめるゲームの例です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下に、ばねがビヨンビヨンと動くゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ばねビヨンビヨン</title>
  <style>
    #spring {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      width: 100%;
      border: 1px solid black;
    }
    #ball {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: red;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="spring">
    <div id="ball">⚽️</div>
  </div>
  
  <script>
    const springElement = document.getElementById('spring');
    const ballElement = document.getElementById('ball');

let position = 0; // ボールの現在の位置
    let velocity = 0; // ボールの現在の速度
    const gravity = 0.1; // 重力の影響

// メインのゲームループ
    function gameLoop() {
      velocity += gravity; // 重力を加える
      position += velocity; // 速度を位置に加算

// バウンド時の処理
      if (position > springElement.clientHeight - ballElement.clientHeight) {
        position = springElement.clientHeight - ballElement.clientHeight; // ボールの位置を修正
        velocity *= -0.8; // 速度を反転し、減衰させる
      }

// 位置を更新
      ballElement.style.transform = `translateY(${position}px)`;

requestAnimationFrame(gameLoop); // 次のフレームで再度ゲームループを呼び出す
    }

// ゲームを開始する
    function startGame() {
      requestAnimationFrame(gameLoop);
    }

// スマホのタッチ操作に応じて速度を変化させる
    document.addEventListener('touchstart', function() {
      velocity = -3; // タッチした時に少し上方向に速度を与える
    });

// ゲームを開始する
    startGame();
  </script>
</body>
</html>
```