pages/secret/endlessRunner/script.js

import { useEffect, useRef, useState } from "react";

export default function EndlessRunner() {
  const canvasRef = useRef(null);
  const [running, setRunning] = useState(true);
  const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
  const gravity = 0.5;
  let obstacles = [];
  let score = 0;

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = 300;

    function update() {
      if (!running) return;
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Player physics
      player.dy += gravity;
      player.y += player.dy;
      if (player.y > 150) {
        player.y = 150;
        player.dy = 0;
      }

      // Draw player
      ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);

      // Obstacles
      if (Math.random() < 0.02) {
        obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
      }
      obstacles = obstacles.map((obstacle) => ({
        ...obstacle,
        x: obstacle.x - 5,
      }));
      obstacles = obstacles.filter(
        (obstacle) => obstacle.x + obstacle.width > 0
      );

      obstacles.forEach((obstacle) => {
        ctx.fillStyle = "red";
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

        // Collision detection
        if (
          player.x < obstacle.x + obstacle.width &&
          player.x + player.width > obstacle.x &&
          player.y < obstacle.y + obstacle.height &&
          player.y + player.height > obstacle.y
        ) {
          setRunning(false);
        }
      });

      // Score
      score++;
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 20);

      requestAnimationFrame(update);
    }

    update();
  }, [running]);

  function jump() {
    if (player.y >= 150) {
      player.dy = -10;
    }
  }

  return (
    <div className="flex flex-col items-center">
      <canvas ref={canvasRef} className="border" onClick={jump}></canvas>
      {!running && (
        <button
          onClick={() => window.location.reload()}
          className="mt-4 bg-blue-500 text-white px-4 py-2 rounded"
        >
          Restart
        </button>
      )}
    </div>
  );
}