function MainComponent() { const [snakeSegments, setSnakeSegments] = React.useState([ { x: 8, y: 10 } ]); const [foodPosition, setFoodPosition] = React.useState({ x: 3, y: 3 }); const [direction, setDirection] = React.useState({ x: 0, y: 0 }); const [score, setScore] = React.useState(0); const [isGameRunning, setIsGameRunning] = React.useState(false); const startGame = ()=>{ setSnakeSegments([ { x: 8, y: 10 } ]); setFoodPosition({ x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }); setDirection({ x: 0, y: -1 }); setScore(0); setIsGameRunning(true); }; React.useEffect(()=>{ const handleKeyDown = (e)=>{ switch(e.key){ case 'ArrowUp': setDirection({ x: 0, y: -1 }); break; case 'ArrowDown': setDirection({ x: 0, y: 1 }); break; case 'ArrowLeft': setDirection({ x: -1, y: 0 }); break; case 'ArrowRight': setDirection({ x: 1, y: 0 }); break; } }; window.addEventListener('keydown', handleKeyDown); return ()=>{ window.removeEventListener('keydown', handleKeyDown); }; }, []); React.useEffect(()=>{ if (!isGameRunning) return; const moveSnake = ()=>{ setSnakeSegments((prev)=>{ const newHead = { x: prev[0].x + direction.x, y: prev[0].y + direction.y }; const ateFood = newHead.x === foodPosition.x && newHead.y === foodPosition.y; if (ateFood) { setScore((prevScore)=>prevScore + 1); setFoodPosition({ x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }); } return ateFood ? [ newHead, ...prev ] : [ newHead, ...prev.slice(0, -1) ]; }); }; const intervalId = setInterval(moveSnake, 200); return ()=>clearInterval(intervalId); }, [ isGameRunning, direction, foodPosition ]); const renderGrid = ()=>{ const grid = []; for(let row = 0; row < 20; row++){ for(let col = 0; col < 20; col++){ const isSnakeSegment = snakeSegments.some((segment)=>segment.x === col && segment.y === row); const isFood = foodPosition.x === col && foodPosition.y === row; let className = isSnakeSegment ? 'bg-green-500 animate-pulse' : isFood ? 'bg-red-500 animate-ping' : 'bg-[#010101]'; className = `${className} w-4 h-4`; grid.push(/*#__PURE__*/ React.createElement("div", { key: `${col}-${row}`, className: className, __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })); } } return grid; }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[400px] bg-black grid grid-cols-20 grid-rows-20 gap-[2px]", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, renderGrid()), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 text-white text-center space-y-2", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 rounded font-roboto", onClick: startGame, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Start Game")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Use arrow keys to move the snake")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .animate-pulse { animation: pulse 1s infinite; } @keyframes ping { 0% { transform: scale(1); } 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s infinite; } `)); }