Back
Version 3
1/8/2025
/** @jsxImportSource https://esm.sh/react@18.2.0 */
React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function RunningGame() {
const [targetDistance, setTargetDistance] = useState(Math.floor(Math.random() * 5) + 1); // 1-5 km
consimportt [currentDistance, setCurrentDistance] = useState(0);
const [message, setMessage] = useState('Start running! Reach your target distance.');
const [isGameOver, setIsGameOver] = useState(false);
const [runCount, setRunCount] = useState(0);
const handleRun = () => {
const runDistance = Math.random() * 0.5; // Random run between 0-0.5 km
const newDistance = Math.min(currentDistance + runDistance, targetDistance);
setCurrentDistance(newDistance);
setRunCount(runCount + 1);
if (newDistance >= targetDistance) {
setMessage(`🏆 Congratulations! You reached ${targetDistance.toFixed(2)} km in ${runCount + 1} runs!`);
setIsGameOver(true);
} else {
setMessage(`You've run ${newDistance.toFixed(2)} km. Keep going! Target: ${targetDistance.toFixed(2)} km`);
}
};
const resetGame = () => {
setTargetDistance(Math.floor(Math.random() * 5) + 1);
setCurrentDistance(0);
setMessage('Start running! Reach your target distance.');
setIsGameOver(false);
setRunCount(0);
};
return (
<div style={{
Updated: January 8, 2025