2d shooter with red enimies's game

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

No:36871

←

Prev Next

→

2d shooter with red enimies
Developer User16885｜Date and time 24/1/19 1:20:11
Build time 21.641 sec｜Game capacity 4.547KB｜

Script

Sure! Here's a simple implementation of a 2D shooter game with red enemies using JavaScript in a single HTML file as per your requirements:

In this game, you control a blue player character using your mouse. The objective is to shoot the red enemies (represented by red circles) with green bullets (represented by green circles). Each hit on an enemy increases your score by 10. The game runs indefinitely until you close the browser tab. Feel free to modify and enhance the game as per your requirements or add more features to make it more enjoyable.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of a 2D shooter game with red enemies using JavaScript in a single HTML file as per your requirements:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = { x: canvas.width/2, y: canvas.height/2, size: 20 };
      bullets = [];
      enemies = [];
      score = 0;

canvas.addEventListener("mousemove", handleMouseMove);
      canvas.addEventListener("click", shootBullet);

spawnEnemies();

setInterval(update, 16);
    }

// Update game state
    function update() {
      clearCanvas();

movePlayer();
      moveBullets();
      moveEnemies();
      
      drawPlayer();
      drawBullets();
      drawEnemies();

handleCollisions();
      updateScore();
    }

// Clear canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Move player based on mouse position
    function handleMouseMove(event) {
      var rect = canvas.getBoundingClientRect();
      player.x = event.clientX - rect.left;
      player.y = event.clientY - rect.top;
    }

// Draw player on canvas
    function drawPlayer() {
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2, false);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }

// Move bullets upwards and remove if out of bounds
    function moveBullets() {
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].y -= 2;
        if (bullets[i].y < 0) {
          bullets.splice(i, 1);
          i--;
        }
      }
    }

// Draw bullets on canvas
    function drawBullets() {
      for (var i = 0; i < bullets.length; i++) {
        ctx.beginPath();
        ctx.arc(bullets[i].x, bullets[i].y, 5, 0, Math.PI * 2, false);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();
      }
    }

// Spawn new enemy randomly on canvas
    function spawnEnemies() {
      var enemy = { x: Math.random() * canvas.width, y: -20, size: 20, speed: Math.random() * 2 + 1 };
      enemies.push(enemy);
      setTimeout(spawnEnemies, Math.random() * 2000 + 1000);
    }

// Move enemies downwards and remove if out of bounds
    function moveEnemies() {
      for (var i = 0; i < enemies.length; i++) {
        enemies[i].y += enemies[i].speed;
        if (enemies[i].y > canvas.height + enemies[i].size) {
          enemies.splice(i, 1);
          i--;
        }
      }
    }

// Draw enemies on canvas
    function drawEnemies() {
      for (var i = 0; i < enemies.length; i++) {
        ctx.beginPath();
        ctx.arc(enemies[i].x, enemies[i].y, enemies[i].size, 0, Math.PI * 2, false);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }
    }

// Shoot a bullet from player's position
    function shootBullet() {
      var bullet = { x: player.x, y: player.y };
      bullets.push(bullet);
    }

// Handle collisions between bullets and enemies
    function handleCollisions() {
      for (var i = 0; i < bullets.length; i++) {
        for (var j = 0; j < enemies.length; j++) {
          var dx = bullets[i].x - enemies[j].x;
          var dy = bullets[i].y - enemies[j].y;
          var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < bullets[i].size + enemies[j].size) {
            bullets.splice(i, 1);
            enemies.splice(j, 1);
            score += 10;
            break;
          }
        }
      }
    }

// Update score display
    function updateScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 8, 20);
    }

// Start the game
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
```

Feel free to modify and enhance the game as per your requirements or add more features to make it more enjoyable.