function MainComponent() { const [carPosition, setCarPosition] = React.useState({ x: 50, y: 50 }); const [obstacles, setObstacles] = React.useState([]); const [distance, setDistance] = React.useState(0); const [highscore, setHighscore] = React.useState(0); const carRef = React.useRef(); const handleKeyDown = (event)=>{ event.preventDefault(); let newPos = { ...carPosition }; switch(event.key){ case 'ArrowUp': newPos.y = Math.max(0, carPosition.y - 10); break; case 'ArrowDown': newPos.y = Math.min(95, carPosition.y + 10); break; case 'ArrowLeft': newPos.x = Math.max(0, carPosition.x - 10); break; case 'ArrowRight': newPos.x = Math.min(95, carPosition.x + 10); break; } setCarPosition(newPos); }; React.useEffect(()=>{ const intervalId = setInterval(()=>{ setObstacles((prevState)=>prevState.map((obs)=>({ ...obs, y: obs.y + 2 })).filter((obs)=>obs.y < 100)); setDistance((prevDistance)=>prevDistance + 1); if (distance > highscore) { setHighscore(distance); } }, 200); return ()=>clearInterval(intervalId); }, [ distance, highscore ]); React.useEffect(()=>{ window.addEventListener('keydown', handleKeyDown); return ()=>window.removeEventListener('keydown', handleKeyDown); }, [ carPosition ]); React.useEffect(()=>{ const newObstacle = { x: Math.floor(Math.random() * 90), y: 0, id: Date.now() }; const obstacleInterval = setInterval(()=>{ setObstacles((prevState)=>[ ...prevState, newObstacle ]); }, 2000); return ()=>clearInterval(obstacleInterval); }, []); const gameArea = { height: '100vh', width: '100vw', position: 'relative', overflow: 'hidden', backgroundColor: '#87CEEB' }; const carStyle = { height: '50px', width: '50px', backgroundColor: '#FF0000', position: 'absolute', top: `${carPosition.y}%`, left: `${carPosition.x}%`, transition: 'top 0.2s, left 0.2s' }; return /*#__PURE__*/ React.createElement("div", { style: gameArea, tabIndex: "0", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: carRef, style: carStyle, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), obstacles.map((obstacle)=>/*#__PURE__*/ React.createElement("div", { key: obstacle.id, style: { height: '50px', width: '50px', backgroundColor: '#808080', position: 'absolute', top: `${obstacle.y}%`, left: `${obstacle.x}%` }, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 p-4 bg-white w-full text-center font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Distance: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, distance)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Highscore: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 100, columnNumber: 22 }, __self: this }, highscore))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, ` @keyframes slide { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } `)); }