Dodgeball with pictograms's game

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

No:5346

1726

←

Prev Next

→

Dodgeball with pictograms
Developer User3812｜Date and time 23/6/30 0:04:31
Build time 24.409 sec｜Game capacity 2.293KB｜

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: absolute;
      width: 50px;
      height: 50px;
      background: black;
      border-radius: 50%;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
    }
    .ball {
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="player"></div>

// ボールの座標と速度
    let ballX = Math.random() * (window.innerWidth - 30);
    let ballY = 0;
    let ballSpeed = 5;

// プレイヤーの要素を取得
    const player = document.getElementById('player');

// プレイヤーの座標を更新する関数
    function updatePlayerPosition(x) {
      player.style.left = x + 'px';
    }

// ボールの座標を更新する関数
    function updateBallPosition() {
      ballY += ballSpeed;
      if (ballY > window.innerHeight) {
        // ボールが画面外に出た場合は再配置
        ballX = Math.random() * (window.innerWidth - 30);
        ballY = 0;
      }
      const ball = document.createElement("div");
      ball.className = "ball";
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';
      document.body.appendChild(ball);
    }

// プレイヤー操作の処理
    window.addEventListener('deviceorientation', function(event) {
      const newX = playerX + event.gamma;
      if (newX >= 0 && newX <= window.innerWidth - 50) {
        playerX = newX;
        updatePlayerPosition(playerX);
      }
    });

// ゲームループ
    setInterval(function() {
      updateBallPosition();
    }, 16);
  </script>
</body>
</html>
```