\u05de\u05e9\u05d7\u05e7 \u05d4\u05e0\u05d7\u05e9<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #4CAF50;\r\n --secondary-color: #2E7D32;\r\n --background-color: #E8F5E9;\r\n --text-color: #212121;\r\n --apple-color: #F44336;\r\n --border-color: #81C784;\r\n }\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n }\r\n #game-container {\r\n text-align: center;\r\n background-color: white;\r\n padding: 2rem;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n #game-container:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n }\r\n #game-board {\r\n width: 400px;\r\n height: 400px;\r\n border: 2px solid var(--border-color);\r\n position: relative;\r\n background-color: var(--background-color);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\r\n margin: 1rem auto;\r\n }\r\n .snake-part {\r\n width: 15px;\r\n height: 15px;\r\n background-color: var(--secondary-color);\r\n position: absolute;\r\n border-radius: 50%;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n transition: all 0.1s ease;\r\n }\r\n .snake-part:first-child {\r\n background-color: var(--primary-color);\r\n }\r\n .apple {\r\n width: 15px;\r\n height: 15px;\r\n background-color: var(--apple-color);\r\n position: absolute;\r\n border-radius: 50%;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n }\r\n #score-board {\r\n font-size: 1.5rem;\r\n margin-bottom: 1rem;\r\n color: var(--secondary-color);\r\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);\r\n }\r\n button {\r\n font-size: 1rem;\r\n margin: 0.5rem;\r\n padding: 0.75rem 1.5rem;\r\n cursor: pointer;\r\n background-color: var(--primary-color);\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: bold;\r\n }\r\n button:hover {\r\n background-color: var(--secondary-color);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n button:active {\r\n transform: translateY(0);\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\r\n }\r\n #mobile-controls {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-gap: 5px;\r\n margin-top: 1rem;\r\n justify-content: center;\r\n width: 160px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .arrow-btn {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 24px;\r\n background-color: var(--primary-color);\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n #up-btn {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n #right-btn {\r\n grid-column: 1;\r\n grid-row: 2;\r\n }\r\n #down-btn {\r\n grid-column: 2;\r\n grid-row: 3;\r\n }\r\n #left-btn {\r\n grid-column: 3;\r\n grid-row: 2;\r\n }\r\n @media (max-width: 600px) {\r\n #game-container {\r\n padding: 1rem;\r\n }\r\n #game-board {\r\n width: 300px;\r\n height: 300px;\r\n }\r\n button {\r\n font-size: 0.9rem;\r\n padding: 0.6rem 1.2rem;\r\n }\r\n }\r\n @media (max-width: 400px) {\r\n #game-board {\r\n width: 250px;\r\n height: 250px;\r\n }\r\n .snake-part, .apple {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n }\r\n @keyframes pulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n .apple {\r\n animation: pulse 1s infinite;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game-container\">\r\n <div id=\"score-board\">\u05e0\u05d9\u05e7\u05d5\u05d3: <span id=\"score\">0<\/span> | \u05e9\u05d9\u05d0: <span id=\"high-score\">0<\/span><\/div>\r\n <div id=\"game-board\"><\/div>\r\n <div id=\"mobile-controls\">\r\n <button class=\"arrow-btn\" id=\"up-btn\">\u2191<\/button>\r\n <button class=\"arrow-btn\" id=\"right-btn\">\u2192<\/button>\r\n <button class=\"arrow-btn\" id=\"down-btn\">\u2193<\/button>\r\n <button class=\"arrow-btn\" id=\"left-btn\">\u2190<\/button>\r\n <\/div>\r\n <button id=\"start-btn\">\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7<\/button>\r\n <button id=\"pause-btn\">\u05d4\u05e9\u05d4\u05d4<\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const BOARD_WIDTH = 20;\r\n const BOARD_HEIGHT = 20;\r\n let BLOCK_SIZE = 20;\r\n\r\n \/\/ Game variables\r\n let snake = [{ x: 10, y: 10 }];\r\n let direction = 'right';\r\n let apple = {};\r\n let score = 0;\r\n let highScore = 0;\r\n let gameInterval;\r\n let isPaused = false;\r\n let isGameOver = false;\r\n\r\n \/\/ DOM elements\r\n const gameBoard = document.getElementById('game-board');\r\n const scoreElement = document.getElementById('score');\r\n const highScoreElement = document.getElementById('high-score');\r\n const startButton = document.getElementById('start-btn');\r\n const pauseButton = document.getElementById('pause-btn');\r\n\r\n \/\/ Initialize the game\r\n function initGame() {\r\n snake = [{ x: 10, y: 10 }];\r\n direction = 'right';\r\n score = 0;\r\n isGameOver = false;\r\n isPaused = false;\r\n createApple();\r\n updateScore();\r\n drawSnake();\r\n drawApple();\r\n if (gameInterval) clearInterval(gameInterval);\r\n gameInterval = setInterval(gameLoop, 200);\r\n startButton.textContent = '\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05de\u05d7\u05d3\u05e9';\r\n pauseButton.textContent = '\u05d4\u05e9\u05d4\u05d4';\r\n }\r\n\r\n \/\/ Create a new apple\r\n function createApple() {\r\n apple = {\r\n x: Math.floor(Math.random() * BOARD_WIDTH),\r\n y: Math.floor(Math.random() * BOARD_HEIGHT)\r\n };\r\n }\r\n\r\n \/\/ Draw the snake\r\n function drawSnake() {\r\n gameBoard.innerHTML = '';\r\n snake.forEach((part, index) => {\r\n const snakePart = document.createElement('div');\r\n snakePart.className = 'snake-part';\r\n snakePart.style.left = part.x * BLOCK_SIZE + 'px';\r\n snakePart.style.top = part.y * BLOCK_SIZE + 'px';\r\n if (index === 0) {\r\n snakePart.style.backgroundColor = 'var(--primary-color)';\r\n }\r\n gameBoard.appendChild(snakePart);\r\n });\r\n }\r\n\r\n \/\/ Draw the apple\r\n function drawApple() {\r\n const appleElement = document.createElement('div');\r\n appleElement.className = 'apple';\r\n appleElement.style.left = apple.x * BLOCK_SIZE + 'px';\r\n appleElement.style.top = apple.y * BLOCK_SIZE + 'px';\r\n gameBoard.appendChild(appleElement);\r\n }\r\n\r\n \/\/ Move the snake\r\n function moveSnake() {\r\n const head = { ...snake[0] };\r\n switch (direction) {\r\n case 'up': head.y--; break;\r\n case 'down': head.y++; break;\r\n case 'left': head.x--; break;\r\n case 'right': head.x++; break;\r\n }\r\n\r\n \/\/ Check for wall collision\r\n if (head.x < 0) head.x = BOARD_WIDTH - 1;\r\n if (head.x >= BOARD_WIDTH) head.x = 0;\r\n if (head.y < 0) head.y = BOARD_HEIGHT - 1;\r\n if (head.y >= BOARD_HEIGHT) head.y = 0;\r\n\r\n \/\/ Check for self collision\r\n if (snake.some(part => part.x === head.x && part.y === head.y)) {\r\n gameOver();\r\n return;\r\n }\r\n\r\n snake.unshift(head);\r\n\r\n \/\/ Check for apple collision\r\n if (head.x === apple.x && head.y === apple.y) {\r\n score += 10;\r\n updateScore();\r\n createApple();\r\n } else {\r\n snake.pop();\r\n }\r\n }\r\n\r\n \/\/ Update score\r\n function updateScore() {\r\n scoreElement.textContent = score;\r\n if (score > highScore) {\r\n highScore = score;\r\n highScoreElement.textContent = highScore;\r\n localStorage.setItem('snakeHighScore', highScore);\r\n }\r\n }\r\n\r\n \/\/ Game over\r\n function gameOver() {\r\n isGameOver = true;\r\n clearInterval(gameInterval);\r\n alert('Game Over! Your score: ' + score);\r\n startButton.textContent = '\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05d7\u05d3\u05e9';\r\n }\r\n\r\n \/\/ Game loop\r\n function gameLoop() {\r\n if (!isPaused && !isGameOver) {\r\n moveSnake();\r\n drawSnake();\r\n drawApple();\r\n }\r\n }\r\n\r\n \/\/ Start game\r\n function startGame() {\r\n clearInterval(gameInterval);\r\n initGame();\r\n }\r\n\r\n \/\/ Pause game\r\n function togglePause() {\r\n isPaused = !isPaused;\r\n pauseButton.textContent = isPaused ? '\u05d4\u05de\u05e9\u05da' : '\u05d4\u05e9\u05d4\u05d4';\r\n if (isPaused) {\r\n clearInterval(gameInterval);\r\n } else {\r\n gameInterval = setInterval(gameLoop, 200);\r\n }\r\n }\r\n\r\n \/\/ Change direction\r\n function changeDirection(newDirection) {\r\n const opposites = { up: 'down', down: 'up', left: 'right', right: 'left' };\r\n if (newDirection !== opposites[direction]) {\r\n direction = newDirection;\r\n }\r\n }\r\n\r\n \/\/ Event listeners\r\n document.addEventListener('keydown', (e) => {\r\n switch (e.key) {\r\n case 'ArrowUp': changeDirection('up'); break;\r\n case 'ArrowDown': changeDirection('down'); break;\r\n case 'ArrowLeft': changeDirection('left'); break;\r\n case 'ArrowRight': changeDirection('right'); break;\r\n }\r\n });\r\n\r\n startButton.addEventListener('click', startGame);\r\n pauseButton.addEventListener('click', togglePause);\r\n\r\n \/\/ Mobile control buttons\r\n document.getElementById('up-btn').addEventListener('click', () => changeDirection('up'));\r\n document.getElementById('down-btn').addEventListener('click', () => changeDirection('down'));\r\n document.getElementById('left-btn').addEventListener('click', () => changeDirection('left'));\r\n document.getElementById('right-btn').addEventListener('click', () => changeDirection('right'));\r\n\r\n \/\/ Load high score from local storage\r\n highScore = localStorage.getItem('snakeHighScore') || 0;\r\n highScoreElement.textContent = highScore;\r\n\r\n \/\/ Adjust game board size on window resize\r\n function adjustGameBoard() {\r\n const isMobile = window.innerWidth <= 600;\r\n if (isMobile) {\r\n const boardSize = Math.min(window.innerWidth - 40, 300);\r\n gameBoard.style.width = boardSize + 'px';\r\n gameBoard.style.height = boardSize + 'px';\r\n BLOCK_SIZE = boardSize \/ BOARD_WIDTH;\r\n } else {\r\n gameBoard.style.width = '400px';\r\n gameBoard.style.height = '400px';\r\n BLOCK_SIZE = 20;\r\n }\r\n drawSnake();\r\n drawApple();\r\n }\r\n\r\n window.addEventListener('resize', adjustGameBoard);\r\n adjustGameBoard(); \/\/ Initial adjustment\r\n\r\n \/\/ Initialize the game\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05de\u05e9\u05d7\u05e7 \u05d4\u05e0\u05d7\u05e9 \u05e0\u05d9\u05e7\u05d5\u05d3: 0 | \u05e9\u05d9\u05d0: 0 \u2191 \u2192 \u2193 \u2190 \u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05d4\u05e9\u05d4\u05d4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7005","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7005"}],"version-history":[{"count":82,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005\/revisions"}],"predecessor-version":[{"id":7204,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005\/revisions\/7204"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u05de\u05e9\u05d7\u05e7 \u05d4\u05e0\u05d7\u05e9<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #4CAF50;\r\n --secondary-color: #2E7D32;\r\n --background-color: #E8F5E9;\r\n --text-color: #212121;\r\n --apple-color: #F44336;\r\n --border-color: #81C784;\r\n }\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n }\r\n #game-container {\r\n text-align: center;\r\n background-color: white;\r\n padding: 2rem;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n #game-container:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n }\r\n #game-board {\r\n width: 400px;\r\n height: 400px;\r\n border: 2px solid var(--border-color);\r\n position: relative;\r\n background-color: var(--background-color);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\r\n margin: 1rem auto;\r\n }\r\n .snake-part {\r\n width: 15px;\r\n height: 15px;\r\n background-color: var(--secondary-color);\r\n position: absolute;\r\n border-radius: 50%;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n transition: all 0.1s ease;\r\n }\r\n .snake-part:first-child {\r\n background-color: var(--primary-color);\r\n }\r\n .apple {\r\n width: 15px;\r\n height: 15px;\r\n background-color: var(--apple-color);\r\n position: absolute;\r\n border-radius: 50%;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n }\r\n #score-board {\r\n font-size: 1.5rem;\r\n margin-bottom: 1rem;\r\n color: var(--secondary-color);\r\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);\r\n }\r\n button {\r\n font-size: 1rem;\r\n margin: 0.5rem;\r\n padding: 0.75rem 1.5rem;\r\n cursor: pointer;\r\n background-color: var(--primary-color);\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n transition: all 0.3s ease;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: bold;\r\n }\r\n button:hover {\r\n background-color: var(--secondary-color);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n button:active {\r\n transform: translateY(0);\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\r\n }\r\n #mobile-controls {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-gap: 5px;\r\n margin-top: 1rem;\r\n justify-content: center;\r\n width: 160px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .arrow-btn {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 24px;\r\n background-color: var(--primary-color);\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n #up-btn {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n #right-btn {\r\n grid-column: 1;\r\n grid-row: 2;\r\n }\r\n #down-btn {\r\n grid-column: 2;\r\n grid-row: 3;\r\n }\r\n #left-btn {\r\n grid-column: 3;\r\n grid-row: 2;\r\n }\r\n @media (max-width: 600px) {\r\n #game-container {\r\n padding: 1rem;\r\n }\r\n #game-board {\r\n width: 300px;\r\n height: 300px;\r\n }\r\n button {\r\n font-size: 0.9rem;\r\n padding: 0.6rem 1.2rem;\r\n }\r\n }\r\n @media (max-width: 400px) {\r\n #game-board {\r\n width: 250px;\r\n height: 250px;\r\n }\r\n .snake-part, .apple {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n }\r\n @keyframes pulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n .apple {\r\n animation: pulse 1s infinite;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game-container\">\r\n <div id=\"score-board\">\u05e0\u05d9\u05e7\u05d5\u05d3: <span id=\"score\">0<\/span> | \u05e9\u05d9\u05d0: <span id=\"high-score\">0<\/span><\/div>\r\n <div id=\"game-board\"><\/div>\r\n <div id=\"mobile-controls\">\r\n <button class=\"arrow-btn\" id=\"up-btn\">\u2191<\/button>\r\n <button class=\"arrow-btn\" id=\"right-btn\">\u2192<\/button>\r\n <button class=\"arrow-btn\" id=\"down-btn\">\u2193<\/button>\r\n <button class=\"arrow-btn\" id=\"left-btn\">\u2190<\/button>\r\n <\/div>\r\n <button id=\"start-btn\">\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7<\/button>\r\n <button id=\"pause-btn\">\u05d4\u05e9\u05d4\u05d4<\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const BOARD_WIDTH = 20;\r\n const BOARD_HEIGHT = 20;\r\n let BLOCK_SIZE = 20;\r\n\r\n \/\/ Game variables\r\n let snake = [{ x: 10, y: 10 }];\r\n let direction = 'right';\r\n let apple = {};\r\n let score = 0;\r\n let highScore = 0;\r\n let gameInterval;\r\n let isPaused = false;\r\n let isGameOver = false;\r\n\r\n \/\/ DOM elements\r\n const gameBoard = document.getElementById('game-board');\r\n const scoreElement = document.getElementById('score');\r\n const highScoreElement = document.getElementById('high-score');\r\n const startButton = document.getElementById('start-btn');\r\n const pauseButton = document.getElementById('pause-btn');\r\n\r\n \/\/ Initialize the game\r\n function initGame() {\r\n snake = [{ x: 10, y: 10 }];\r\n direction = 'right';\r\n score = 0;\r\n isGameOver = false;\r\n isPaused = false;\r\n createApple();\r\n updateScore();\r\n drawSnake();\r\n drawApple();\r\n if (gameInterval) clearInterval(gameInterval);\r\n gameInterval = setInterval(gameLoop, 200);\r\n startButton.textContent = '\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05de\u05d7\u05d3\u05e9';\r\n pauseButton.textContent = '\u05d4\u05e9\u05d4\u05d4';\r\n }\r\n\r\n \/\/ Create a new apple\r\n function createApple() {\r\n apple = {\r\n x: Math.floor(Math.random() * BOARD_WIDTH),\r\n y: Math.floor(Math.random() * BOARD_HEIGHT)\r\n };\r\n }\r\n\r\n \/\/ Draw the snake\r\n function drawSnake() {\r\n gameBoard.innerHTML = '';\r\n snake.forEach((part, index) => {\r\n const snakePart = document.createElement('div');\r\n snakePart.className = 'snake-part';\r\n snakePart.style.left = part.x * BLOCK_SIZE + 'px';\r\n snakePart.style.top = part.y * BLOCK_SIZE + 'px';\r\n if (index === 0) {\r\n snakePart.style.backgroundColor = 'var(--primary-color)';\r\n }\r\n gameBoard.appendChild(snakePart);\r\n });\r\n }\r\n\r\n \/\/ Draw the apple\r\n function drawApple() {\r\n const appleElement = document.createElement('div');\r\n appleElement.className = 'apple';\r\n appleElement.style.left = apple.x * BLOCK_SIZE + 'px';\r\n appleElement.style.top = apple.y * BLOCK_SIZE + 'px';\r\n gameBoard.appendChild(appleElement);\r\n }\r\n\r\n \/\/ Move the snake\r\n function moveSnake() {\r\n const head = { ...snake[0] };\r\n switch (direction) {\r\n case 'up': head.y--; break;\r\n case 'down': head.y++; break;\r\n case 'left': head.x--; break;\r\n case 'right': head.x++; break;\r\n }\r\n\r\n \/\/ Check for wall collision\r\n if (head.x < 0) head.x = BOARD_WIDTH - 1;\r\n if (head.x >= BOARD_WIDTH) head.x = 0;\r\n if (head.y < 0) head.y = BOARD_HEIGHT - 1;\r\n if (head.y >= BOARD_HEIGHT) head.y = 0;\r\n\r\n \/\/ Check for self collision\r\n if (snake.some(part => part.x === head.x && part.y === head.y)) {\r\n gameOver();\r\n return;\r\n }\r\n\r\n snake.unshift(head);\r\n\r\n \/\/ Check for apple collision\r\n if (head.x === apple.x && head.y === apple.y) {\r\n score += 10;\r\n updateScore();\r\n createApple();\r\n } else {\r\n snake.pop();\r\n }\r\n }\r\n\r\n \/\/ Update score\r\n function updateScore() {\r\n scoreElement.textContent = score;\r\n if (score > highScore) {\r\n highScore = score;\r\n highScoreElement.textContent = highScore;\r\n localStorage.setItem('snakeHighScore', highScore);\r\n }\r\n }\r\n\r\n \/\/ Game over\r\n function gameOver() {\r\n isGameOver = true;\r\n clearInterval(gameInterval);\r\n alert('Game Over! Your score: ' + score);\r\n startButton.textContent = '\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05d7\u05d3\u05e9';\r\n }\r\n\r\n \/\/ Game loop\r\n function gameLoop() {\r\n if (!isPaused && !isGameOver) {\r\n moveSnake();\r\n drawSnake();\r\n drawApple();\r\n }\r\n }\r\n\r\n \/\/ Start game\r\n function startGame() {\r\n clearInterval(gameInterval);\r\n initGame();\r\n }\r\n\r\n \/\/ Pause game\r\n function togglePause() {\r\n isPaused = !isPaused;\r\n pauseButton.textContent = isPaused ? '\u05d4\u05de\u05e9\u05da' : '\u05d4\u05e9\u05d4\u05d4';\r\n if (isPaused) {\r\n clearInterval(gameInterval);\r\n } else {\r\n gameInterval = setInterval(gameLoop, 200);\r\n }\r\n }\r\n\r\n \/\/ Change direction\r\n function changeDirection(newDirection) {\r\n const opposites = { up: 'down', down: 'up', left: 'right', right: 'left' };\r\n if (newDirection !== opposites[direction]) {\r\n direction = newDirection;\r\n }\r\n }\r\n\r\n \/\/ Event listeners\r\n document.addEventListener('keydown', (e) => {\r\n switch (e.key) {\r\n case 'ArrowUp': changeDirection('up'); break;\r\n case 'ArrowDown': changeDirection('down'); break;\r\n case 'ArrowLeft': changeDirection('left'); break;\r\n case 'ArrowRight': changeDirection('right'); break;\r\n }\r\n });\r\n\r\n startButton.addEventListener('click', startGame);\r\n pauseButton.addEventListener('click', togglePause);\r\n\r\n \/\/ Mobile control buttons\r\n document.getElementById('up-btn').addEventListener('click', () => changeDirection('up'));\r\n document.getElementById('down-btn').addEventListener('click', () => changeDirection('down'));\r\n document.getElementById('left-btn').addEventListener('click', () => changeDirection('left'));\r\n document.getElementById('right-btn').addEventListener('click', () => changeDirection('right'));\r\n\r\n \/\/ Load high score from local storage\r\n highScore = localStorage.getItem('snakeHighScore') || 0;\r\n highScoreElement.textContent = highScore;\r\n\r\n \/\/ Adjust game board size on window resize\r\n function adjustGameBoard() {\r\n const isMobile = window.innerWidth <= 600;\r\n if (isMobile) {\r\n const boardSize = Math.min(window.innerWidth - 40, 300);\r\n gameBoard.style.width = boardSize + 'px';\r\n gameBoard.style.height = boardSize + 'px';\r\n BLOCK_SIZE = boardSize \/ BOARD_WIDTH;\r\n } else {\r\n gameBoard.style.width = '400px';\r\n gameBoard.style.height = '400px';\r\n BLOCK_SIZE = 20;\r\n }\r\n drawSnake();\r\n drawApple();\r\n }\r\n\r\n window.addEventListener('resize', adjustGameBoard);\r\n adjustGameBoard(); \/\/ Initial adjustment\r\n\r\n \/\/ Initialize the game\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05de\u05e9\u05d7\u05e7 \u05d4\u05e0\u05d7\u05e9 \u05e0\u05d9\u05e7\u05d5\u05d3: 0 | \u05e9\u05d9\u05d0: 0 \u2191 \u2192 \u2193 \u2190 \u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 \u05d4\u05e9\u05d4\u05d4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7005","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7005"}],"version-history":[{"count":82,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005\/revisions"}],"predecessor-version":[{"id":7204,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7005\/revisions\/7204"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}