90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
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>
|
|
);
|
|
}
|