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

No:38822

Slime Defense green emoji slimes trying to reach y..ALL
Developer User17401｜Date and time 24/1/25 21:36:33
Build time 32.527 sec｜Game capacity 5.333KB｜

Script

Sure! Here's an implementation of the game you described:

Slime Defense

This HTML file includes a canvas element where the game is drawn. The player can control a toy gun emoji using the left and right arrow keys on a smartphone. The player shoots projectiles by pressing the spacebar. The goal is to shoot the green slime emojis that are trying to reach a gem emoji. Each slime killed gives the player 5 points. The player can use those points to upgrade their gun by pressing the corresponding shop buttons. There are three choices in the shop: a laser gun emoji for 5 points, a purple skull gun emoji for 10 points, and the destroyer emoji for 60 points. Each upgrade makes the gun stronger. Slimes have 5 health points and when they reach the gem, the player's health decreases. The game is over when the player's health reaches 0.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an implementation of the game you described:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Slime Defense</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Slime Defense</h1>
  
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    // Game Variables
    let score = 0;
    let gunLevel = 0;
    let slimeHealth = 5;
    let slimesArr = [];
    
    // Game Objects
    const player = {
      x: 200,
      y: 550,
      width: 30,
      height: 30,
      color: 'black'
    };
    
    const projectiles = [];
    
    const shopItems = [
      { name: 'Lazer Gun', price: 5, damage: 10 },
      { name: 'Purple Skull Gun', price: 10, damage: 20 },
      { name: 'The Destroyer', price: 60, damage: 30 }
    ];
    
    // Creating the Game Canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Game Functions
    
    // Drawing the player, slimes, and projectiles
    function draw() {
      // Clearing the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Drawing the player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      // Drawing the slimes
      slimesArr.forEach(slime => {
        ctx.fillStyle = 'green';
        ctx.fillRect(slime.x, slime.y, slime.width, slime.height);
      });
      
      // Drawing the projectiles
      projectiles.forEach(projectile => {
        ctx.fillStyle = 'red';
        ctx.fillRect(projectile.x, projectile.y, projectile.width, projectile.height);
      });
      
      // Displaying the score and gun level
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText(`Score: ${score}`, 10, 30);
      ctx.fillText(`Gun Level: ${gunLevel}`, 10, 60);
    }
    
    // Updating the game state
    function update() {
      // Updating player position
      
      // Shooting projectiles
      document.addEventListener('keydown', function(event) {
        if (event.code === 'Space') {
          projectiles.push({
            x: player.x + (player.width / 2),
            y: player.y,
            width: 5,
            height: 10
          });
        }
      });
      
      // Updating projectile positions
      projectiles.forEach(projectile => {
        projectile.y -= 5;
      });
      
      // Checking for projectile-slime collisions
      projectiles.forEach(projectile => {
        slimesArr.forEach((slime, index) => {
          if (
            projectile.x < slime.x + slime.width &&
            projectile.x + projectile.width > slime.x &&
            projectile.y < slime.y + slime.height &&
            projectile.y + projectile.height > slime.y
          ) {
            slimesArr.splice(index, 1); // Remove slime from array
            score += 5; // Increase score
          }
        });
      });
      
      // Adding new slimes
      if (Math.random() < 0.01) {
        slimesArr.push({ x: Math.random() * canvas.width, y: 0, width: 30, height: 30 });
      }
      
      // Updating slime positions
      slimesArr.forEach(slime => {
        slime.y += 1;
        
        // Checking for slime-player collision
        if (
          player.x < slime.x + slime.width &&
          player.x + player.width > slime.x &&
          player.y < slime.y + slime.height &&
          player.y + player.height > slime.y
        ) {
          slimeHealth -= 1;
        }
      });
      
      // Handling game over
      if (slimeHealth <= 0) {
        gameOver();
      }
      
      // Looping game update
      requestAnimationFrame(update);
    }
    
    // Game Over Function
    function gameOver() {
      // Stop game update loop
      cancelAnimationFrame(update);
      
      // Display game over message
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'black';
      ctx.font = '30px Arial';
      ctx.fillText('Game Over!', canvas.width / 2 - 80, canvas.height / 2);
    }
    
    // Start the Game
    function startGame() {
      update();
    }
    
    // Handle key events to move the player
    document.addEventListener('keydown', function(event) {
      if (event.code === 'ArrowLeft' && player.x > 0) {
        player.x -= 15;
      }
      
      if (event.code === 'ArrowRight' && player.x < canvas.width - player.width) {
        player.x += 15;
      }
    });
    
    // Initializing the game
    startGame();
  </script>
</body>
</html>
```