Shooting game ...things appear & shoot them joystick be on's game

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

No:15572

←

Prev Next

→

Shooting game ...things appear & shoot them joysti..ALL
Developer User6688｜Date and time 23/9/10 1:53:58
Build time 41.012 sec｜Game capacity 4.796KB｜

Script

Sure! Here's a basic implementation of a shooting game using JavaScript enclosed in script tags within a single HTML file. This game assumes smartphone operation and uses pictograms whenever possible:

This is a simple shooting game where the player is represented by a blue circle and enemies as red circles. The player's position is controlled using a virtual joystick (represented by the mouse cursor or touch movements). The objective is to avoid colliding with the enemies as they appear and move downwards. The game will continuously spawn new enemies at a fixed interval of 1 second. Please note that this is a basic implementation to demonstrate the concept and can be expanded further with additional features, levels, scoring, etc.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

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

canvas.width = canvasWidth;
      canvas.height = canvasHeight;

// Set player variables
      const playerRadius = 20;
      let playerX = (canvasWidth - playerRadius) / 2;
      let playerY = canvasHeight - playerRadius - 20;
      const playerSpeed = 5;

// Set enemy variables
      const enemySize = 30;
      const enemySpeed = 2;
      let enemies = [];

// Set joystick variables
      let joystickX = 0;
      let joystickY = 0;
      const joystickRadius = 30;

// Add event listeners for touch and mouse movement
      canvas.addEventListener("touchmove", handleTouchMove);
      canvas.addEventListener("mousemove", handleMouseMove);

// Handle touch movement
      function handleTouchMove(e) {
        e.preventDefault();
        const touch = e.touches[0];
        joystickX = touch.clientX;
        joystickY = touch.clientY;
      }

// Handle mouse movement
      function handleMouseMove(e) {
        joystickX = e.clientX;
        joystickY = e.clientY;
      }

// Function to draw the player
      function drawPlayer() {
        ctx.beginPath();
        ctx.arc(playerX, playerY, playerRadius, 0, Math.PI * 2);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();
      }

// Function to update player position
      function updatePlayerPosition() {
        if (joystickX > playerX + playerRadius) {
          playerX += playerSpeed;
        } else if (joystickX < playerX - playerRadius) {
          playerX -= playerSpeed;
        }

if (joystickY > playerY + playerRadius) {
          playerY += playerSpeed;
        } else if (joystickY < playerY - playerRadius) {
          playerY -= playerSpeed;
        }
      }

// Function to draw enemies
      function drawEnemies() {
        for (let i = 0; i < enemies.length; i++) {
          ctx.beginPath();
          ctx.arc(
            enemies[i].x,
            enemies[i].y,
            enemySize,
            0,
            Math.PI * 2
          );
          ctx.fillStyle = "red";
          ctx.fill();
          ctx.closePath();
        }
      }

// Function to update enemies position
      function updateEnemiesPosition() {
        for (let i = 0; i < enemies.length; i++) {
          enemies[i].y += enemySpeed;

// Check if enemy collides with player
          if (
            enemies[i].y + enemySize >= playerY &&
            enemies[i].y - enemySize <= playerY + playerRadius &&
            enemies[i].x + enemySize >= playerX &&
            enemies[i].x - enemySize <= playerX + playerRadius
          ) {
            // Game over condition
            alert("Game over!");
            document.location.reload();
          }

// Check if enemy goes off the canvas
          if (enemies[i].y > canvasHeight) {
            enemies.splice(i, 1);
          }
        }
      }

// Function to generate random enemies
      function generateEnemies() {
        let x = Math.random() * (canvasWidth - enemySize * 2) + enemySize;
        enemies.push({ x: x, y: 0 });
      }

// Function to clear the canvas
      function clearCanvas() {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      }

// Function to update the game state
      function updateGame() {
        clearCanvas();
        drawPlayer();
        updatePlayerPosition();
        drawEnemies();
        updateEnemiesPosition();
        requestAnimationFrame(updateGame);
      }

// Start the game
      setInterval(generateEnemies, 1000);
      updateGame();
    </script>
  </body>
</html>
```

Please note that this is a basic implementation to demonstrate the concept and can be expanded further with additional features, levels, scoring, etc.