Shooter game with enemies and 1 teammate with the player's game

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

No:12456

←

Prev Next

→

Shooter game with enemies and 1 teammate with the ..ALL
Developer User5120｜Date and time 23/8/17 15:49:58
Build time 22.857 sec｜Game capacity 3.661KB｜

Script

Sure! Here's an example of a simple shooter game implemented as a single HTML file using JavaScript. It includes enemies and one teammate for the player. It's optimized for smartphone operation and uses pictograms for visual elements.

The game uses touch controls for movement. You can drag your finger across the smartphone screen to move the player around. The objective is to collide with the red enemy to increase the score while avoiding collision with the green teammate. The game will end when you collide with the teammate, and a pop-up alert will display your final score.

←

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 {
      border: 1px solid black;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Event listeners for touch controls
    canvas.addEventListener("touchstart", handleTouchStart);
    canvas.addEventListener("touchmove", handleTouchMove);

// Functions to handle touch controls
    let touchX = null;
    let touchY = null;

function handleTouchStart(event) {
      event.preventDefault();
      touchX = event.touches[0].clientX;
      touchY = event.touches[0].clientY;
    }

function handleTouchMove(event) {
      event.preventDefault();
      if (!touchX || !touchY) {
        return;
      }
      const currentX = event.touches[0].clientX;
      const currentY = event.touches[0].clientY;
      const deltaX = currentX - touchX;
      const deltaY = currentY - touchY;
      touchX = currentX;
      touchY = currentY;
      playerX += deltaX;
      playerY += deltaY;
    }

// Game loop
    function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.beginPath();
      ctx.arc(playerX, playerY, playerRadius, 0, Math.PI * 2);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();

// Draw enemy
      ctx.beginPath();
      ctx.arc(enemyX, enemyY, enemyRadius, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();

// Draw teammate
      ctx.beginPath();
      ctx.arc(teammateX, teammateY, teammateRadius, 0, Math.PI * 2);
      ctx.fillStyle = "green";
      ctx.fill();
      ctx.closePath();

// Collision detection
      const distPlayerEnemy = Math.sqrt(
        (playerX - enemyX) ** 2 + (playerY - enemyY) ** 2
      );
      const distPlayerTeammate = Math.sqrt(
        (playerX - teammateX) ** 2 + (playerY - teammateY) ** 2
      );

// Update score if collided with enemy, reset enemy position
      if (distPlayerEnemy < playerRadius + enemyRadius) {
        score++;
        enemyX = Math.random() * canvas.width;
        enemyY = Math.random() * canvas.height;
      }

// Game over if collided with teammate, display final score
      if (distPlayerTeammate < playerRadius + teammateRadius) {
        alert("Game Over\nScore: " + score);
        return;
      }

// Request next frame
      requestAnimationFrame(draw);
    }

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