難しいシューティング's game

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

No:16140

←

Prev Next

→

難しいシューティング
Developer User7164｜Date and time 23/9/16 11:40:44
Build time 35.172 sec｜Game capacity 4.234KB｜

Script

さんを作ってみましょう。以下が1枚のHTMLファイルとしての実装例です。

このプログラムでは、シューティングゲームがプレイできます。ゲームボード内でプレイヤーを左右に動かし、タップまたはクリックすると弾を撃つことができます。敵がゲームボード上から降ってくるので、敵を倒しながらできるだけ長く生き残ることが目標です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

さんを作ってみましょう。以下が1枚のHTMLファイルとしての実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>シューティングゲーム</title>
  <style>
    #game-board {
      width: 300px;
      height: 400px;
      background-color: #000;
      position: relative;
      overflow: hidden;
    }

#player {
      width: 50px;
      height: 50px;
      background-color: #00f;
      position: absolute;
      bottom: 0;
      left: calc(50% - 25px);  
    }

.bullet {
      width: 5px;
      height: 5px;
      background-color: #f00;
      position: absolute;
    }

.enemy {
      width: 30px;
      height: 30px;
      background-color: #0f0;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="player"></div>
  </div>
  <script>
    var player = document.getElementById('player');
    var gameBoard = document.getElementById('game-board');
    var bullets = [];
    var enemies = [];
    var score = 0;

function shoot() {
      var bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = player.offsetLeft + player.offsetWidth / 2 - bullet.offsetWidth / 2 + 'px';
      bullet.style.bottom = player.offsetHeight + 'px';
      gameBoard.appendChild(bullet);
      bullets.push(bullet);
    }

function createEnemy() {
      var enemy = document.createElement('div');
      enemy.className = 'enemy';
      enemy.style.left = Math.floor(Math.random() * (gameBoard.offsetWidth - 30)) + 'px';
      enemy.style.top = '-30px';
      gameBoard.appendChild(enemy);
      enemies.push(enemy);
    }

function collisionCheck(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
    }

function gameLoop() {
      moveBullets();
      moveEnemies();
      if (Math.random() < 0.03) {
        createEnemy();
      }
      setTimeout(gameLoop, 20);
    }

gameLoop();

gameBoard.addEventListener('touchmove', movePlayer);
    gameBoard.addEventListener('click', shoot);
  </script>
</body>
</html>
```