A realistic shooting game's game

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

No:35903

←

Prev Next

→

A realistic shooting game
Developer User16690｜Date and time 24/1/15 23:51:16
Build time 25.2 sec｜Game capacity 4.902KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Realistic Shooting Game</title>
</head>
<body>
  
  <canvas id="gameCanvas" width="500" height="400"></canvas>
  
  <script>
    // Game variables
    let canvas, ctx;
    let player, bullets, targets;
    let score, isGameOver;
    
    // Player object
    function Player(x, y) {
      this.x = x;
      this.y = y;
      this.width = 30;
      this.height = 30;
      this.color = "#0000FF";
      this.speed = 5;
    }
    
    // Bullet object
    function Bullet(x, y) {
      this.x = x;
      this.y = y;
      this.width = 10;
      this.height = 10;
      this.color = "#FF0000";
      this.speed = 8;
    }
    
    // Target object
    function Target(x, y) {
      this.x = x;
      this.y = y;
      this.width = 25;
      this.height = 25;
      this.color = "#00FF00";
      this.speed = Math.floor(Math.random() * 4) + 1; // Random speed between 1 and 5
    }
    
    // Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      player = new Player(canvas.width/2 - 15, canvas.height - 40);
      bullets = [];
      targets = [];
      score = 0;
      isGameOver = false;
      
      // Event listener to move player on touch or click
      canvas.addEventListener("touchmove", movePlayer);
      canvas.addEventListener("mousemove", movePlayer);
      canvas.addEventListener("click", shootBullet);
      
      // Generate initial targets
      generateTargets();
      
      // Start game loop
      gameLoop();
    }
    
    // Move the player
    function movePlayer(event) {
      let rect = canvas.getBoundingClientRect();
      player.x = event.clientX - rect.left - player.width/2;
      player.y = event.clientY - rect.top - player.height/2;
    }
    
    // Shoot a bullet
    function shootBullet() {
      bullets.push(new Bullet(player.x + player.width/2 - 5, player.y));
    }
    
    // Generate targets
    function generateTargets() {
      for (let i = 0; i < 5; i++) {
        let randomX = Math.floor(Math.random() * (canvas.width - 30));
        targets.push(new Target(randomX, Math.random() * -500));
      }
    }
    
    // Update game objects
    function update() {
      // Update bullet positions
      for (let i = 0; i < bullets.length; i++) {
        bullets[i].y -= bullets[i].speed;
        
        // Remove bullets when they go off screen
        if (bullets[i].y < 0) {
          bullets.splice(i, 1);
        }
      }
      
      // Update target positions
      for (let i = 0; i < targets.length; i++) {
        targets[i].y += targets[i].speed;
        
        // Check collision with player
        if (targets[i].y + targets[i].height > player.y &&
            targets[i].x < player.x + player.width &&
            targets[i].x + targets[i].width > player.x) {
          isGameOver = true;
        }
        
        // Check collision with bullets
        for (let j = 0; j < bullets.length; j++) {
          if (targets[i].y < bullets[j].y + bullets[j].height &&
              targets[i].x < bullets[j].x + bullets[j].width &&
              targets[i].x + targets[i].width > bullets[j].x) {
            targets.splice(i, 1);
            bullets.splice(j, 1);
            score++;
          }
        }
        
        // Remove targets when they go off screen
        if (targets[i].y > canvas.height) {
          targets.splice(i, 1);
          score--;
        }
      }
      
      // Generate new targets if less than 5
      if (targets.length < 5) {
        generateTargets();
      }
    }
    
    // Render game objects
    function render() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      // Draw bullets
      for (let i = 0; i < bullets.length; i++) {
        ctx.fillStyle = bullets[i].color;
        ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height);
      }
      
      // Draw targets
      for (let i = 0; i < targets.length; i++) {
        ctx.fillStyle = targets[i].color;
        ctx.fillRect(targets[i].x, targets[i].y, targets[i].width, targets[i].height);
      }
      
      // Draw score
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);
      
      // Game over screen
      if (isGameOver) {
        ctx.font = "30px Arial";
        ctx.fillText("Game Over", canvas.width/2 - 75, canvas.height/2);
        ctx.fillText("Final Score: " + score, canvas.width/2 - 110, canvas.height/2 + 40);
      }
    }
    
    // Game loop
    function gameLoop() {
      update();
      render();
      
      if (!isGameOver) {
        requestAnimationFrame(gameLoop);
      }
    }
    
    // Start the game
    init();
  </script>
  
</body>
</html>