Please make a game where the player has to hit targets which are red circles using a gun that shoots bullets which are able to be aimed's game

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

No:12642

←

Prev Next

→

Please make a game where the player has to hit tar..ALL
Developer User5358｜Date and time 23/8/21 7:05:40
Build time 11.375 sec｜Game capacity 3.215KB｜

Script

Sure, here's an example of a simple game where the player aims and shoots at red targets using a gun controlled by the mouse cursor. The game is implemented as a single HTML file with JavaScript enclosed in script tags:

To play the game, simply copy the above code into a new HTML file and open it in a web browser (preferably on a smartphone) to start playing. The player can aim the gun by moving the mouse cursor (or their finger) on the canvas and shoot by clicking (or tapping) on the canvas. The goal is to hit the red targets with the bullets.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

// Player's gun properties
    const gunSize = 10;
    let gunX = canvas.width / 2;
    let gunY = canvas.height - gunSize;
    let bulletX, bulletY;
    let isBulletActive = false;

// Target properties
    const targetRadius = 20;
    let targetX = Math.random() * (canvas.width - targetRadius * 2) + targetRadius;
    let targetY = Math.random() * 200 + targetRadius;

// Detect mouse movement and update gun position
    canvas.addEventListener('mousemove', (event) => {
      const rect = canvas.getBoundingClientRect();
      gunX = event.clientX - rect.left - gunSize / 2;
      gunY = event.clientY - rect.top - gunSize / 2;
    });

// Detect mouse click to shoot bullets
    canvas.addEventListener('mousedown', () => {
      if (!isBulletActive) {
        bulletX = gunX;
        bulletY = gunY;
        isBulletActive = true;
      }
    });

// Main game loop
    function gameLoop() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw gun
      ctx.fillRect(gunX, gunY, gunSize, gunSize);

if (isBulletActive) {
        // Move bullet upwards
        bulletY -= 5;

// Check if bullet hits the target
        if (
          bulletX > targetX - targetRadius &&
          bulletX < targetX + targetRadius &&
          bulletY > targetY - targetRadius &&
          bulletY < targetY + targetRadius
        ) {
          // Bullet hit the target, reset target position
          targetX = Math.random() * (canvas.width - targetRadius * 2) + targetRadius;
          targetY = Math.random() * 200 + targetRadius;

// Deactivate bullet
          isBulletActive = false;
        } else if (bulletY < 0) {
          // Bullet missed the target, deactivate bullet
          isBulletActive = false;
        }

// Draw bullet
        ctx.beginPath();
        ctx.arc(bulletX, bulletY, 3, 0, Math.PI * 2);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();
      }

// Draw target
      ctx.beginPath();
      ctx.arc(targetX, targetY, targetRadius, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.closePath();

// Request next frame
      requestAnimationFrame(gameLoop);
    }

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