sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

formatted like my Boss wants it (help!)

Browse source
This commit is contained in:
sageTheDM 2025-02-25 10:04:34 +01:00
parent 5d11f87dd3
commit b507a6b0ea
19 changed files with 1425 additions and 1136 deletions
Download patch file Download diff file Expand all files Collapse all files

136
secret/endlessRunner/script.js
View file

@ -1,78 +1,90 @@
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;
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;
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);
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;
}
// 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);
// 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
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);
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);
// 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);
}
});
update();
}, [running]);
// Score
score++;
ctx.fillStyle = "black";
ctx.fillText("Score: " + score, 10, 20);
function jump() {
if (player.y >= 150) {
player.dy = -10;
}
requestAnimationFrame(update);
}
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>
);
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>
);
}