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

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

No:40133

108

←

Prev Next

→

シューティングゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:21:51
Build time 18.384 sec｜Game capacity 5.456KB｜

Script

了解しました。以下に、スマホ操作を前提としたシューティングゲームの実装例を示します。

このプログラムでは、スマホのジャイロセンサーを使ってプレイヤーを操作し、敵を避けながら弾を撃つシューティングゲームが実装されています。プレイヤーは赤色の四角、弾は緑色の矩形、敵は青色の矩形で表示されます。スコアが画面左上に表示され、敵に当たるとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。以下に、スマホ操作を前提としたシューティングゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>シューティングゲーム</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

window.addEventListener('resize', () => {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
          });

this.player = new Player(this.canvas.width / 2, this.canvas.height - 50);

this.spawnEnemy();

this.update();
          this.draw();
        },
        update() {
          if (this.gameOver) return;

this.player.update();

this.bullets.forEach((bullet, index) => {
            bullet.update();

if (bullet.y < 0) {
              this.bullets.splice(index, 1);
            }

this.enemies.forEach((enemy, enemyIndex) => {
              if (
                bullet.x > enemy.x &&
                bullet.x < enemy.x + enemy.width &&
                bullet.y > enemy.y &&
                bullet.y < enemy.y + enemy.height
              ) {
                this.bullets.splice(index, 1);
                this.enemies.splice(enemyIndex, 1);
                this.score++;
              }
            });
          });

this.enemies.forEach((enemy, index) => {
            enemy.update();

if (
              enemy.y + enemy.height > this.canvas.height ||
              (enemy.x > this.player.x && enemy.x < this.player.x + this.player.width &&
              enemy.y + enemy.height > this.player.y && enemy.y < this.player.y + this.player.height)
            ) {
              this.gameOver = true;
              alert('ゲームオーバー');
            }
          });

setTimeout(() => {
            this.update();
          }, 1000/60);
        },
        draw() {
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

this.player.draw();

this.bullets.forEach((bullet) => {
            bullet.draw();
          });

this.enemies.forEach((enemy) => {
            enemy.draw();
          });

this.ctx.font = '24px sans-serif';
          this.ctx.fillText(`スコア: ${this.score}`, 10, 30);

if (!this.gameOver) {
            requestAnimationFrame(() => {
              this.draw();
            });
          }
        },
        spawnEnemy() {
          if (this.gameOver) return;

const enemy = new Enemy(
            Math.random() * (this.canvas.width - 30),
            -30,
            Math.random() * 2 + this.enemySpeed
          );

this.enemies.push(enemy);

setTimeout(() => {
            this.spawnEnemy();
          }, this.enemySpawnInterval);
        }
      };

// プレイヤークラス
      class Player {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.width = 30;
          this.height = 30;
        }
        update() {
          // スマホのジャイロセンサーを使って操作
          window.addEventListener('deviceorientation', (event) => {
            this.x += event.gamma / 10;
            this.y += event.beta / 10;

this.x = Math.min(Math.max(0, this.x), game.canvas.width - this.width);
            this.y = Math.min(Math.max(0, this.y), game.canvas.height - this.height);
          });
        }
        draw() {
          game.ctx.fillStyle = '#FF0000';
          game.ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }

// 弾クラス
      class Bullet {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.width = 5;
          this.height = 10;
        }
        update() {
          this.y -= 10;
        }
        draw() {
          game.ctx.fillStyle = '#00FF00';
          game.ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }

// 敵クラス
      class Enemy {
        constructor(x, y, speed) {
          this.x = x;
          this.y = y;
          this.width = 30;
          this.height = 30;
          this.speed = speed;
        }
        update() {
          this.y += this.speed;
        }
        draw() {
          game.ctx.fillStyle = '#0000FF';
          game.ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }

// ゲームを開始
      game.start();
    </script>
  </body>
</html>
```