Shooting Games Steampunk's game

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

No:10743

←

Prev Next

→

Shooting Games Steampunk
Developer User4625｜Date and time 23/8/2 19:18:57
Build time 41.046 sec｜Game capacity 4.68KB｜

Script

了解です。以下に、HTMLファイルとJavaScriptを含んだシューティングゲーム「スチームパンク」の実装例を示します。

このプログラムは、スチームパンクをテーマにしたシューティングゲームです。プレイヤーは左右の矢印キーで移動し、スペースキーで弾を発射します。敵の位置と速度はランダムで変化し、敵と弾が衝突した時に得点が加算されます。敵が画面の下端に達するとゲームオーバーとなります。絵文字などの具体的なデザインは省略していますので、必要に応じてスタイルシートをカスタマイズしてください。このプログラムは、スマホでも操作可能です。スマホのブラウザで HTML ファイルを開くことでゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、HTMLファイルとJavaScriptを含んだシューティングゲーム「スチームパンク」の実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>スチームパンク</title>
  <style>
    #game-container {
      position: relative;
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin: 50px auto;
      overflow: hidden;
    }
    #player {
      position: absolute;
      bottom: 0;
      width: 40px;
      height: 40px;
      background-color: blue;
    }
    .bullet {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
    }
    .enemy {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>

// プレイヤーの初期位置
      var playerX = gameContainer.offsetWidth / 2;
      player.style.left = (playerX - player.offsetWidth / 2) + "px";

// 弾の初期位置
      var bulletX = playerX;
      var bulletY = gameContainer.offsetHeight - player.offsetHeight;
      var bullet = null;

// 敵の初期位置と速度
      var enemyX = Math.random() * (gameContainer.offsetWidth - player.offsetWidth);
      var enemyY = 0;
      var enemySpeed = 3;
      var enemyInterval = null;

// ゲームループの開始
      function startGame() {
        enemyInterval = setInterval(updateGame, 10);
      }

// ゲームループの停止
      function stopGame() {
        clearInterval(enemyInterval);
      }

// ゲームの更新処理
      function updateGame() {
        enemyY += enemySpeed;
        playerX += movement;
        player.style.left = (playerX - player.offsetWidth / 2) + "px";
        if (bullet) {
          bulletY -= 5;
          bullet.style.top = bulletY + "px";
          if (bulletY <= 0) {
            bullet.parentNode.removeChild(bullet);
            bullet = null;
          }
        }
        if (enemyY >= gameContainer.offsetHeight) {
          endGame();
        } else {
          checkCollision();
        }
      }

// 衝突判定の処理
      function checkCollision() {
        if (bullet && Math.abs(bulletX - enemyX) < 20 && Math.abs(bulletY - enemyY) < 20) {
          gameContainer.removeChild(bullet);
          gameContainer.removeChild(enemy);
          bullet = null;
          enemyInterval = setInterval(updateGame, 10);
        }
      }

// ゲーム終了処理
      function endGame() {
        stopGame();
        alert("ゲームオーバー");
      }

// プレイヤーの移動処理
      var movement = 0;
      window.addEventListener("keydown", function(event) {
        switch (event.key) {
          case "ArrowLeft":
            movement = -3;
            break;
          case "ArrowRight":
            movement = 3;
            break;
          case " ":
            if (!bullet) {
              bullet = document.createElement("div");
              bullet.className = "bullet";
              bulletX = playerX;
              bulletY = gameContainer.offsetHeight - player.offsetHeight;
              bullet.style.left = (bulletX - bullet.offsetWidth / 2) + "px";
              bullet.style.top = bulletY + "px";
              gameContainer.appendChild(bullet);
            }
            break;
        }
      });
      window.addEventListener("keyup", function(event) {
        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
          movement = 0;
        }
      });

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

このプログラムは、スチームパンクをテーマにしたシューティングゲームです。プレイヤーは左右の矢印キーで移動し、スペースキーで弾を発射します。敵の位置と速度はランダムで変化し、敵と弾が衝突した時に得点が加算されます。敵が画面の下端に達するとゲームオーバーとなります。

絵文字などの具体的なデザインは省略していますので、必要に応じてスタイルシートをカスタマイズしてください。このプログラムは、スマホでも操作可能です。スマホのブラウザで HTML ファイルを開くことでゲームをプレイすることができます。