Snake Game<\/title>\n\n \n <script src=\"https:\/\/telegram.org\/js\/telegram-web-app.js\"><\/script>\n\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n background: #050816;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n .snake-app {\n width: 100%;\n max-width: 420px;\n margin: 0 auto;\n padding: 12px;\n }\n\n .snake-header {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n gap: 10px;\n }\n\n .snake-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #222;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .snake-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .snake-user-info {\n flex: 1;\n min-width: 0;\n }\n\n .snake-user-name {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .snake-user-username {\n font-size: 12px;\n opacity: 0.7;\n }\n\n .snake-scores {\n font-size: 13px;\n text-align: right;\n }\n\n .snake-card {\n background: rgba(15, 23, 42, 0.95);\n border-radius: 16px;\n padding: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n }\n\n .snake-top-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .snake-status {\n font-size: 13px;\n opacity: 0.8;\n }\n\n .snake-canvas-wrap {\n display: flex;\n justify-content: center;\n margin-bottom: 10px;\n }\n\n canvas#snakeCanvas {\n border-radius: 10px;\n background: #000;\n image-rendering: pixelated;\n }\n\n .snake-controls {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, 44px);\n gap: 8px;\n margin-top: 4px;\n }\n\n .snake-btn {\n border: none;\n border-radius: 12px;\n background: #1f2937;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .snake-btn:active {\n transform: scale(0.96);\n background: #111827;\n }\n\n .snake-btn span {\n pointer-events: none;\n }\n\n .snake-btn-empty {\n background: transparent;\n pointer-events: none;\n }\n\n .snake-main-btn {\n width: 100%;\n margin-top: 10px;\n padding: 10px;\n border-radius: 999px;\n border: none;\n background: linear-gradient(135deg, #22c55e, #22d3ee);\n color: #000;\n font-weight: 700;\n font-size: 14px;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n }\n\n .snake-main-btn:active {\n transform: translateY(1px);\n filter: brightness(0.9);\n }\n\n .snake-hidden {\n display: none !important;\n }\n\n .snake-game-over {\n font-size: 13px;\n margin-top: 4px;\n color: #f97373;\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"snake-app\">\n\n <div class=\"snake-header\">\n <div class=\"snake-avatar\">\n <img decoding=\"async\" id=\"snakeAvatar\" src=\"\" alt=\"avatar\">\n <\/div>\n <div class=\"snake-user-info\">\n <div id=\"snakeUserName\" class=\"snake-user-name\">\u0413\u043e\u0441\u0442\u044c<\/div>\n <div id=\"snakeUserUsername\" class=\"snake-user-username\"><\/div>\n <\/div>\n <div class=\"snake-scores\">\n <div>\u0421\u0447\u0451\u0442: <span id=\"snakeScore\">0<\/span><\/div>\n <div>\u0420\u0435\u043a\u043e\u0440\u0434: <span id=\"snakeBestScore\">0<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"snake-card\">\n <div class=\"snake-top-row\">\n <div class=\"snake-status\" id=\"snakeStatus\">\u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c<\/div>\n <div class=\"snake-game-over snake-hidden\" id=\"snakeGameOver\">\u0418\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430<\/div>\n <\/div>\n\n <div class=\"snake-canvas-wrap\">\n <canvas id=\"snakeCanvas\" width=\"360\" height=\"360\"><\/canvas>\n <\/div>\n\n <div class=\"snake-controls\">\n <div class=\"snake-btn-empty\"><\/div>\n\n <button class=\"snake-btn\" id=\"btnUp\" aria-label=\"\u0412\u0432\u0435\u0440\u0445\">\n <span>\u25b2<\/span>\n <\/button>\n\n <div class=\"snake-btn-empty\"><\/div>\n\n <button class=\"snake-btn\" id=\"btnLeft\" aria-label=\"\u0412\u043b\u0435\u0432\u043e\">\n <span>\u25c0<\/span>\n <\/button>\n\n <button class=\"snake-btn\" id=\"btnDown\" aria-label=\"\u0412\u043d\u0438\u0437\">\n <span>\u25bc<\/span>\n <\/button>\n\n <button class=\"snake-btn\" id=\"btnRight\" aria-label=\"\u0412\u043f\u0440\u0430\u0432\u043e\">\n <span>\u25b6<\/span>\n <\/button>\n <\/div>\n\n <button class=\"snake-main-btn\" id=\"snakeStartBtn\">\u0421\u0442\u0430\u0440\u0442<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ ===== \u0418\u041d\u0418\u0426\u0418\u0410\u041b\u0418\u0417\u0410\u0426\u0418\u042f TELEGRAM WEBAPP =====\n let tg = null;\n let tgUser = null;\n\n try {\n if (window.Telegram && window.Telegram.WebApp) {\n tg = window.Telegram.WebApp;\n tg.ready();\n tg.expand(); \/\/ \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d\n tgUser = tg.initDataUnsafe && tg.initDataUnsafe.user ? tg.initDataUnsafe.user : null;\n }\n } catch (e) {\n console.warn('Telegram WebApp init error', e);\n }\n\n const avatarImg = document.getElementById('snakeAvatar');\n const userNameEl = document.getElementById('snakeUserName');\n const userUsernameEl = document.getElementById('snakeUserUsername');\n const scoreEl = document.getElementById('snakeScore');\n const bestScoreEl = document.getElementById('snakeBestScore');\n const statusEl = document.getElementById('snakeStatus');\n const gameOverEl = document.getElementById('snakeGameOver');\n const startBtn = document.getElementById('snakeStartBtn');\n\n \/\/ \u041f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\n let userIdForScore = 'guest';\n\n if (tgUser) {\n const fullName = [tgUser.first_name, tgUser.last_name].filter(Boolean).join(' ');\n userNameEl.textContent = fullName || '\u0418\u0433\u0440\u043e\u043a';\n userUsernameEl.textContent = tgUser.username ? '@' + tgUser.username : 'ID: ' + tgUser.id;\n if (tgUser.photo_url) {\n avatarImg.src = tgUser.photo_url;\n } else {\n avatarImg.src = 'https:\/\/via.placeholder.com\/80x80\/111827\/ffffff?text=TG';\n }\n userIdForScore = String(tgUser.id);\n } else {\n \/\/ \u0424\u043e\u043b\u043b\u0431\u044d\u043a, \u0435\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u0438 \u043d\u0435 \u0438\u0437 \u0422\u0413 (\u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435)\n userNameEl.textContent = '\u0413\u043e\u0441\u0442\u044c';\n userUsernameEl.textContent = '\u041e\u0442\u043a\u0440\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 Telegram Mini App';\n avatarImg.src = 'https:\/\/via.placeholder.com\/80x80\/111827\/ffffff?text=TG';\n }\n\n \/\/ \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043f\u043e user_id\n const BEST_KEY = 'snake_best_score_' + userIdForScore;\n let bestScore = Number(localStorage.getItem(BEST_KEY) || '0');\n bestScoreEl.textContent = bestScore;\n\n \/\/ ===== \u041b\u041e\u0413\u0418\u041a\u0410 \u0418\u0413\u0420\u042b =====\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n\n const tileCount = 18; \/\/ 18 x 18 \u043a\u043b\u0435\u0442\u043e\u043a\n const tileSize = canvas.width \/ tileCount;\n\n let gameInterval = null;\n let snake = [];\n let direction = { x: 1, y: 0 }; \/\/ \u0432\u043f\u0440\u0430\u0432\u043e\n let food = { x: 5, y: 5 };\n let score = 0;\n let isRunning = false;\n\n function resetGame() {\n snake = [\n { x: 8, y: 9 },\n { x: 7, y: 9 },\n { x: 6, y: 9 }\n ];\n direction = { x: 1, y: 0 };\n placeFood();\n score = 0;\n scoreEl.textContent = score;\n gameOverEl.classList.add('snake-hidden');\n statusEl.textContent = '\u0418\u0433\u0440\u0430 \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u2014 \u043d\u0435 \u0432\u0440\u0435\u0436\u044c\u0441\u044f \u0432 \u0441\u0442\u0435\u043d\u0443 \u0438\u043b\u0438 \u0441\u0435\u0431\u044f!';\n }\n\n function placeFood() {\n \/\/ \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0430\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430\u044f \u043a\u043b\u0435\u0442\u043a\u0430\n let valid = false;\n while (!valid) {\n const fx = Math.floor(Math.random() * tileCount);\n const fy = Math.floor(Math.random() * tileCount);\n valid = !snake.some(seg => seg.x === fx && seg.y === fy);\n if (valid) {\n food.x = fx;\n food.y = fy;\n }\n }\n }\n\n function draw() {\n \/\/ \u0444\u043e\u043d\n ctx.fillStyle = '#020617';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ \u0435\u0434\u0430\n ctx.fillStyle = '#22c55e';\n ctx.beginPath();\n ctx.roundRect(food.x * tileSize + 3, food.y * tileSize + 3, tileSize - 6, tileSize - 6, 4);\n ctx.fill();\n\n \/\/ \u0437\u043c\u0435\u0439\u043a\u0430\n snake.forEach((seg, index) => {\n ctx.fillStyle = index === 0 ? '#22d3ee' : '#0ea5e9';\n ctx.beginPath();\n ctx.roundRect(seg.x * tileSize + 2, seg.y * tileSize + 2, tileSize - 4, tileSize - 4, 4);\n ctx.fill();\n });\n }\n\n function tick() {\n const head = snake[0];\n const newHead = {\n x: head.x + direction.x,\n y: head.y + direction.y\n };\n\n \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439\n if (\n newHead.x < 0 || newHead.x >= tileCount ||\n newHead.y < 0 || newHead.y >= tileCount\n ) {\n return endGame();\n }\n\n \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u0431\u043e\u0439\n if (snake.some(seg => seg.x === newHead.x && seg.y === newHead.y)) {\n return endGame();\n }\n\n \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0433\u043e\u043b\u043e\u0432\u0443\n snake.unshift(newHead);\n\n \/\/ \u0435\u0441\u043b\u0438 \u0441\u044a\u0435\u043b\u0438 \u0435\u0434\u0443\n if (newHead.x === food.x && newHead.y === food.y) {\n score += 10;\n scoreEl.textContent = score;\n if (score > bestScore) {\n bestScore = score;\n bestScoreEl.textContent = bestScore;\n localStorage.setItem(BEST_KEY, String(bestScore));\n }\n placeFood();\n } else {\n \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0445\u0432\u043e\u0441\u0442\n snake.pop();\n }\n\n draw();\n }\n\n function startGame() {\n if (isRunning) return;\n resetGame();\n isRunning = true;\n startBtn.textContent = '\u0418\u0434\u0451\u0442 \u0438\u0433\u0440\u0430...';\n startBtn.disabled = true;\n gameInterval = setInterval(tick, 120);\n draw();\n }\n\n function endGame() {\n if (!isRunning) return;\n isRunning = false;\n clearInterval(gameInterval);\n gameInterval = null;\n gameOverEl.classList.remove('snake-hidden');\n statusEl.textContent = '\u0421\u0447\u0451\u0442: ' + score + ' | \u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0441\u044b\u0433\u0440\u0430\u0442\u044c \u0435\u0449\u0451 \u0440\u0430\u0437';\n startBtn.textContent = '\u0421\u044b\u0433\u0440\u0430\u0442\u044c \u0435\u0449\u0451 \u0440\u0430\u0437';\n startBtn.disabled = false;\n\n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0448\u044c \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0432 WP)\n sendScoreToServer(score, bestScore);\n }\n\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\n function setDirection(dx, dy) {\n \/\/ \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442 \u043d\u0430 180\u00b0\n if (snake.length > 1) {\n if (dx === -direction.x && dy === -direction.y) {\n return;\n }\n }\n direction = { x: dx, y: dy };\n }\n\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\n document.getElementById('btnUp').addEventListener('click', () => setDirection(0, -1));\n document.getElementById('btnDown').addEventListener('click', () => setDirection(0, 1));\n document.getElementById('btnLeft').addEventListener('click', () => setDirection(-1, 0));\n document.getElementById('btnRight').addEventListener('click', () => setDirection(1, 0));\n\n \/\/ \u041a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 (\u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435)\n window.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowUp':\n setDirection(0, -1);\n break;\n case 'ArrowDown':\n setDirection(0, 1);\n break;\n case 'ArrowLeft':\n setDirection(-1, 0);\n break;\n case 'ArrowRight':\n setDirection(1, 0);\n break;\n }\n });\n\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0442\u0430\u0440\u0442\u0430\n startBtn.addEventListener('click', startGame);\n\n draw();\n statusEl.textContent = '\u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c';\n\n \/\/ ===== \u041e\u0422\u041f\u0420\u0410\u0412\u041a\u0410 \u0421\u0427\u0401\u0422\u0410 \u041d\u0410 \u0421\u0415\u0420\u0412\u0415\u0420 =====\n function sendScoreToServer(scoreValue, bestScoreValue) {\n \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u043d\u0443\u0442\u044c REST \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 WordPress\n \/\/ \u041f\u0440\u0438\u043c\u0435\u0440: \/wp-json\/snake\/v1\/score\n \/\/ \u0422\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u0448\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 register_rest_route \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u0435\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0442\u0435\u043c\u044b.\n const payload = {\n user_id: tgUser ? tgUser.id : null,\n username: tgUser ? tgUser.username : null,\n first_name: tgUser ? tgUser.first_name : null,\n last_name: tgUser ? tgUser.last_name : null,\n score: scoreValue,\n best_score: bestScoreValue,\n ts: Date.now()\n };\n\n \/\/ \u0415\u0441\u043b\u0438 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u043b\u0447\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u043c\n const ENDPOINT_URL = '\/wp-json\/snake\/v1\/score';\n\n try {\n fetch(ENDPOINT_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(payload)\n }).catch((err) => {\n console.warn('Score send error:', err);\n });\n } catch (e) {\n console.warn('Score send exception:', e);\n }\n }\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Snake Game \u0413\u043e\u0441\u0442\u044c \u0421\u0447\u0451\u0442: 0 \u0420\u0435\u043a\u043e\u0440\u0434: 0 \u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c \u0418\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430 \u25b2 \u25c0 \u25bc \u25b6 \u0421\u0442\u0430\u0440\u0442<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1447","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/comments?post=1447"}],"version-history":[{"count":4,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/media?parent=1447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n Snake Game<\/title>\n\n \n <script src=\"https:\/\/telegram.org\/js\/telegram-web-app.js\"><\/script>\n\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n background: #050816;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n }\n\n .snake-app {\n width: 100%;\n max-width: 420px;\n margin: 0 auto;\n padding: 12px;\n }\n\n .snake-header {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n gap: 10px;\n }\n\n .snake-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #222;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .snake-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .snake-user-info {\n flex: 1;\n min-width: 0;\n }\n\n .snake-user-name {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .snake-user-username {\n font-size: 12px;\n opacity: 0.7;\n }\n\n .snake-scores {\n font-size: 13px;\n text-align: right;\n }\n\n .snake-card {\n background: rgba(15, 23, 42, 0.95);\n border-radius: 16px;\n padding: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n }\n\n .snake-top-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .snake-status {\n font-size: 13px;\n opacity: 0.8;\n }\n\n .snake-canvas-wrap {\n display: flex;\n justify-content: center;\n margin-bottom: 10px;\n }\n\n canvas#snakeCanvas {\n border-radius: 10px;\n background: #000;\n image-rendering: pixelated;\n }\n\n .snake-controls {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, 44px);\n gap: 8px;\n margin-top: 4px;\n }\n\n .snake-btn {\n border: none;\n border-radius: 12px;\n background: #1f2937;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .snake-btn:active {\n transform: scale(0.96);\n background: #111827;\n }\n\n .snake-btn span {\n pointer-events: none;\n }\n\n .snake-btn-empty {\n background: transparent;\n pointer-events: none;\n }\n\n .snake-main-btn {\n width: 100%;\n margin-top: 10px;\n padding: 10px;\n border-radius: 999px;\n border: none;\n background: linear-gradient(135deg, #22c55e, #22d3ee);\n color: #000;\n font-weight: 700;\n font-size: 14px;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n }\n\n .snake-main-btn:active {\n transform: translateY(1px);\n filter: brightness(0.9);\n }\n\n .snake-hidden {\n display: none !important;\n }\n\n .snake-game-over {\n font-size: 13px;\n margin-top: 4px;\n color: #f97373;\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"snake-app\">\n\n <div class=\"snake-header\">\n <div class=\"snake-avatar\">\n <img decoding=\"async\" id=\"snakeAvatar\" src=\"\" alt=\"avatar\">\n <\/div>\n <div class=\"snake-user-info\">\n <div id=\"snakeUserName\" class=\"snake-user-name\">\u0413\u043e\u0441\u0442\u044c<\/div>\n <div id=\"snakeUserUsername\" class=\"snake-user-username\"><\/div>\n <\/div>\n <div class=\"snake-scores\">\n <div>\u0421\u0447\u0451\u0442: <span id=\"snakeScore\">0<\/span><\/div>\n <div>\u0420\u0435\u043a\u043e\u0440\u0434: <span id=\"snakeBestScore\">0<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"snake-card\">\n <div class=\"snake-top-row\">\n <div class=\"snake-status\" id=\"snakeStatus\">\u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c<\/div>\n <div class=\"snake-game-over snake-hidden\" id=\"snakeGameOver\">\u0418\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430<\/div>\n <\/div>\n\n <div class=\"snake-canvas-wrap\">\n <canvas id=\"snakeCanvas\" width=\"360\" height=\"360\"><\/canvas>\n <\/div>\n\n <div class=\"snake-controls\">\n <div class=\"snake-btn-empty\"><\/div>\n\n <button class=\"snake-btn\" id=\"btnUp\" aria-label=\"\u0412\u0432\u0435\u0440\u0445\">\n <span>\u25b2<\/span>\n <\/button>\n\n <div class=\"snake-btn-empty\"><\/div>\n\n <button class=\"snake-btn\" id=\"btnLeft\" aria-label=\"\u0412\u043b\u0435\u0432\u043e\">\n <span>\u25c0<\/span>\n <\/button>\n\n <button class=\"snake-btn\" id=\"btnDown\" aria-label=\"\u0412\u043d\u0438\u0437\">\n <span>\u25bc<\/span>\n <\/button>\n\n <button class=\"snake-btn\" id=\"btnRight\" aria-label=\"\u0412\u043f\u0440\u0430\u0432\u043e\">\n <span>\u25b6<\/span>\n <\/button>\n <\/div>\n\n <button class=\"snake-main-btn\" id=\"snakeStartBtn\">\u0421\u0442\u0430\u0440\u0442<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ ===== \u0418\u041d\u0418\u0426\u0418\u0410\u041b\u0418\u0417\u0410\u0426\u0418\u042f TELEGRAM WEBAPP =====\n let tg = null;\n let tgUser = null;\n\n try {\n if (window.Telegram && window.Telegram.WebApp) {\n tg = window.Telegram.WebApp;\n tg.ready();\n tg.expand(); \/\/ \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d\n tgUser = tg.initDataUnsafe && tg.initDataUnsafe.user ? tg.initDataUnsafe.user : null;\n }\n } catch (e) {\n console.warn('Telegram WebApp init error', e);\n }\n\n const avatarImg = document.getElementById('snakeAvatar');\n const userNameEl = document.getElementById('snakeUserName');\n const userUsernameEl = document.getElementById('snakeUserUsername');\n const scoreEl = document.getElementById('snakeScore');\n const bestScoreEl = document.getElementById('snakeBestScore');\n const statusEl = document.getElementById('snakeStatus');\n const gameOverEl = document.getElementById('snakeGameOver');\n const startBtn = document.getElementById('snakeStartBtn');\n\n \/\/ \u041f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\n let userIdForScore = 'guest';\n\n if (tgUser) {\n const fullName = [tgUser.first_name, tgUser.last_name].filter(Boolean).join(' ');\n userNameEl.textContent = fullName || '\u0418\u0433\u0440\u043e\u043a';\n userUsernameEl.textContent = tgUser.username ? '@' + tgUser.username : 'ID: ' + tgUser.id;\n if (tgUser.photo_url) {\n avatarImg.src = tgUser.photo_url;\n } else {\n avatarImg.src = 'https:\/\/via.placeholder.com\/80x80\/111827\/ffffff?text=TG';\n }\n userIdForScore = String(tgUser.id);\n } else {\n \/\/ \u0424\u043e\u043b\u043b\u0431\u044d\u043a, \u0435\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u043b\u0438 \u043d\u0435 \u0438\u0437 \u0422\u0413 (\u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435)\n userNameEl.textContent = '\u0413\u043e\u0441\u0442\u044c';\n userUsernameEl.textContent = '\u041e\u0442\u043a\u0440\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 Telegram Mini App';\n avatarImg.src = 'https:\/\/via.placeholder.com\/80x80\/111827\/ffffff?text=TG';\n }\n\n \/\/ \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043f\u043e user_id\n const BEST_KEY = 'snake_best_score_' + userIdForScore;\n let bestScore = Number(localStorage.getItem(BEST_KEY) || '0');\n bestScoreEl.textContent = bestScore;\n\n \/\/ ===== \u041b\u041e\u0413\u0418\u041a\u0410 \u0418\u0413\u0420\u042b =====\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n\n const tileCount = 18; \/\/ 18 x 18 \u043a\u043b\u0435\u0442\u043e\u043a\n const tileSize = canvas.width \/ tileCount;\n\n let gameInterval = null;\n let snake = [];\n let direction = { x: 1, y: 0 }; \/\/ \u0432\u043f\u0440\u0430\u0432\u043e\n let food = { x: 5, y: 5 };\n let score = 0;\n let isRunning = false;\n\n function resetGame() {\n snake = [\n { x: 8, y: 9 },\n { x: 7, y: 9 },\n { x: 6, y: 9 }\n ];\n direction = { x: 1, y: 0 };\n placeFood();\n score = 0;\n scoreEl.textContent = score;\n gameOverEl.classList.add('snake-hidden');\n statusEl.textContent = '\u0418\u0433\u0440\u0430 \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u2014 \u043d\u0435 \u0432\u0440\u0435\u0436\u044c\u0441\u044f \u0432 \u0441\u0442\u0435\u043d\u0443 \u0438\u043b\u0438 \u0441\u0435\u0431\u044f!';\n }\n\n function placeFood() {\n \/\/ \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0430\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430\u044f \u043a\u043b\u0435\u0442\u043a\u0430\n let valid = false;\n while (!valid) {\n const fx = Math.floor(Math.random() * tileCount);\n const fy = Math.floor(Math.random() * tileCount);\n valid = !snake.some(seg => seg.x === fx && seg.y === fy);\n if (valid) {\n food.x = fx;\n food.y = fy;\n }\n }\n }\n\n function draw() {\n \/\/ \u0444\u043e\u043d\n ctx.fillStyle = '#020617';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ \u0435\u0434\u0430\n ctx.fillStyle = '#22c55e';\n ctx.beginPath();\n ctx.roundRect(food.x * tileSize + 3, food.y * tileSize + 3, tileSize - 6, tileSize - 6, 4);\n ctx.fill();\n\n \/\/ \u0437\u043c\u0435\u0439\u043a\u0430\n snake.forEach((seg, index) => {\n ctx.fillStyle = index === 0 ? '#22d3ee' : '#0ea5e9';\n ctx.beginPath();\n ctx.roundRect(seg.x * tileSize + 2, seg.y * tileSize + 2, tileSize - 4, tileSize - 4, 4);\n ctx.fill();\n });\n }\n\n function tick() {\n const head = snake[0];\n const newHead = {\n x: head.x + direction.x,\n y: head.y + direction.y\n };\n\n \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439\n if (\n newHead.x < 0 || newHead.x >= tileCount ||\n newHead.y < 0 || newHead.y >= tileCount\n ) {\n return endGame();\n }\n\n \/\/ \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u0431\u043e\u0439\n if (snake.some(seg => seg.x === newHead.x && seg.y === newHead.y)) {\n return endGame();\n }\n\n \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0433\u043e\u043b\u043e\u0432\u0443\n snake.unshift(newHead);\n\n \/\/ \u0435\u0441\u043b\u0438 \u0441\u044a\u0435\u043b\u0438 \u0435\u0434\u0443\n if (newHead.x === food.x && newHead.y === food.y) {\n score += 10;\n scoreEl.textContent = score;\n if (score > bestScore) {\n bestScore = score;\n bestScoreEl.textContent = bestScore;\n localStorage.setItem(BEST_KEY, String(bestScore));\n }\n placeFood();\n } else {\n \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0445\u0432\u043e\u0441\u0442\n snake.pop();\n }\n\n draw();\n }\n\n function startGame() {\n if (isRunning) return;\n resetGame();\n isRunning = true;\n startBtn.textContent = '\u0418\u0434\u0451\u0442 \u0438\u0433\u0440\u0430...';\n startBtn.disabled = true;\n gameInterval = setInterval(tick, 120);\n draw();\n }\n\n function endGame() {\n if (!isRunning) return;\n isRunning = false;\n clearInterval(gameInterval);\n gameInterval = null;\n gameOverEl.classList.remove('snake-hidden');\n statusEl.textContent = '\u0421\u0447\u0451\u0442: ' + score + ' | \u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0441\u044b\u0433\u0440\u0430\u0442\u044c \u0435\u0449\u0451 \u0440\u0430\u0437';\n startBtn.textContent = '\u0421\u044b\u0433\u0440\u0430\u0442\u044c \u0435\u0449\u0451 \u0440\u0430\u0437';\n startBtn.disabled = false;\n\n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0448\u044c \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0432 WP)\n sendScoreToServer(score, bestScore);\n }\n\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c\n function setDirection(dx, dy) {\n \/\/ \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442 \u043d\u0430 180\u00b0\n if (snake.length > 1) {\n if (dx === -direction.x && dy === -direction.y) {\n return;\n }\n }\n direction = { x: dx, y: dy };\n }\n\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\n document.getElementById('btnUp').addEventListener('click', () => setDirection(0, -1));\n document.getElementById('btnDown').addEventListener('click', () => setDirection(0, 1));\n document.getElementById('btnLeft').addEventListener('click', () => setDirection(-1, 0));\n document.getElementById('btnRight').addEventListener('click', () => setDirection(1, 0));\n\n \/\/ \u041a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 (\u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435)\n window.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowUp':\n setDirection(0, -1);\n break;\n case 'ArrowDown':\n setDirection(0, 1);\n break;\n case 'ArrowLeft':\n setDirection(-1, 0);\n break;\n case 'ArrowRight':\n setDirection(1, 0);\n break;\n }\n });\n\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0442\u0430\u0440\u0442\u0430\n startBtn.addEventListener('click', startGame);\n\n draw();\n statusEl.textContent = '\u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c';\n\n \/\/ ===== \u041e\u0422\u041f\u0420\u0410\u0412\u041a\u0410 \u0421\u0427\u0401\u0422\u0410 \u041d\u0410 \u0421\u0415\u0420\u0412\u0415\u0420 =====\n function sendScoreToServer(scoreValue, bestScoreValue) {\n \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u043d\u0443\u0442\u044c REST \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 WordPress\n \/\/ \u041f\u0440\u0438\u043c\u0435\u0440: \/wp-json\/snake\/v1\/score\n \/\/ \u0422\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u0448\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 register_rest_route \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u0435\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0442\u0435\u043c\u044b.\n const payload = {\n user_id: tgUser ? tgUser.id : null,\n username: tgUser ? tgUser.username : null,\n first_name: tgUser ? tgUser.first_name : null,\n last_name: tgUser ? tgUser.last_name : null,\n score: scoreValue,\n best_score: bestScoreValue,\n ts: Date.now()\n };\n\n \/\/ \u0415\u0441\u043b\u0438 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u043b\u0447\u0430 \u0432\u044b\u0445\u043e\u0434\u0438\u043c\n const ENDPOINT_URL = '\/wp-json\/snake\/v1\/score';\n\n try {\n fetch(ENDPOINT_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(payload)\n }).catch((err) => {\n console.warn('Score send error:', err);\n });\n } catch (e) {\n console.warn('Score send exception:', e);\n }\n }\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Snake Game \u0413\u043e\u0441\u0442\u044c \u0421\u0447\u0451\u0442: 0 \u0420\u0435\u043a\u043e\u0440\u0434: 0 \u041d\u0430\u0436\u043c\u0438 \u00ab\u0421\u0442\u0430\u0440\u0442\u00bb, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c \u0418\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430 \u25b2 \u25c0 \u25bc \u25b6 \u0421\u0442\u0430\u0440\u0442<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1447","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/comments?post=1447"}],"version-history":[{"count":4,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/pages\/1447\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/vool-studio.com\/en\/wp-json\/wp\/v2\/media?parent=1447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}