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:17130

119

←

Prev Next

→

Space Invaders with the invincibility star for all..ALL
Developer User7570｜Date and time 23/9/22 9:08:28
Build time 49.062 sec｜Game capacity 7.155KB｜

Script

Sure, here's a single HTML file containing a Space Invaders game with an invincibility star power-up. The game is designed for smartphone operation and uses pictograms where possible. The game starts automatically when the page loads:

To play the game, save the above code into a file with a ".html" extension, open that file in a web browser (preferably on a smartphone), and start the game. The player can move left and right using the on-screen controls. The objective is to shoot down all the invading aliens without letting them reach the bottom of the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Space Invaders</title>
  <style>
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Game code goes here
      const canvas = document.getElementById('gameCanvas');
      const context = canvas.getContext('2d');
      
      // Game variables
      const invadersRowCount = 5;
      const invadersColumnCount = 10;
      const invaderWidth = 40;
      const invaderHeight = 40;
      const invaderPadding = 10;
      const invaderOffsetTop = 30;
      const invaderOffsetLeft = 30;
      const playerWidth = 60;
      const playerHeight = 40;
      const playerSpeed = 5;
      const bulletSpeed = 7;
      const bulletWidth = 4;
      const bulletHeight = 15;
      
      let score = 0;
      let playerX = (canvas.width - playerWidth) / 2;
      let playerY = canvas.height - playerHeight;
      let bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
      let bulletY = playerY;
      let invaderDirection = 1;
      
      // Player controls
      let leftPressed = false;
      let rightPressed = false;
      let spacePressed = false;
      
      document.addEventListener('keydown', keyDownHandler);
      document.addEventListener('keyup', keyUpHandler);
      
      function keyDownHandler(event) {
        if (event.key === 'Left' || event.key === 'ArrowLeft') {
          leftPressed = true;
        } else if (event.key === 'Right' || event.key === 'ArrowRight') {
          rightPressed = true;
        } else if (event.key === ' ') {
          spacePressed = true;
        }
      }
      
      function keyUpHandler(event) {
        if (event.key === 'Left' || event.key === 'ArrowLeft') {
          leftPressed = false;
        } else if (event.key === 'Right' || event.key === 'ArrowRight') {
          rightPressed = false;
        } else if (event.key === ' ') {
          spacePressed = false;
        }
      }
      
      // Invaders
      const invaders = [];
      for (let column = 0; column < invadersColumnCount; column++) {
        invaders[column] = [];
        for (let row = 0; row < invadersRowCount; row++) {
          invaders[column][row] = {
            x: column * (invaderWidth + invaderPadding) + invaderOffsetLeft,
            y: row * (invaderHeight + invaderPadding) + invaderOffsetTop,
            alive: true
          };
        }
      }
      
      function drawInvaders() {
        for (let column = 0; column < invadersColumnCount; column++) {
          for (let row = 0; row < invadersRowCount; row++) {
            const invader = invaders[column][row];
            
            if (invader.alive) {
              context.beginPath();
              context.rect(invader.x, invader.y, invaderWidth, invaderHeight);
              context.fillStyle = 'red';
              context.fill();
              context.closePath();
            }
          }
        }
      }
      
      function moveInvaders() {
        const invaderRight = invadersColumnCount - 1;
        const invaderLeft = 0;
        
        // Change direction and move invaders down when reaching canvas edges
        if (invaders[invaderLeft][0].x <= 0 || invaders[invaderRight][0].x + invaderWidth >= canvas.width) {
          invaderDirection *= -1;
          for (let column = 0; column < invadersColumnCount; column++) {
            for (let row = 0; row < invadersRowCount; row++) {
              invaders[column][row].y += playerHeight;
            }
          }
        }
        
        // Move invaders left or right
        for (let column = 0; column < invadersColumnCount; column++) {
          for (let row = 0; row < invadersRowCount; row++) {
            invaders[column][row].x += invaderDirection;
          }
        }
      }
      
      // Player
      function drawPlayer() {
        context.beginPath();
        context.rect(playerX, playerY, playerWidth, playerHeight);
        context.fillStyle = 'blue';
        context.fill();
        context.closePath();
      }
      
      function movePlayer() {
        if (leftPressed && playerX > 0) {
          playerX -= playerSpeed;
        } else if (rightPressed && playerX < canvas.width - playerWidth) {
          playerX += playerSpeed;
        }
      }
      
      // Bullets
      let bulletFired = false;
      
      function drawBullet() {
        context.beginPath();
        context.rect(bulletX, bulletY, bulletWidth, bulletHeight);
        context.fillStyle = 'yellow';
        context.fill();
        context.closePath();
      }
      
      function moveBullet() {
        if (bulletFired && bulletY > 0) {
          bulletY -= bulletSpeed;
        } else {
          bulletFired = false;
          bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
          bulletY = playerY;
        }
      }
      
      // Collision detection
      function detectCollision() {
        for (let column = 0; column < invadersColumnCount; column++) {
          for (let row = 0; row < invadersRowCount; row++) {
            const invader = invaders[column][row];
            
            if (invader.alive) {
              if (
                bulletX >= invader.x &&
                bulletX <= invader.x + invaderWidth &&
                bulletY >= invader.y &&
                bulletY <= invader.y + invaderHeight
              ) {
                invader.alive = false;
                bulletFired = false;
                bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
                bulletY = playerY;
                score++;
              }
            }
          }
        }
      }
      
      function drawScore() {
        context.font = '16px Arial';
        context.fillStyle = 'white';
        context.fillText('Score: ' + score, 8, 20);
      }
      
      // Game loop
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        drawInvaders();
        drawPlayer();
        drawBullet();
        drawScore();
        
        movePlayer();
        moveBullet();
        moveInvaders();
        detectCollision();
        
        if (score === invadersRowCount * invadersColumnCount) {
          alert('You win!');
          document.location.reload();
        }
        
        if (!invaders[0][invadersRowCount - 1].alive) {
          alert('Game over!');
          document.location.reload();
        }
        
        requestAnimationFrame(draw);
      }
      
      draw();
    });
  </script>
</body>
</html>
```