AI game creator

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

No:11028

←

Prev Next

→

Shooting Game
Developer User4762｜Date and time 23/8/6 18:59:39
Build time 41.854 sec｜Game capacity 4.744KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>لعبة الرماية</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set the canvas size to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Game variables
    let score = 0;
    let gameover = false;

// Pictograms (optional)
    const playerImg = document.createElement("img");
    playerImg.src = "pictogram-player.png";

const targetImg = document.createElement("img");
    targetImg.src = "pictogram-target.png";

// Player object
    const player = {
      x: canvas.width / 2,
      y: canvas.height - 100,
      width: 50,
      height: 50,
      speed: 10,
      draw() {
        ctx.drawImage(playerImg, this.x, this.y, this.width, this.height);
      },
      moveLeft() {
        if (this.x > 0) {
          this.x -= this.speed;
        }
      },
      moveRight() {
        if (this.x + this.width < canvas.width) {
          this.x += this.speed;
        }
      },
      shoot() {
        bullets.push(new Bullet(this.x + this.width / 2, this.y));
      },
    };

// Bullet object
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = 5;
        this.height = 10;
        this.speed = 10;
      }

update() {
        this.y -= this.speed;
      }

draw() {
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }

// Targets array
    const targets = [];

// Bullets array
    const bullets = [];

// Event listeners for player movement and shooting
    document.addEventListener("keydown", (event) => {
      if (event.code === "ArrowLeft") {
        player.moveLeft();
      }
      if (event.code === "ArrowRight") {
        player.moveRight();
      }
      if (event.code === "Space") {
        player.shoot();
      }
    });

function gameLoop() {
      if (!gameover) {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw player
        player.draw();

// Update and draw bullets
        bullets.forEach((bullet) => {
          bullet.update();
          bullet.draw();
        });

// Update and draw targets
        targets.forEach((target, index) => {
          target.update();

// Check for collision with bullets
          bullets.forEach((bullet, bulletIndex) => {
            if (
              bullet.x < target.x + target.width &&
              bullet.x + bullet.width > target.x &&
              bullet.y < target.y + target.height &&
              bullet.y + bullet.height > target.y
            ) {
              // Collision detected, remove target
              targets.splice(index, 1);
              // Remove bullet
              bullets.splice(bulletIndex, 1);
              // Increase score
              score++;
            }
          });

target.draw();

// Check for collision with player
          if (
            player.x < target.x + target.width &&
            player.x + player.width > target.x &&
            player.y < target.y + target.height &&
            player.y + player.height > target.y
          ) {
            // Collision detected, game over
            gameover = true;
            alert("انتهت اللعبة! لقد اصطدمت بالهدف");
          }

// Check if target is out of bounds
          if (target.y + target.height > canvas.height) {
            // Out of bounds, game over
            gameover = true;
            alert("انتهت اللعبة! الهدف هرب");
          }
        });

// Call the game loop again
        requestAnimationFrame(gameLoop);
      }
    }

// Initialize the game with some targets
    function initializeGame() {
      for (let i = 0; i < 5; i++) {
        targets.push(
          createTarget(
            Math.random() * (canvas.width - 100) + 50,
            Math.random() * -canvas.height
          )
        );
      }
      gameLoop();
    }

// Create a target object
    function createTarget(x, y) {
      return {
        x,
        y,
        width: 50,
        height: 50,
        speed: 2,
        update() {
          this.y += this.speed;
        },
        draw() {
          ctx.drawImage(targetImg, this.x, this.y, this.width, this.height);
        },
      };
    }

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