Numerous specific rounds fly in, eat's game

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

No:7732

931

←

Prev Next

→

Numerous specific rounds fly in, eat
Developer User3589｜Date and time 23/7/9 16:06:23
Build time 15.487 sec｜Game capacity 3.325KB｜

Script

以下が、特定の丸が無数に飛んでくるゲームをHTMLファイルとして実装したプログラムです。

このプログラムでは、画面上に丸が無数に飛んできます。それぞれの丸をクリックすると、その丸が消えます。新しい丸は一定の間隔で自動的に生成されます。実際にプログラムを実行すると、ブラウザ上でゲームがプレイできます。ただし、このプログラムはスマートフォン操作に対応していないため、PC上でのプレイを想定しています。スマートフォンでプレイする場合は、タップ操作に変更する必要があります。また、絵文字を含めることも可能ですが、絵文字の表示には対応していないブラウザがあるため、互換性に注意する必要があります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

以下が、特定の丸が無数に飛んでくるゲームをHTMLファイルとして実装したプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>丸を食べるゲーム</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    #game-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .circle {
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

// 丸の初期位置と速度の範囲を定義
    const initialPosX = screenWidth / 2;
    const initialPosY = screenHeight / 2;
    const minSpeed = 2;
    const maxSpeed = 5;

// 丸をクリックした時の処理
    const onCircleClick = (event) => {
      const circle = event.target;
      circle.style.display = "none";
    };

// 丸を生成して画面に表示する関数
    const createCircle = () => {
      const circle = document.createElement("div");
      circle.className = "circle";
      circle.style.width = "30px";
      circle.style.height = "30px";
      circle.style.background = "red";
      circle.style.borderRadius = "50%";
      circle.style.top = initialPosY + "px";
      circle.style.left = initialPosX + "px";
      circle.addEventListener("click", onCircleClick);
      document.getElementById("game-container").appendChild(circle);

// 丸の速度をランダムに設定
      const speedX = Math.random() * (maxSpeed - minSpeed) + minSpeed;
      const speedY = Math.random() * (maxSpeed - minSpeed) + minSpeed;

// 一定の間隔で丸の位置を更新して画面上を移動させる
      setInterval(() => {
        const currentX = parseFloat(circle.style.left);
        const currentY = parseFloat(circle.style.top);

// 丸の位置を更新
        const newX = currentX + speedX;
        const newY = currentY + speedY;

// 画面外に出たら丸の位置を初期位置に戻す
        if (newX > screenWidth || newY > screenHeight) {
          circle.style.top = initialPosY + "px";
          circle.style.left = initialPosX + "px";
        } else {
          circle.style.top = newY + "px";
          circle.style.left = newX + "px";
        }
      }, 20);
    };

// 一定の間隔で新しい丸を生成する
    setInterval(createCircle, 1000);
  </script>
</body>
</html>
```

このプログラムでは、画面上に丸が無数に飛んできます。それぞれの丸をクリックすると、その丸が消えます。新しい丸は一定の間隔で自動的に生成されます。

実際にプログラムを実行すると、ブラウザ上でゲームがプレイできます。ただし、このプログラムはスマートフォン操作に対応していないため、PC上でのプレイを想定しています。スマートフォンでプレイする場合は、タップ操作に変更する必要があります。

また、絵文字を含めることも可能ですが、絵文字の表示には対応していないブラウザがあるため、互換性に注意する必要があります。