[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68990aa87c408191862a37881380e8f7","versionInt","title","Hadík (snake) – React Hra V Prehliadači","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\n// Hadík (Snake) – single-file React component\n// Ovládanie: šípky alebo WASD. P – pauza. R – reštart.\n// Funkcie: skóre + high score (localStorage), pauza, rýchlosť, voľba obtiažnosti (stena vs. wrap), automatický resize canvas.\n\nexport default function Hadik() {\n // Nastavenia\n const [cellSize, setCellSize] = useState(22); // px na bunku\n const [cols, setCols] = useState(24);\n const [rows, setRows] = useState(18);\n const [speedMs, setSpeedMs] = useState(110); // menšie = rýchlejšie\n const [wrapMode, setWrapMode] = useState(false); // false = steny zabíjajú\n\n // Stav hry\n const [running, setRunning] = useState(false);\n const [paused, setPaused] = useState(false);\n const [score, setScore] = useState(0);\n const [high, setHigh] = useState(0);\n\n // Canvas\n const canvasRef = useRef(null);\n const lastTickRef = useRef(0);\n const accRef = useRef(0);\n const rafRef = useRef(0);\n\n // Herné objekty\n const snakeRef = useRef([{ x: 5, y: 5 }]);\n const dirRef = useRef({ x: 1, y: 0 });\n const nextDirRef = useRef({ x: 1, y: 0 });\n const foodRef = useRef({ x: 10, y: 8 });\n const justAteRef = useRef(false);\n\n // Načítaj high score\n useEffect(() => {\n const h = Number(localStorage.getItem(\"hadik_high\") || 0);\n if (!Number.isNaN(h)) setHigh(h);\n }, []);\n\n // Pomocné funkcie\n const randFood = (snake) => {\n const free = [];\n for (let y = 0; y < rows; y++) {\n for (let x = 0; x < cols; x++) {\n if (!snake.some((s) => s.x === x && s.y === y)) free.push({ x, y });\n }\n }\n return free[Math.floor(Math.random() * free.length)] || { x: 0, y: 0 };\n };\n\n const resetGame = () => {\n snakeRef.current = [\n { x: Math.floor(cols / 2) - 1, y: Math.floor(rows / 2) },\n { x: Math.floor(cols / 2) - 2, y: Math.floor(rows / 2) },\n ];\n dirRef.current = { x: 1, y: 0 };\n nextDirRef.current = { x: 1, y: 0 };\n foodRef.current = randFood(snakeRef.current);\n justAteRef.current = false;\n setScore(0);\n };\n\n const startGame = () => {\n resetGame();\n setPaused(false);\n setRunning(true);\n };\n\n const gameOver = () => {\n setRunning(false);\n setPaused(false);\n // update high score\n setHigh((prev) => {\n const n = Math.max(prev, score);\n localStorage.setItem(\"hadik_high\", String(n));\n return n;\n });\n };\n\n // Ovládanie\n useEffect(() => {\n const onKey = (e) => {\n const key = e.key.toLowerCase();\n const cur = dirRef.current;\n let nd = null;\n if (key === \"arrowup\" || key === \"w\") nd = { x: 0, y: -1 };\n if (key === \"arrowdown\" || key === \"s\") nd = { x: 0, y: 1 };\n if (key === \"arrowleft\" || key === \"a\") nd = { x: -1, y: 0 };\n if (key === \"arrowright\" || key === \"d\") nd = { x: 1, y: 0 };\n if (nd) {\n // zakáž otočku o 180° v jednom ticku\n if (!(nd.x === -cur.x && nd.y === -cur.y)) {\n nextDirRef.current = nd;\n }\n }\n if (key === \"p\") setPaused((p) => !p);\n if (key === \"r\") startGame();\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, []);\n\n // Hlavný cyklus\n useEffect(() => {\n if (!running) return;\n const ctx = canvasRef.current?.getContext(\"2d\");\n if (!ctx) return;\n\n const tick = (t) => {\n if (!lastTickRef.current) lastTickRef.current = t;\n const dt = t - lastTickRef.current;\n lastTickRef.current = t;\n if (!paused) accRef.current += dt;\n\n // krok logiky podľa rýchlosti\n while (accRef.current >= speedMs) {\n accRef.current -= speedMs;\n step();\n }\n\n draw(ctx);\n rafRef.current = requestAnimationFrame(tick);\n };\n\n rafRef.current = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(rafRef.current);\n }, [running, paused, speedMs, cols, rows, cellSize, wrapMode]);\n\n const step = () => {\n // update smeru raz za tick\n dirRef.current = nextDirRef.current;\n const snake = [...snakeRef.current];\n const head = { ...snake[0] };\n head.x += dirRef.current.x;\n head.y += dirRef.current.y;\n\n // wrap alebo náraz do steny\n if (wrapMode) {\n head.x = (head.x + cols) % cols;\n head.y = (head.y + rows) % rows;\n } else {\n if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows) {\n gameOver();\n return;\n }\n }\n\n // náraz do seba\n if (snake.some((s) => s.x === head.x && s.y === head.y)) {\n gameOver();\n return;\n }\n\n snake.unshift(head);\n\n // jedlo\n if (head.x === foodRef.current.x && head.y === foodRef.current.y) {\n justAteRef.current = true;\n setScore((s) => s + 1);\n foodRef.current = randFood(snake);\n } else {\n justAteRef.current = false;\n snake.pop();\n }\n\n snakeRef.current = snake;\n };\n\n const draw = (ctx) => {\n const w = cols * cellSize;\n const h = rows * cellSize;\n ctx.canvas.width = w;\n ctx.canvas.height = h;\n\n // pozadie\n ctx.fillStyle = \"#0b1220\"; // temné modré pozadie\n ctx.fillRect(0, 0, w, h);\n\n // mriežka (jemná)\n ctx.strokeStyle = \"rgba(255,255,255,0.06)\";\n for (let x = 0; x <= cols; x++) {\n ctx.beginPath();\n ctx.moveTo(x * cellSize + 0.5, 0);\n ctx.lineTo(x * cellSize + 0.5, h);\n ctx.stroke();\n }\n for (let y = 0; y <= rows; y++) {\n ctx.beginPath();\n ctx.moveTo(0, y * cellSize + 0.5);\n ctx.lineTo(w, y * cellSize + 0.5);\n ctx.stroke();\n }\n\n // jedlo\n const f = foodRef.current;\n ctx.fillStyle = justAteRef.current ? \"#ffcc00\" : \"#e11d48\"; // žmurknutie po zjedení\n roundRect(ctx, f.x * cellSize + 3, f.y * cellSize + 3, cellSize - 6, cellSize - 6, 6, true);\n\n // had\n const snake = snakeRef.current;\n snake.forEach((seg, i) => {\n const px = seg.x * cellSize;\n const py = seg.y * cellSize;\n // hlava výraznejšia\n if (i === 0) {\n ctx.fillStyle = \"#22c55e\";\n } else {\n ctx.fillStyle = \"#16a34a\";\n }\n roundRect(ctx, px + 2, py + 2, cellSize - 4, cellSize - 4, 6, true);\n });\n };\n\n const roundRect = (ctx, x, y, w, h, r, fill) => {\n ctx.beginPath();\n ctx.moveTo(x + r, y);\n ctx.arcTo(x + w, y, x + w, y + h, r);\n ctx.arcTo(x + w, y + h, x, y + h, r);\n ctx.arcTo(x, y + h, x, y, r);\n ctx.arcTo(x, y, x + w, y, r);\n if (fill) ctx.fill();\n };\n\n // UI helpers\n const isGameActive = running && !paused;\n\n return (\n

Hadík 🐍

Šípky/WASD – pohyb • P – pauza • R – reštart

\n\n

\n \n {running ? \"Reštart\" : \"Štart\"}\n \n setPaused((p) => !p)}\n disabled={!running}\n className={`rounded-2xl py-2 px-4 font-semibold ${running ? \"bg-sky-500 hover:bg-sky-600\" : \"bg-slate-700 text-slate-400\"}`}\n >\n {paused ? \"Pokračovať\" : \"Pauza\"}\n \n {\n resetGame();\n setRunning(false);\n }}\n className=\"rounded-2xl py-2 px-4 bg-rose-500 hover:bg-rose-600 font-semibold\"\n >\n Zastaviť\n \n

\n\n

\n Rýchlosť\n setSpeedMs(Number(e.target.value))}\n />\n\n Veľkosť bunky: {cellSize}px\n setCellSize(Number(e.target.value))}\n />\n\n Stĺpce: {cols}\n setCols(Number(e.target.value))}\n />\n\n Riadky: {rows}\n setRows(Number(e.target.value))}\n />\n\n Režim okraja\n setWrapMode(e.target.value === \"wrap\")}\n >\n \n \n \n

\n\n

\n Skóre\n

{score}

\n Rekord\n

{Math.max(high, score)}

\n\n

\n {isGameActive ? \"Hra beží – veľa šťastia!\" : running ? \"Hra pozastavená alebo po skončení. Môžeš reštartovať.\" : \"Klikni Štart a hraj.\"}\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","1632126323286091113","traceTime",1776490094436]