Untitled

<!DOCTYPE html>
<html>
<head>
<title>Simple Shooting Game</title>
<style>
  body { margin: 0; overflow: hidden; background: black; }
    canvas { display: block; background: #111; }
    </style>
    </head>
    <body>

    <canvas id="gameCanvas"></canvas>

    <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let bullets = [];
    let enemies = [];
    let score = 0;

    const player = {
          x: canvas.width / 2,
            y: canvas.height - 60,
              width: 40,
                height: 40
    };

    function drawPlayer() {
          ctx.fillStyle = "cyan";
            ctx.fillRect(player.x, player.y, player.width, player.height);
    }

    function drawBullets() {
          ctx.fillStyle = "yellow";
            bullets.forEach((bullet, index) => {
                    bullet.y -= 7;
                        ctx.fillRect(bullet.x, bullet.y, 5, 10);

                            if (bullet.y < 0) bullets.splice(index, 1);
            });
    }

    function drawEnemies() {
          ctx.fillStyle = "red";
            enemies.forEach((enemy, eIndex) => {
                    enemy.y += 2;
                        ctx.fillRect(enemy.x, enemy.y, 40, 40);

                            bullets.forEach((bullet, bIndex) => {
                                      if (
                                                bullet.x < enemy.x + 40 &&
                                                        bullet.x + 5 > enemy.x &&
                                                                bullet.y < enemy.y + 40 &&
                                                                        bullet.y + 10 > enemy.y
                                      ) {
                                                enemies.splice(eIndex, 1);
                                                        bullets.splice(bIndex, 1);
                                                                score++;
                                      }
                            });

                                if (enemy.y > canvas.height) enemies.splice(eIndex, 1);
            });
    }

    function spawnEnemy() {
          enemies.push({
                x: Math.random() * (canvas.width - 40),
                    y: -40
          });
    }

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

    function gameLoop() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawPlayer();
              drawBullets();
                drawEnemies();
                  drawScore();

                    requestAnimationFrame(gameLoop);
    }

    setInterval(spawnEnemy, 1000);

    document.addEventListener("mousemove", (e) => {
          player.x = e.clientX - player.width / 2;
    });

    document.addEventListener("click", () => {
          bullets.push({
                x: player.x + player.width / 2 - 2.5,
                    y: player.y
          });
    });

    gameLoop();
    </script>

    </body>
    </html>

    
          })
    })
    })
    }
    }
          })
    }
                                      }
                                      )
                            })
            })
    }
            })
    }
    }
    }