Space Invaders but every second random enemies come's game

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

No:14309

←

Prev Next

→

Space Invaders but every second random enemies com..ALL
Developer unknown｜Date and time 23/8/31 21:28:09
Build time 29.62 sec｜Game capacity 4.051KB｜

Script

Sure! Here's an implementation of Space Invaders using HTML, CSS, and JavaScript, enclosed in script tags within a single HTML file. It simulates a game where new random enemies appear every second. Pictograms are used to represent the game elements:

To play the game, you can copy the above code into a file with a `.html` extension and open it in a web browser on a smartphone. The player can control the character using the left and right arrow keys. Random enemies will appear from the top and move downwards every second. If an enemy collides with the player, the game will end, and the final score will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 2px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  
  <script>
    // Game constants
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    const gameWidth = canvas.width;
    const gameHeight = canvas.height;
    
    // Player variables
    let player = {
      x: gameWidth / 2 - 15,
      y: gameHeight - 40,
      width: 30,
      height: 30
    }; 
    
    // Enemy variables
    let enemies = [];
    const enemySize = 30;
    const enemySpeed = 2;
    
    // Game loop variables
    let gameOver = false;
    let score = 0;
    
    // Event listeners for player movement
    document.addEventListener("keydown", handleKeyPress);
    document.addEventListener("keyup", handleKeyRelease);
    
    // Function to handle player movement
    function handleKeyPress(event) {
      if (event.key === "ArrowLeft") {
        player.isMovingLeft = true;
      } else if (event.key === "ArrowRight") {
        player.isMovingRight = true;
      }
    }
    
    function handleKeyRelease(event) {
      if (event.key === "ArrowLeft") {
        player.isMovingLeft = false;
      } else if (event.key === "ArrowRight") {
        player.isMovingRight = false;
      }
    }
    
    // Function to create new enemies randomly every second
    function createEnemy() {
      const x = Math.random() * (gameWidth - enemySize);
      enemies.push({ x: x, y: 12 });
    }
    
    // Function to update game logic
    function update() {
      if (!gameOver) {
        context.clearRect(0, 0, gameWidth, gameHeight);
        
        // Move and draw the player
        if (player.isMovingLeft && player.x > 0) {
          player.x -= 4;
        } 
        
        if (player.isMovingRight && player.x < gameWidth - player.width) {
          player.x += 4;
        }
        
        context.fillStyle = "#000"; // Player color
        context.fillRect(player.x, player.y, player.width, player.height);
        
        // Move and draw the enemies
        enemies.forEach((enemy, index) => {
          enemy.y += enemySpeed;
          context.fillStyle = "#FF0000"; // Enemy color
          context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
          
          // Check enemy collision with player
          if (enemy.y + enemySize > player.y && enemy.x >= player.x && enemy.x <= player.x + player.width) {
            gameOver = true;
          }
          
          // Check if enemy is outside the game area and remove it from the array
          if (enemy.y > gameHeight) {
            enemies.splice(index, 1);
            score += 10;
          }
        });
        
        // Display score
        context.fillStyle = "#000";
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 30);
      }
      
      if (!gameOver) {
        requestAnimationFrame(update);
      } else {
        // Game over message
        context.fillStyle = "#FF0000";
        context.font = "30px Arial";
        context.fillText("Game Over", gameWidth / 2 - 80, gameHeight / 2);
      }
    }
    
    // Start the game loop
    requestAnimationFrame(update);
    
    // Create new enemy every second
    setInterval(createEnemy, 1000);
  </script>
</body>
</html>
```