AI game creator

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

No:8315

849

←

Prev Next

→

gamma cannon
Developer User4160｜Date and time 23/7/15 0:27:34
Build time 34.017 sec｜Game capacity 3.817KB｜

Script

以下は、スマホで操作可能なシンプルなゲームである「ガンマ砲」の実装例です。

このプログラムは、「ガンマ砲」というゲームで、プレイヤーの操作によって弾を発射し、画面上部まで弾を進めると爆発する仕組みになっています。ゲームが画面上部まで達すると更新されます。このゲームでは、HTMLとJavaScriptを組み合わせて実現しています。また、CSSを使用してゲーム画面のデザインを調整しています。ご参考までにお使いください。

←

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>
    #game-container {
      width: 300px;
      height: 500px;
      background-color: #f1f1f1;
      position: relative;
    }
    #player {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      bottom: 0;
    }
    #bullet {
      width: 10px;
      height: 30px;
      background-color: red;
      position: absolute;
      bottom: 50px;
    }
    #bullet.explosion {
      background-color: yellow;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    <div id="bullet"></div>
  </div>

// ゲームの初期化
    function init() {
      game.container = document.querySelector('#game-container');
      game.player.element = document.querySelector('#player');
      game.player.width = game.player.element.offsetWidth;
      game.player.height = game.player.element.offsetHeight;
      game.bullet.element = document.querySelector('#bullet');
      game.bullet.width = game.bullet.element.offsetWidth;
      game.bullet.height = game.bullet.element.offsetHeight;

game.container.addEventListener('mousemove', movePlayer);
      game.container.addEventListener('click', shootBullet);

game.gameLoop = setInterval(updateGame, 20);
    }

// プレイヤーの移動
    function movePlayer(event) {
      const containerRect = game.container.getBoundingClientRect();
      const x = event.clientX - containerRect.left - (game.player.width / 2);

if (x >= 0 && x <= containerRect.width - game.player.width) {
        game.player.position = x;
        game.player.element.style.left = game.player.position + 'px';
      }
    }

// 弾の発射
    function shootBullet() {
      if (!game.bullet.active && !game.bullet.exploding) {
        game.bullet.active = true;
        game.bullet.position = game.player.position + ((game.player.width - game.bullet.width) / 2);
        game.bullet.element.style.left = game.bullet.position + 'px';
      }
    }

// ゲームの更新
    function updateGame() {
      if (game.bullet.active && !game.bullet.exploding) {
        game.bullet.position -= game.bullet.speed;
        game.bullet.element.style.bottom = game.bullet.position + 'px';

if (game.bullet.position <= game.player.height) {
          game.bullet.active = false;
          game.bullet.exploding = true;
          game.bullet.element.classList.add('explosion');

setTimeout(() => {
            game.bullet.exploding = false;
            game.bullet.element.classList.remove('explosion');
          }, 1000);
        }
      }
    }

// ゲームの開始
    init();
  </script>
</body>
</html>
```

このプログラムは、「ガンマ砲」というゲームで、プレイヤーの操作によって弾を発射し、画面上部まで弾を進めると爆発する仕組みになっています。ゲームが画面上部まで達すると更新されます。

このゲームでは、HTMLとJavaScriptを組み合わせて実現しています。また、CSSを使用してゲーム画面のデザインを調整しています。

ご参考までにお使いください。