function MainComponent() { const [dogPosition, setDogPosition] = React.useState({ x: 0, y: 0 }); const [obstacles, setObstacles] = React.useState(generateObstacles(5)); const [direction, setDirection] = React.useState('Right'); const [score, setScore] = React.useState(0); React.useEffect(()=>{ const interval = setInterval(()=>{ setDogPosition((prevPos)=>{ let newX = prevPos.x; let newY = prevPos.y; switch(direction){ case 'Up': newY = prevPos.y - 20; break; case 'Down': newY = prevPos.y + 20; break; case 'Left': newX = prevPos.x - 20; break; case 'Right': newX = prevPos.x + 20; break; } if (newX < 0) newX = 0; if (newY < 0) newY = 0; if (newX > 360) newX = 360; if (newY > 360) newY = 360; return { x: newX, y: newY }; }); setDirection((prevDirection)=>{ const directions = [ 'Up', 'Down', 'Left', 'Right' ]; return directions[Math.floor(Math.random() * directions.length)]; }); setScore((prevScore)=>prevScore + 1); }, 1000); return ()=>clearInterval(interval); }, [ direction ]); function generateObstacles(numObstacles) { const obstacleArray = []; for(let i = 0; i < numObstacles; i++){ const randomX = Math.floor(Math.random() * 360); const randomY = Math.floor(Math.random() * 360); obstacleArray.push({ x: randomX, y: randomY }); } return obstacleArray; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-300 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#010101] mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Dog Walker Game"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-medium text-[#010101] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[400px] bg-white border-4 border-black", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, obstacles.map((obstacle, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-[40px] h-[40px] bg-red-500 border-2 border-black", style: { top: `${obstacle.y}px`, left: `${obstacle.x}px` }, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[40px] h-[40px] bg-white border-2 border-black rounded-full flex items-center justify-center", style: { top: `${dogPosition.y}px`, left: `${dogPosition.x}px` }, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "white dog emoji", className: "text-3xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "🐕")))); }

Dog Walker Game

Score: 0