<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="Dangrain.ico" type="image/x-icon">
  <title>Space Invaders</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
    .controls {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      font-size: 200px;
    }
    .control-button {
      margin: 0 30px;
      cursor: pointer;
    }
    #score {
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>
  <div class="controls">
    <div class="control-button" id="left-arrow">&lt;</div>
    <div class="control-button" id="shoot-button" ontouchstart="shoot()">!</div>
    <div class="control-button" id="right-arrow">&gt;</div>
  </div>
  <div id="score">Score: <span id="score-value">0</span> | Highest Score: <span id="highest-score">0</span></div>
  <h1>The score Is sort of broken, but saving your high score is as simple as not shooting enemies and letting them hit you 3 times, It... fixes it, no idea why</h1>
  <li><a href="Redditlike.HTML">Home</a></li>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    const player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      width: 30,
      height: 30,
      speed: 8,
      movingLeft: false,
      movingRight: false,
    };

    const bullets = [];
    const bulletSpeed = 5;

    const invaders = [];
    const invaderWidth = 30;
    const invaderHeight = 30;
    const maxInvaders = 4;

    let failedCount = 0;
    let score = 0;
    let highestScore = localStorage.getItem("highestScore") || 0;

    const leftArrowButton = document.getElementById("left-arrow");
    const rightArrowButton = document.getElementById("right-arrow");
    const shootButton = document.getElementById("shoot-button");
    const scoreDisplay = document.getElementById("score-value");
    const highestScoreDisplay = document.getElementById("highest-score");

    leftArrowButton.addEventListener("mousedown", () => startMoveLeft());
    leftArrowButton.addEventListener("mouseup", () => stopMoveLeft());
    leftArrowButton.addEventListener("touchstart", () => startMoveLeft());
    leftArrowButton.addEventListener("touchend", () => stopMoveLeft());

    rightArrowButton.addEventListener("mousedown", () => startMoveRight());
    rightArrowButton.addEventListener("mouseup", () => stopMoveRight());
    rightArrowButton.addEventListener("touchstart", () => startMoveRight());
    rightArrowButton.addEventListener("touchend", () => stopMoveRight());

    document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowLeft") {
        startMoveLeft();
      } else if (event.key === "ArrowRight") {
        startMoveRight();
      } else if (event.key === " ") {
        shoot();
      }
    });

    document.addEventListener("keyup", (event) => {
      if (event.key === "ArrowLeft") {
        stopMoveLeft();
      } else if (event.key === "ArrowRight") {
        stopMoveRight();
      }
    });

    function startMoveLeft() {
      player.movingLeft = true;
    }

    function stopMoveLeft() {
      player.movingLeft = false;
    }

    function startMoveRight() {
      player.movingRight = true;
    }

    function stopMoveRight() {
      player.movingRight = false;
    }

    function shoot() {
      bullets.push({ x: player.x + player.width / 2, y: player.y });
    }

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

    function drawBullet(bullet) {
      ctx.fillStyle = "red";
      ctx.fillRect(bullet.x, bullet.y, 2, 10);
    }

    function drawInvaders() {
      ctx.fillStyle = "green";
      for (const invader of invaders) {
        ctx.fillRect(invader.x, invader.y, invaderWidth, invaderHeight);
      }
    }

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

      if (player.movingLeft && player.x > 0) {
        player.x -= player.speed;
      }

      if (player.movingRight && player.x < canvas.width - player.width) {
        player.x += player.speed;
      }

      drawPlayer();

      for (let i = bullets.length - 1; i >= 0; i--) {
        const bullet = bullets[i];
        bullet.y -= bulletSpeed;
        drawBullet(bullet);

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

      if (Math.random() < 0.02 && invaders.length < maxInvaders) {
        invaders.push({ x: Math.random() * (canvas.width - invaderWidth), y: 0 });
      }

      for (let i = invaders.length - 1; i >= 0; i--) {
        const invader = invaders[i];
        invader.y += 1;
        drawInvaders();

        for (let j = bullets.length - 1; j >= 0; j--) {
          if (
            bullets[j].x < invader.x + invaderWidth &&
            bullets[j].x + 2 > invader.x &&
            bullets[j].y < invader.y + invaderHeight &&
            bullets[j].y + 10 > invader.y
          ) {
            bullets.splice(j, 1);
            invaders.splice(i, 1);
            score++;
          }
        }

        if (
          player.x < invader.x + invaderWidth &&
          player.x + player.width > invader.x &&
          player.y < invader.y + invaderHeight &&
          player.y + player.height > invader.y
        ) {
          failedCount++;
          if (failedCount >= 3) {
            alert("You failed, try again");
            if (score > highestScore) {
              highestScore = score;
              localStorage.setItem("highestScore", highestScore);
              highestScoreDisplay.textContent = highestScore;
            }
            document.location.reload();
          }
          invaders.splice(i, 1);
        }

        if (invader.y > canvas.height) {
          invaders.splice(i, 1);
        }
      }

      scoreDisplay.textContent = score;
      requestAnimationFrame(updateGameArea);
    }

    highestScoreDisplay.textContent = highestScore;
    updateGameArea();
  </script>
</body>
</html>