function MainComponent() { const boardSize = 20; const cellSize = 25; const [snakeSegments, setSnakeSegments] = React.useState([ { x: Math.floor(boardSize / 2), y: Math.floor(boardSize / 2) } ]); const [food, setFood] = React.useState({ x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) }); const [scoreMultiplier, setScoreMultiplier] = React.useState(1); const [score, setScore] = React.useState(0); const [direction, setDirection] = React.useState({ x: 1, y: 0 }); const [gameOver, setGameOver] = React.useState(false); const changeDirection = (newDirection)=>{ setDirection(newDirection); }; const moveSnake = ()=>{ if (gameOver) return; let newSnakeSegments = [ ...snakeSegments ]; let head = { x: newSnakeSegments[0].x + direction.x, y: newSnakeSegments[0].y + direction.y }; if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize) { setGameOver(true); } if (newSnakeSegments.some((segment)=>segment.x === head.x && segment.y === head.y)) { setGameOver(true); return; } newSnakeSegments.unshift(head); if (head.x === food.x && head.y === food.y) { setFood({ x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) }); setScore(score + scoreMultiplier); setScoreMultiplier(scoreMultiplier + 0.1); } else { newSnakeSegments.pop(); } setSnakeSegments(newSnakeSegments); }; React.useEffect(()=>{ const handleKeyDown = (event)=>{ switch(event.key){ case "ArrowUp": if (direction.y !== 1) changeDirection({ x: 0, y: -1 }); break; case "ArrowDown": if (direction.y !== -1) changeDirection({ x: 0, y: 1 }); break; case "ArrowLeft": if (direction.x !== 1) changeDirection({ x: -1, y: 0 }); break; case "ArrowRight": if (direction.x !== -1) changeDirection({ x: 1, y: 0 }); break; case "Escape": setGameOver(true); break; } }; document.addEventListener("keydown", handleKeyDown); const gameInterval = setInterval(moveSnake, 200 - snakeSegments.length * 2); return ()=>{ document.removeEventListener("keydown", handleKeyDown); clearInterval(gameInterval); }; }, [ direction, snakeSegments, gameOver ]); function getCellStyle(x, y) { if (snakeSegments.some((segment)=>segment.x === x && segment.y === y)) { return 'border border-[#4dff4d] bg-[#33cc33] animate-slither'; } else if (food.x === x && food.y === y) { return 'border border-[#ff6666] bg-[#ff4d4d] animate-bounce'; } return 'bg-gray-700'; } function renderBoard() { const board = []; for(let y = 0; y < boardSize; y++){ for(let x = 0; x < boardSize; x++){ board.push(/*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: `w-[${cellSize}px] h-[${cellSize}px] ${getCellStyle(x, y)}`, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })); } } return board; } const boardClasses = `grid grid-cols-${boardSize} gap-0.5`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#010101] font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#58a6ff] text-center", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("p", { className: "text-[#ffeb3b] text-center", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Multiplier: x", scoreMultiplier.toFixed(1))), /*#__PURE__*/ React.createElement("div", { className: boardClasses, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, renderBoard()), gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold mb-4 text-center text-[#121212]", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Game Over!"), /*#__PURE__*/ React.createElement("p", { className: "text-md mb-4 text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Final Score: ", score), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF0000] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: ()=>window.location.reload(), __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Restart"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, ` @keyframes slither { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } } .animate-slither { animation: slither 0.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }