Shooter game with guns and no squares's game

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

No:13224

106

←

Prev Next

→

Shooter game with guns and no squares
Developer User5805｜Date and time 23/8/27 10:31:47
Build time 23.918 sec｜Game capacity 4.828KB｜

Script

Sure! Here's a simple shooter game implemented as a single HTML file using JavaScript and enclosed in script tags. This game is designed for smartphone operation and uses pictograms for a better gaming experience. The objective of the game is to shoot the moving targets without hitting any squares.

To play the game, you can copy the above code and save it as an `.html` file. Open the file with a web browser on your smartphone, and the game should start. Touch the screen to shoot bullets at the moving targets and avoid the squares. If you collide with a target or a square, it's game over!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooter Game</title>
  <style>
    canvas {
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Initialize game variables
    let canvas;
    let ctx;
    let playerX;
    let playerY;
    let targets;
    let bullets;
    let squares;
    let lastSquareSpawnTime;

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

playerX = canvasWidth / 2;
      playerY = canvasHeight - 100;

targets = [{
        x: Math.random() * (canvasWidth - targetSize),
        y: -targetSize,
        hasBeenHit: false
      }];

bullets = [];

squares = [];

lastSquareSpawnTime = -squareSpawnDelay;

canvas.addEventListener("touchstart", shoot);

update();
    }

// Update game state
    function update() {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw player
      ctx.fillStyle = "white";
      ctx.fillRect(playerX - targetSize / 2, playerY - targetSize / 2, targetSize, targetSize);

// Draw targets
      ctx.fillStyle = "green";
      targets.forEach((target) => {
        target.y += targetSpeed;
        ctx.fillRect(target.x, target.y, targetSize, targetSize);

// Check target collision
        if (target.y > canvasHeight + targetSize) {
          target.y = -targetSize;
          target.x = Math.random() * (canvasWidth - targetSize);
          target.hasBeenHit = false;
        }

if (target.x < playerX + targetSize &&
            target.x + targetSize > playerX &&
            target.y < playerY + targetSize &&
            target.y + targetSize > playerY &&
            !target.hasBeenHit) {
          gameOver();
        }
      });

// Draw bullets
      ctx.fillStyle = "red";
      bullets.forEach((bullet) => {
        bullet.y -= bulletSpeed;
        ctx.fillRect(bullet.x, bullet.y, 5, 10);

// Check bullet collision
        targets.forEach((target) => {
          if (bullet.x > target.x &&
              bullet.x < target.x + targetSize &&
              bullet.y > target.y &&
              bullet.y < target.y + targetSize &&
              !target.hasBeenHit) {
            target.hasBeenHit = true;
            bullet.y = -10;
          }
        });

// Remove bullets that are off screen
        if (bullet.y < 0) {
          bullets.splice(bullets.indexOf(bullet), 1);
        }
      });

// Draw squares
      ctx.fillStyle = "blue";
      squares.forEach((square) => {
        square.y += targetSpeed;
        ctx.fillRect(square.x, square.y, squareSize, squareSize);

// Check square collision
        if (playerX < square.x + squareSize &&
            playerX + targetSize > square.x &&
            playerY < square.y + squareSize &&
            playerY + targetSize > square.y) {
          gameOver();
        }

// Remove squares that are off screen
        if (square.y > canvasHeight + squareSize) {
          squares.splice(squares.indexOf(square), 1);
        }
      });

// Spawn squares
      if (Date.now() - lastSquareSpawnTime > squareSpawnDelay) {
        squares.push({
          x: Math.random() * (canvasWidth - squareSize),
          y: -squareSize
        });
        lastSquareSpawnTime = Date.now();
      }

requestAnimationFrame(update);
    }

// Shoot bullet
    function shoot(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const bulletX = touch.clientX;
      const bulletY = touch.clientY;
      bullets.push({ x: bulletX, y: bulletY });
    }

// Game over
    function gameOver() {
      canvas.removeEventListener("touchstart", shoot);
      alert("Game Over!");
      location.reload();
    }

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