シューティングゲーム's game

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

No:22203

←

Prev Next

→

シューティングゲーム
Developer User10272｜Date and time 23/10/21 14:36:14
Build time 89.148 sec｜Game capacity 5.73KB｜

Script

了解しました。以下にシューティングゲームのプログラム例を示します。

このプログラムは、ブラウザ上で動作するシューティングゲームです。キーボードの矢印キーでキャラクターを操作し、スペースキーで弾を発射することができます。敵キャラクターに弾が当たるとスコアが加算されます。また、敵キャラクターが画面下部に到達するとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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 {
      background-color: black;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// キャラクターのクラス
    class Character {
      constructor(className, left, top) {
        this.elem = document.createElement("div");
        this.elem.className = className;
        this.elem.style.left = `${left}px`;
        this.elem.style.top = `${top}px`;
        gameContainer.appendChild(this.elem);
      }
    
      moveUp() {
        const top = parseInt(this.elem.style.top) - 10;
        if (top >= 0) {
          this.elem.style.top = `${top}px`;
        }
      }
    
      moveDown() {
        const top = parseInt(this.elem.style.top) + 10;
        if (top <= gameContainer.clientHeight - this.elem.clientHeight) {
          this.elem.style.top = `${top}px`;
        }
      }
    
      moveLeft() {
        const left = parseInt(this.elem.style.left) - 10;
        if (left >= 0) {
          this.elem.style.left = `${left}px`;
        }
      }
    
      moveRight() {
        const left = parseInt(this.elem.style.left) + 10;
        if (left <= gameContainer.clientWidth - this.elem.clientWidth) {
          this.elem.style.left = `${left}px`;
        }
      }
    }

// 弾クラス
    class Bullet {
      constructor(left, top) {
        this.elem = document.createElement("div");
        this.elem.className = "bullet";
        this.elem.style.left = `${left}px`;
        this.elem.style.top = `${top}px`;
        gameContainer.appendChild(this.elem);
        bullets.push(this);
      }
    
      move() {
        const top = parseInt(this.elem.style.top) - 5;
        if (top >= 0) {
          this.elem.style.top = `${top}px`;
        } else {
          this.elem.remove();
          bullets.splice(bullets.indexOf(this), 1);
        }
      }
    }

// 敵クラス
    class Enemy {
      constructor() {
        this.elem = document.createElement("div");
        this.elem.className = "enemy";
        this.elem.style.top = "0px";
        this.elem.style.left = `${Math.random() * (gameContainer.clientWidth - 30)}px`;
        gameContainer.appendChild(this.elem);
      }
    
      move() {
        const top = parseInt(this.elem.style.top) + 3;
        if (top <= gameContainer.clientHeight) {
          this.elem.style.top = `${top}px`;
        } else {
          this.elem.remove();
        }
      }
    
      checkCollision() {
        const characterTop = parseInt(character.elem.style.top);
        const characterLeft = parseInt(character.elem.style.left);
        const characterRight = characterLeft + character.elem.clientWidth;
        const enemyTop = parseInt(this.elem.style.top);
        const enemyLeft = parseInt(this.elem.style.left);
        const enemyRight = enemyLeft + this.elem.clientWidth;
    
        if (
          characterTop < enemyTop + this.elem.clientHeight &&
          characterLeft < enemyRight &&
          characterRight > enemyLeft
        ) {
          clearInterval(gameLoop); // ゲーム終了
    
          setTimeout(() => {
            alert("ゲームオーバーです。スコア: " + score);
            location.reload();
          }, 100);
        }
        
        bullets.forEach(bullet => {
          const bulletTop = parseInt(bullet.elem.style.top);
          const bulletLeft = parseInt(bullet.elem.style.left);
          const bulletRight = bulletLeft + bullet.elem.clientWidth;
    
          if (
            bulletTop > enemyTop &&
            bulletLeft < enemyRight &&
            bulletRight > enemyLeft
          ) {
            this.elem.remove();
            bullet.elem.remove();
            bullets.splice(bullets.indexOf(bullet), 1);
            score += 10;
          }
        });
      }
    }

// ゲーム開始
    const character = new Character("character", 0, 0);
    let gameLoop = setInterval(() => {
      const enemySpawnChance = Math.random();
      if (enemySpawnChance < 0.02) {
        new Enemy();
      }
    
      const enemies = document.getElementsByClassName("enemy");
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];
        enemy.move();
        enemy.checkCollision();
      }
    
      bullets.forEach(bullet => bullet.move());
    }, 20);

// キー操作
    document.addEventListener("keydown", e => {
      if (e.key === "ArrowUp") {
        character.moveUp();
      } else if (e.key === "ArrowDown") {
        character.moveDown();
      } else if (e.key === "ArrowLeft") {
        character.moveLeft();
      } else if (e.key === "ArrowRight") {
        character.moveRight();
      } else if (e.key === " ") { // スペースキーで弾を発射
        new Bullet(
          parseInt(character.elem.style.left) + character.elem.clientWidth / 2,
          parseInt(character.elem.style.top)
        );
      }
    });
  </script>
</body>
</html>
```