Space Invaders

がいの部屋

Google Apps Script(GAS)を活用して、HTML・CSS・JavaScriptでスペースインベーダーゲームを作成！初心者でも手軽にGASを利用したWEBゲーム開発を簡単に始めることができるサイトです。

初めに

HTML、CSS、およびJavaScriptでGASを使用してスペースインベーダーゲームを作成しました。

HTML CSS JavaScriptのファイルを準備

HTMLファイル、CSSファイル、JavaScriptファイルをそれぞれindex.html、style.html、java.htmlとして保存してください。

HTML、CSS、JavaScriptのコードはそれぞれ別のファイルに分割保存して、メインのHTMLファイルにインポートします。

GASの作成

コード.gs

function doGet() {
   return HtmlService.createTemplateFromFile('index').evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Invaders</title>
  
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    canvas.width = 800;
    canvas.height = 600;

    const player = {
      x: canvas.width / 2 - 20,
      y: canvas.height - 40,
      width: 40,
      height: 20,
      color: "lime",
      speed: 5,
      bullets: []
    };

    const enemies = [];
    const enemyRows = 3;
    const enemyCols = 8;
    const enemyWidth = 40;
    const enemyHeight = 20;
    const enemyMargin = 10;
    const enemyColor = "red";

    const keys = {
      left: false,
      right: false,
      space: false
    };

    let gameInterval;

    function createEnemies() {
      for (let row = 0; row < enemyRows; row++) {
        for (let col = 0; col < enemyCols; col++) {
          enemies.push({
            x: col * (enemyWidth + enemyMargin) + 50,
            y: row * (enemyHeight + enemyMargin) + 30,
            width: enemyWidth,
            height: enemyHeight,
            color: enemyColor,
            alive: true
          });
        }
      }
    }

    function drawRect(x, y, width, height, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }

    function drawPlayer() {
      drawRect(player.x, player.y, player.width, player.height, player.color);
      player.bullets.forEach((bullet, index) => {
        bullet.y -= 7;
        drawRect(bullet.x, bullet.y, bullet.width, bullet.height, bullet.color);
        if (bullet.y < 0) player.bullets.splice(index, 1);
      });
    }

    function drawEnemies() {
      enemies.forEach((enemy, index) => {
        if (enemy.alive) {
          drawRect(enemy.x, enemy.y, enemy.width, enemy.height, enemy.color);
        } else {
          enemies.splice(index, 1);
        }
      });
    }

    function checkCollisions() {
      player.bullets.forEach((bullet) => {
        enemies.forEach((enemy) => {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.width > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.height > enemy.y &&
            enemy.alive
          ) {
            enemy.alive = false;
            bullet.y = -10; // Remove the bullet
          }
        });
      });
    }

    function movePlayer() {
      if (keys.left && player.x > 0) player.x -= player.speed;
      if (keys.right && player.x < canvas.width - player.width) player.x += player.speed;
    }

    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      movePlayer();
      drawPlayer();
      drawEnemies();
      checkCollisions();
      if (enemies.length === 0) {
        clearInterval(gameInterval);
        alert("You Win!");
      }
    }

    window.addEventListener("keydown", (e) => {
      if (e.key === "ArrowLeft") keys.left = true;
      if (e.key === "ArrowRight") keys.right = true;
      if (e.key === " " && keys.space === false) {
        player.bullets.push({
          x: player.x + player.width / 2 - 2.5,
          y: player.y,
          width: 5,
          height: 10,
          color: "white"
        });
        keys.space = true;
      }
    });

    window.addEventListener("keyup", (e) => {
      if (e.key === "ArrowLeft") keys.left = false;
      if (e.key === "ArrowRight") keys.right = false;
      if (e.key === " ") keys.space = false;
    });

    createEnemies();
    gameInterval = setInterval(gameLoop, 1000 / 60);
  </script>
</body>
</html>

style.html

<style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: black;
    }
    canvas {
      display: block;
      margin: auto;
      background: #111;
    }
  </style>

java.html

 <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    canvas.width = 800;
    canvas.height = 600;

    const player = {
      x: canvas.width / 2 - 20,
      y: canvas.height - 40,
      width: 40,
      height: 20,
      color: "lime",
      speed: 5,
      bullets: []
    };

    const enemies = [];
    const enemyRows = 3;
    const enemyCols = 8;
    const enemyWidth = 40;
    const enemyHeight = 20;
    const enemyMargin = 10;
    const enemyColor = "red";

    const keys = {
      left: false,
      right: false,
      space: false
    };

    let gameInterval;

    function createEnemies() {
      for (let row = 0; row < enemyRows; row++) {
        for (let col = 0; col < enemyCols; col++) {
          enemies.push({
            x: col * (enemyWidth + enemyMargin) + 50,
            y: row * (enemyHeight + enemyMargin) + 30,
            width: enemyWidth,
            height: enemyHeight,
            color: enemyColor,
            alive: true
          });
        }
      }
    }

    function drawRect(x, y, width, height, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }

    function drawPlayer() {
      drawRect(player.x, player.y, player.width, player.height, player.color);
      player.bullets.forEach((bullet, index) => {
        bullet.y -= 7;
        drawRect(bullet.x, bullet.y, bullet.width, bullet.height, bullet.color);
        if (bullet.y < 0) player.bullets.splice(index, 1);
      });
    }

    function drawEnemies() {
      enemies.forEach((enemy, index) => {
        if (enemy.alive) {
          drawRect(enemy.x, enemy.y, enemy.width, enemy.height, enemy.color);
        } else {
          enemies.splice(index, 1);
        }
      });
    }

    function checkCollisions() {
      player.bullets.forEach((bullet) => {
        enemies.forEach((enemy) => {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.width > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.height > enemy.y &&
            enemy.alive
          ) {
            enemy.alive = false;
            bullet.y = -10; // Remove the bullet
          }
        });
      });
    }

    function movePlayer() {
      if (keys.left && player.x > 0) player.x -= player.speed;
      if (keys.right && player.x < canvas.width - player.width) player.x += player.speed;
    }

    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      movePlayer();
      drawPlayer();
      drawEnemies();
      checkCollisions();
      if (enemies.length === 0) {
        clearInterval(gameInterval);
        alert("You Win!");
      }
    }

    window.addEventListener("keydown", (e) => {
      if (e.key === "ArrowLeft") keys.left = true;
      if (e.key === "ArrowRight") keys.right = true;
      if (e.key === " " && keys.space === false) {
        player.bullets.push({
          x: player.x + player.width / 2 - 2.5,
          y: player.y,
          width: 5,
          height: 10,
          color: "white"
        });
        keys.space = true;
      }
    });

    window.addEventListener("keyup", (e) => {
      if (e.key === "ArrowLeft") keys.left = false;
      if (e.key === "ArrowRight") keys.right = false;
      if (e.key === " ") keys.space = false;
    });

    createEnemies();
    gameInterval = setInterval(gameLoop, 1000 / 60);
  </script>

デプロイ

最後にデプロイして動作を確認してみましょう。

タイトルとURLをコピーしました