インベーダーゲーム's game

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

No:43165

←

Prev Next

→

インベーダーゲーム
Developer User19111｜Date and time 24/2/14 15:52:50
Build time 21.258 sec｜Game capacity 5.806KB｜

Script

以下は絵文字を使用した簡単なインベーダーゲームの実装例です。

👾

このコードでは、プレイヤーが左右に移動できるようになっており、スペースキーで弾を発射することができます。敵のインベーダーは自動で移動し、弾が当たると消えます。スペースキーで10体の敵を全て倒すと勝利となり、敵のインベーダーが自分に迫るとゲームオーバーとなります。ご参考までに、実行して遊ぶためにはブラウザで開く必要があります。

←

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>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #game {
      width: 240px;
      height: 400px;
      background-color: #333;
      position: relative;
    }
    
    .player {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
    }
    
    .bullet {
      position: absolute;
      background-color: yellow;
      width: 4px;
      height: 10px;
    }
    
    .invader {
      position: absolute;
      font-size: 30px;
    }
    
    .invader.dead {
      animation: explode 0.5s linear forwards;
    }
    
    @keyframes explode {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>
  <div id="game">
    <div class="player">👾</div>
  </div>

let gameOver = false;
    let score = 0;

// キーイベントの処理
    function handleKeyEvent(event) {
      if (event.key === 'ArrowLeft') {
        movePlayer(-10);
      } else if (event.key === 'ArrowRight') {
        movePlayer(10);
      } else if (event.key === ' ') {
        shoot();
      }
    }

// プレイヤーの移動
    function movePlayer(distance) {
      const left = player.offsetLeft + distance;
      if (left >= 0 && left <= game.clientWidth - player.clientWidth) {
        player.style.left = left + 'px';
      }
    }

// 弾の発射
    function shoot() {
      const bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = player.offsetLeft + player.clientWidth / 2 - 2 + 'px';
      bullet.style.bottom = '60px';
      game.appendChild(bullet);

bullets.push(bullet);
    }

// 弾の移動
    function moveBullets() {
      for (let i = bullets.length - 1; i >= 0; i--) {
        const bullet = bullets[i];
        const top = bullet.offsetTop - 10;
        bullet.style.top = top + 'px';

if (top <= -bullet.clientHeight) {
          game.removeChild(bullet);
          bullets.splice(i, 1);
        } else {
          checkCollision(bullet);
        }
      }
    }

// 弾と敵の衝突判定
    function checkCollision(bullet) {
      for (let i = invaders.length - 1; i >= 0; i--) {
        const invader = invaders[i];
        if (isColliding(bullet, invader)) {
          invader.style.visibility = 'hidden';
          invader.classList.add('dead');
          invaders.splice(i, 1);

game.removeChild(bullet);
          bullets.splice(bullets.indexOf(bullet), 1);

score++;
          if (score === 10) {
            endGame(true);
          }
          break;
        }
      }
    }

// 衝突判定
    function isColliding(element1, element2) {
      const rect1 = element1.getBoundingClientRect();
      const rect2 = element2.getBoundingClientRect();

return rect1.left < rect2.right &&
             rect1.right > rect2.left &&
             rect1.top < rect2.bottom &&
             rect1.bottom > rect2.top;
    }

// 敵の生成
    function createInvaders() {
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 10; col++) {
          const invader = document.createElement('div');
          invader.className = 'invader';
          invader.innerText = '👾';
          invader.style.top = `${row * 40}px`;
          invader.style.left = `${col * 20}px`;
          game.appendChild(invader);

invaders.push(invader);
        }
      }
    }

// 敵の移動
    function moveInvaders() {
      for (let i = invaders.length - 1; i >= 0; i--) {
        const invader = invaders[i];
        const left = invader.offsetLeft + (Math.random() > 0.5 ? 1 : -1) * 10;
        invader.style.left = left + 'px';

if (left >= game.clientWidth - invader.clientWidth || left <= 0) {
          invader.style.top = `${parseInt(invader.style.top) + 10}px`;
        }

if (parseInt(invader.style.top) >= player.offsetTop) {
          endGame(false);
          break;
        }
      }
    }

// ゲーム終了
    function endGame(win) {
      if (gameOver) return;
      gameOver = true;

clearInterval(invaderInterval);
      clearInterval(moveInterval);
      window.removeEventListener('keydown', handleKeyEvent);

const message = document.createElement('div');
      message.style.color = win ? 'green' : 'red';
      message.style.fontSize = '30px';
      message.innerText = win ? 'You win!' : 'You lose!';
      message.style.position = 'absolute';
      message.style.top = '50%';
      message.style.left = '50%';
      message.style.transform = 'translate(-50%, -50%)';
      game.appendChild(message);
    }

createInvaders();

window.addEventListener('keydown', handleKeyEvent);

const invaderInterval = setInterval(moveInvaders, 500);
    const moveInterval = setInterval(moveBullets, 50);

</script>
</body>
</html>
```

このコードでは、プレイヤーが左右に移動できるようになっており、スペースキーで弾を発射することができます。敵のインベーダーは自動で移動し、弾が当たると消えます。スペースキーで10体の敵を全て倒すと勝利となり、敵のインベーダーが自分に迫るとゲームオーバーとなります。

ご参考までに、実行して遊ぶためにはブラウザで開く必要があります。