AI game creator

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

No:34841

←

Prev Next

→

Shooting Game
Developer User16338｜Date and time 24/1/11 21:50:35
Build time 25.965 sec｜Game capacity 4.772KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Gioco di Spari</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Player
    const player = {
      x: canvas.width / 2,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      color: "blue",
      speed: 8,
    };

// Bullets
    const bullets = [];
    const bulletSpeed = 5;
    const bulletWidth = 5;
    const bulletHeight = 15;
    const bulletColor = "red";

// Enemies
    const enemies = [];
    const enemyWidth = 50;
    const enemyHeight = 50;
    const enemyColor = "green";
    const enemySpeed = 2;

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

// Event listeners for player movement
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

let isMovingLeft = false;
    let isMovingRight = false;

function handleKeyUp(event) {
      if (event.key === "ArrowLeft") {
        isMovingLeft = false;
      } else if (event.key === "ArrowRight") {
        isMovingRight = false;
      }
    }

function drawPlayer() {
      ctx.beginPath();
      ctx.rect(player.x, player.y, player.width, player.height);
      ctx.fillStyle = player.color;
      ctx.fill();
      ctx.closePath();
    }

function movePlayer() {
      if (isMovingLeft && player.x > 0) {
        player.x -= player.speed;
      }
      if (isMovingRight && player.x < canvas.width - player.width) {
        player.x += player.speed;
      }
    }

function drawBullets() {
      bullets.forEach(bullet => {
        ctx.beginPath();
        ctx.rect(bullet.x, bullet.y, bullet.width, bullet.height);
        ctx.fillStyle = bulletColor;
        ctx.fill();
        ctx.closePath();
      });
    }

function moveBullets() {
      bullets.forEach(bullet => {
        bullet.y -= bulletSpeed;
        if (bullet.y < 0) {
          bullets.splice(bullets.indexOf(bullet), 1);
        }
      });
    }

function drawEnemies() {
      enemies.forEach(enemy => {
        ctx.beginPath();
        ctx.rect(enemy.x, enemy.y, enemy.width, enemy.height);
        ctx.fillStyle = enemyColor;
        ctx.fill();
        ctx.closePath();
      });
    }

function moveEnemies() {
      enemies.forEach(enemy => {
        enemy.y += enemySpeed;
        if (enemy.y > canvas.height) {
          gameover = true;
        }
      });
    }

function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);
    }

function gameOverScreen() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "40px Arial";
      ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
      ctx.font = "20px Arial";
      ctx.fillText("Your Score: " + score, canvas.width / 2 - 60, canvas.height / 2 + 50);
    }

// Generate enemies every 1 second
    setInterval(() => {
      if (!gameover) {
        const randomX = Math.random() * (canvas.width - enemyWidth);
        enemies.push({
          x: randomX,
          y: 0,
          width: enemyWidth,
          height: enemyHeight,
        });
      }
    }, 1000);

updateGame();
  </script>
</body>
</html>