Space Invaders with the invincibility star for all devices's game

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

No:17129

144

←

Prev Next

→

Space Invaders with the invincibility star for all..ALL
Developer User7570｜Date and time 23/9/22 9:07:27
Build time 37.6 sec｜Game capacity 4.325KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<html>
<head>
<style>
canvas {
  background-color: #000;
  display: block;
  margin: 0 auto;
  border: 1px solid #fff;
}
</style>
</head>
<body onload="startGame()">
<script>
// Helper function to check collision between two rectangles
function isColliding(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y
  );
}

// Pictograms for the game
const invincibilityStarImageUrl = "https://img.icons8.com/offices/40/000000/star-trek.png";
const playerShipImageUrl = "https://img.icons8.com/office/40/000000/spaceship.png";
const enemyShipImageUrl = "https://img.icons8.com/windows/40/000000/alien.png";

let gameArea, player, invincibilityStar, enemies;

player = {
    width: 40,
    height: 40,
    x: window.innerWidth / 2 - 20,
    y: window.innerHeight - 80,
    dx: 0,
    dy: 0,
    image: new Image(),
    invincible: false,
    update: function() {
      const context = gameArea.context;
      context.drawImage(this.image, this.x, this.y, this.width, this.height);
      if (this.invincible) {
        context.drawImage(
          invincibilityStar.image,
          this.x + this.width / 2,
          this.y - 20,
          20,
          20
        );
      }
    },
    newPos: function() {
      this.x += this.dx;
      this.y += this.dy;
    },
    moveLeft: function() {
      this.dx = -5;
    },
    moveRight: function() {
      this.dx = 5;
    },
    stop: function() {
      this.dx = 0;
    },
  };

invincibilityStar = {
    width: 10,
    height: 10,
    x: Math.random() * (window.innerWidth - 10),
    y: -10,
    image: new Image(),
    update: function() {
      this.y += 2;
      const context = gameArea.context;
      context.drawImage(this.image, this.x, this.y, this.width, this.height);
    },
  };

class Enemy {
    constructor() {
      this.width = 30;
      this.height = 30;
      this.x = Math.random() * (window.innerWidth - 30);
      this.y = -30;
      this.image = new Image();
    }
    update() {
      this.y += 1;
      const context = gameArea.context;
      context.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
  }

enemies = [];

gameArea.start();
}

function updateGameArea() {
  gameArea.clear();
  gameArea.frameNo += 1;

if (gameArea.frameNo === 1 || everyInterval(100)) {
    enemies.push(new Enemy());
  }

player.newPos();
  player.update();

for (let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.update();

if (!player.invincible && isColliding(player, enemy)) {
      gameArea.stop();
      alert("Game Over!");
      return;
    }

if (player.invincible && isColliding(player, enemy)) {
      enemies.splice(i, 1);
      i--;
    }
  }

if (player.invincible) {
    invincibilityStar.update();
  }

if (gameArea.frameNo === 200) {
    player.invincible = true;
    invincibilityStar.x = Math.random() * (window.innerWidth - 10);
  }

if (gameArea.frameNo === 400) {
    player.invincible = false;
    gameArea.frameNo = 0;
  }
}

function everyInterval(n) {
  return gameArea.frameNo % n === 0;
}

// Keyboard event listeners for player movement
document.addEventListener("keydown", function(e) {
  if (e.key === "ArrowLeft") {
    player.moveLeft();
  }
  if (e.key === "ArrowRight") {
    player.moveRight();
  }
});

document.addEventListener("keyup", function(e) {
  if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
    player.stop();
  }
});

// Load images and start the game
player.image.src = playerShipImageUrl;
invincibilityStar.image.src = invincibilityStarImageUrl;
Enemy.prototype.image.src = enemyShipImageUrl;

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