AI game creator

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

No:3144

5843

←

Prev Next

→

Solar System
Developer anonymous｜Date and time 70/1/1 10:18:35
Build time unknown sec｜Game capacity 4.715KB｜

Script

を旅するスペースシューティングゲーム！

←

Prev　Next

→ 　

Back　

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

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

を旅するスペースシューティングゲーム！

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>太陽系スペースシューティングゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: black;
    }

canvas {
      display: block;
      margin: auto;
    }
  </style>
</head>

<body>
  <canvas id="game"></canvas>
  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// スペースシップを定義するクラス
    class Spaceship {
      constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }

shoot() {
        // レーザーを発射する処理をここに記述する
      }
    }

// 太陽系の惑星たちを定義するクラス
    class Planet {
      constructor(x, y, radius, color, velocity) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.velocity = velocity;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }

update() {
        // 惑星を動かす処理をここに記述する
        this.x += this.velocity.x;
        this.y += this.velocity.y;
      }
    }

// ボスキャラクターを定義するクラス
    class Boss {
      constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.health = 100;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }

update() {
        // ボスを動かす処理をここに記述する
      }

hit() {
        this.health -= 10;
        // ダメージを受けたときの処理をここに記述する
      }
    }

// ゲームの処理を行う関数
    function game() {
      // ゲームに必要な変数の初期化
      const spaceship = new Spaceship(canvas.width / 2, canvas.height - 50, 20, 'white');
      const planets = [];
      const boss = new Boss(canvas.width / 2, 50, 40, 'red');
      let score = 0;
      let life = 3;

// 惑星を追加する関数
      function addPlanet() {
        const x = Math.random() * canvas.width;
        const y = -50;
        const radius = 20;
        const color = 'orange';
        const velocity = {
          x: 0,
          y: 5
        }
        planets.push(new Planet(x, y, radius, color, velocity));
      }

// ゲームのループ処理
      function loop() {
        // 背景の描画
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// スペースシップの描画
        spaceship.draw();

// 惑星を描画し、動かす
        planets.forEach((planet, index) => {
          planet.draw();
          planet.update();

// 衝突判定
          const distance = Math.hypot(spaceship.x - planet.x, spaceship.y - planet.y);
          if (distance < spaceship.radius + planet.radius) {
            planets.splice(index, 1);
            life--;
            // ダメージを受けたときの処理をここに記述する
          }
        });

// ボスキャラクターを描画し、動かす
        boss.draw();
        boss.update();

// ゲームオーバー時の処理をここに記述する
        if (life <= 0) {
          alert('ゲームオーバー');
          location.reload();
        }

// スコアの表示
        ctx.fillStyle = 'white';
        ctx.font = '24px sans-serif';
        ctx.fillText(`Score: ${score}`, 20, 40);

// 残機の表示
        ctx.fillStyle = 'green';
        for (let i = 0; i < life; i++) {
          ctx.beginPath();
          ctx.arc(canvas.width - 30 - i * 40, 30, 10, 0, Math.PI * 2, false);
          ctx.fill();
        }

// 定期的に惑星を追加する
        if (Math.random() < 0.05) {
          addPlanet();
        }

// ゲームループ関数を再帰呼び出しする
        requestAnimationFrame(loop);
      }

// ゲームループ関数を最初に呼び出す
      loop();
    }

game();
  </script>
</body>

</html>