AI game creator

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

No:13503

115

←

Prev Next

→

弾幕避ける。
Developer User4966｜Date and time 23/8/28 19:12:54
Build time 19.235 sec｜Game capacity 2.846KB｜

Script

了解です。以下のようにJavaScriptを含んだ1枚のHTMLファイルで実装した弾幕避けゲームをご提案します。

このプログラムは、画面に表示される赤い円がプレイヤーを表し、黒い円が弾を表しています。ゲームはスマホ上で操作を行い、画面上部から弾が降ってくるので、プレイヤーを動かして弾を避けるというものです。弾に当たると「ゲームオーバー」というアラートが表示されます。なお、上記のプログラムは一例であり、あくまで参考としてご活用ください。必要に応じてカスタマイズや改良を行ってください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下のようにJavaScriptを含んだ1枚のHTMLファイルで実装した弾幕避けゲームをご提案します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>弾幕避けゲーム</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      
      #player {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: red;
        border-radius: 50%;
      }
      
      .bullet {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: black;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>

body.addEventListener("touchmove", function(event) {
        player.style.left = event.touches[0].pageX - 20 + "px";
        player.style.top = event.touches[0].pageY - 20 + "px";
      });

function createBullet() {
        const bullet = document.createElement("div");
        bullet.className = "bullet";
        bullet.style.left = Math.random() * (window.innerWidth - 10) + "px";
        bullet.style.top = "-10px";
        body.appendChild(bullet);
        bullets.push(bullet);
      }

setInterval(createBullet, 1000);

function moveBullets() {
        for (let i = 0; i < bullets.length; i++) {
          const bullet = bullets[i];
          bullet.style.top = parseInt(bullet.style.top, 10) + 2 + "px";
          if (parseInt(bullet.style.top, 10) > window.innerHeight) {
            bullet.parentNode.removeChild(bullet);
            bullets.splice(i, 1);
            i--;
          }

const bulletRect = bullet.getBoundingClientRect();
          const playerRect = player.getBoundingClientRect();

if (
            bulletRect.top < playerRect.bottom &&
            bulletRect.bottom > playerRect.top &&
            bulletRect.left < playerRect.right &&
            bulletRect.right > playerRect.left
          ) {
            alert("ゲームオーバー");
          }
        }
      }

setInterval(moveBullets, 10);
    </script>
  </body>
</html>
```

このプログラムは、画面に表示される赤い円がプレイヤーを表し、黒い円が弾を表しています。ゲームはスマホ上で操作を行い、画面上部から弾が降ってくるので、プレイヤーを動かして弾を避けるというものです。弾に当たると「ゲームオーバー」というアラートが表示されます。

なお、上記のプログラムは一例であり、あくまで参考としてご活用ください。必要に応じてカスタマイズや改良を行ってください。