Make a shooter game where you can move around and shoot objects falling from the sky by clicking them and getting points by shooting the objects and if you get hit by the objects you die's game

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

No:25196

←

Prev Next

→

Make a shooter game where you can move around and ..ALL
Developer User12286｜Date and time 23/11/19 2:05:58
Build time 84.859 sec｜Game capacity 5.262KB｜

Script

Sure! Here's an example of a simple shooter game implemented as a single HTML file using JavaScript:

This code creates a simple shooter game where you control a player character (blue circle) using the left and right arrow keys (or on a smartphone, you can tap on the left or right side of the screen to move). The goal is to shoot down falling objects (red circles) by clicking on them. Every time you successfully shoot a target, your score increases. If any of the targets hit the player, the game will end. The current score is displayed at the top left corner of the canvas. Note: This code is just a minimal implementation to illustrate the game mechanics. You can enhance it further by adding levels, power-ups, animations, sound effects, and other features according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple shooter game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooter Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
<script>
  // Shooter Game
  (function() {
    // Game variables
    var canvas, ctx;
    var player, bullets, targets, score, gameOver;

// Initialize the game
    function init() {
      canvas = document.createElement("canvas");
      canvas.width = 480;
      canvas.height = 320;
      ctx = canvas.getContext("2d");
      document.body.appendChild(canvas);

player = {x: canvas.width/2, y: canvas.height-20, radius: 10};
      bullets = [];
      targets = [];
      score = 0;
      gameOver = false;

canvas.addEventListener("click", shootBullet);
      document.addEventListener("keydown", handleKeyDown);
      document.addEventListener("keyup", handleKeyUp);

setInterval(update, 20);
      setInterval(createTarget, 1000);
    }

// Update the game state
    function update() {
      if (!gameOver) {
        // Update player position
        if (player.left && player.x > 0) player.x -= 5;
        if (player.right && player.x < canvas.width) player.x += 5;

// Update bullet positions
        for (var i = 0; i < bullets.length; i++) {
          bullets[i].y -= 8;
          if (bullets[i].y < 0) bullets.splice(i, 1);
        }

// Create target collision detection
        for (var i = 0; i < targets.length; i++) {
          if (targets[i].x - targets[i].radius < player.x + player.radius &&
              targets[i].x + targets[i].radius > player.x - player.radius &&
              targets[i].y + targets[i].radius > player.y - player.radius &&
              targets[i].y - targets[i].radius < player.y + player.radius) {
            gameOver = true;
            break;
          }

// Bullet collision detection
          for (var j = 0; j < bullets.length; j++) {
            if (bullets[j].x - bullets[j].radius < targets[i].x + targets[i].radius &&
                bullets[j].x + bullets[j].radius > targets[i].x - targets[i].radius &&
                bullets[j].y - bullets[j].radius < targets[i].y + targets[i].radius &&
                bullets[j].y + bullets[j].radius > targets[i].y - targets[i].radius) {
              targets.splice(i, 1);
              bullets.splice(j, 1);
              score++;
              break;
            }
          }
        }

// Draw the game
        draw();
      } else {
        // Game over logic
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.fillText("GAME OVER", canvas.width/2 - 100, canvas.height/2);
        clearInterval(update);
      }
    }

// Draw the game objects
    function draw() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
      ctx.beginPath();
      ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();

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

// Draw the targets
      for (var i = 0; i < targets.length; i++) {
        ctx.beginPath();
        ctx.arc(targets[i].x, targets[i].y, targets[i].radius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }

// Draw the score
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 8, 20);
    }

// Shoot a bullet
    function shootBullet(event) {
      var bullet = {x: player.x, y: player.y, radius: 5};
      bullets.push(bullet);
    }

// Create a target
    function createTarget() {
      var target = {x: Math.random() * canvas.width, y: 0, radius: 10};
      targets.push(target);
    }

// Handle key down events
    function handleKeyDown(event) {
      if (event.keyCode === 37) player.left = true;     // Left arrow key
      if (event.keyCode === 39) player.right = true;    // Right arrow key
    }

// Handle key up events
    function handleKeyUp(event) {
      if (event.keyCode === 37) player.left = false;
      if (event.keyCode === 39) player.right = false;
    }

// Start the game
    init();
  })();
</script>
</body>
</html>
```

This code creates a simple shooter game where you control a player character (blue circle) using the left and right arrow keys (or on a smartphone, you can tap on the left or right side of the screen to move). The goal is to shoot down falling objects (red circles) by clicking on them.

Every time you successfully shoot a target, your score increases. If any of the targets hit the player, the game will end. The current score is displayed at the top left corner of the canvas.

Note: This code is just a minimal implementation to illustrate the game mechanics. You can enhance it further by adding levels, power-ups, animations, sound effects, and other features according to your requirements.