\u05d8\u05d8\u05e8\u05d9\u05e1 \u05e2\u05ea\u05d9\u05d3\u05e0\u05d9<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #ff00ff;\r\n --secondary-color: #00ffff;\r\n --neon-glow: 0 0 5px #fff, 0 0 10px #ff00de;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(45deg, #120458, #000000, #120458);\r\n background-size: 400% 400%;\r\n animation: gradientBG 15s ease infinite;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n color: #fff;\r\n }\r\n\r\n @keyframes gradientBG {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n #game-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n #game-board {\r\n width: 300px;\r\n height: 600px;\r\n border: 2px solid var(--secondary-color);\r\n box-shadow: 0 0 10px var(--secondary-color);\r\n background-color: rgba(0, 0, 0, 0.5);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .tetromino {\r\n position: absolute;\r\n box-shadow: var(--neon-glow);\r\n opacity: 0.9;\r\n }\r\n\r\n #score-display {\r\n font-size: 24px;\r\n margin: 20px 0;\r\n text-shadow: var(--neon-glow);\r\n }\r\n\r\n #next-piece {\r\n width: 120px;\r\n height: 120px;\r\n border: 2px solid var(--secondary-color);\r\n margin-top: 20px;\r\n position: relative;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n button {\r\n margin: 10px;\r\n padding: 10px 20px;\r\n font-size: 18px;\r\n background: transparent;\r\n border: 2px solid var(--primary-color);\r\n color: var(--primary-color);\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n text-shadow: var(--neon-glow);\r\n box-shadow: 0 0 10px var(--primary-color);\r\n }\r\n\r\n button:hover {\r\n background-color: var(--primary-color);\r\n color: #000;\r\n }\r\n\r\n #mobile-controls {\r\n display: none;\r\n position: fixed;\r\n bottom: 20px;\r\n left: 20px;\r\n right: 20px;\r\n }\r\n\r\n .control-button {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border: 2px solid var(--secondary-color);\r\n color: var(--secondary-color);\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n position: absolute;\r\n box-shadow: var(--neon-glow);\r\n }\r\n\r\n #left-btn { left: 0; bottom: 0; }\r\n #right-btn { right: 0; bottom: 0; }\r\n #down-btn { left: 50%; bottom: 0; transform: translateX(-50%); }\r\n #rotate-btn { right: 0; bottom: 70px; }\r\n\r\n @keyframes explode {\r\n 0% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.5); opacity: 0.5; }\r\n 100% { transform: scale(2); opacity: 0; }\r\n }\r\n\r\n .exploding-particle {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n animation: explode 0.5s forwards;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n #game-board {\r\n width: 300px;\r\n height: 600px;\r\n }\r\n\r\n #next-piece {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n\r\n button {\r\n font-size: 16px;\r\n padding: 8px 16px;\r\n }\r\n\r\n #mobile-controls {\r\n display: block;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game-container\">\r\n <div id=\"score-display\">\u05e0\u05d9\u05e7\u05d5\u05d3: <span id=\"score\">0<\/span><\/div>\r\n <div id=\"game-board\"><\/div>\r\n <div id=\"next-piece\"><\/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 <div id=\"mobile-controls\">\r\n <div class=\"control-button\" id=\"left-btn\">◀<\/div>\r\n <div class=\"control-button\" id=\"down-btn\">▼<\/div>\r\n <div class=\"control-button\" id=\"right-btn\">▶<\/div>\r\n <div class=\"control-button\" id=\"rotate-btn\">⟳<\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const BOARD_WIDTH = 10;\r\n const BOARD_HEIGHT = 20;\r\n const BLOCK_SIZE = 30;\r\n\r\n \/\/ Game variables\r\n let board = [];\r\n let currentPiece;\r\n let nextPiece;\r\n let score = 0;\r\n let gameInterval;\r\n let isPaused = false;\r\n let isGameOver = false;\r\n let downInterval;\r\n\r\n \/\/ Tetromino shapes\r\n const SHAPES = [\r\n [[1, 1, 1, 1]], \/\/ I\r\n [[1, 1, 1], [0, 1, 0]], \/\/ T\r\n [[1, 1, 1], [1, 0, 0]], \/\/ L\r\n [[1, 1, 1], [0, 0, 1]], \/\/ J\r\n [[1, 1], [1, 1]], \/\/ O\r\n [[1, 1, 0], [0, 1, 1]], \/\/ Z\r\n [[0, 1, 1], [1, 1, 0]] \/\/ S\r\n ];\r\n\r\n \/\/ Colors for pieces\r\n const COLORS = ['#FF3CAC', '#784BA0', '#2B86C5', '#FF00FF', '#00FFFF', '#FF9966', '#50C878'];\r\n\r\n \/\/ Initialize the game\r\n function initGame() {\r\n createBoard();\r\n createPiece();\r\n createNextPiece();\r\n drawBoard();\r\n drawNextPiece();\r\n gameInterval = setInterval(gameLoop, 1000);\r\n isGameOver = false;\r\n isPaused = false;\r\n score = 0;\r\n updateScore();\r\n clearInterval(downInterval);\r\n }\r\n\r\n \/\/ Create the game board\r\n function createBoard() {\r\n board = Array.from({length: BOARD_HEIGHT}, () => Array(BOARD_WIDTH).fill(0));\r\n }\r\n\r\n \/\/ Create a new piece\r\n function createPiece() {\r\n if (nextPiece) {\r\n currentPiece = nextPiece;\r\n } else {\r\n const shapeIndex = Math.floor(Math.random() * SHAPES.length);\r\n currentPiece = {\r\n shape: SHAPES[shapeIndex],\r\n color: COLORS[shapeIndex],\r\n x: Math.floor(BOARD_WIDTH \/ 2) - Math.floor(SHAPES[shapeIndex][0].length \/ 2),\r\n y: 0\r\n };\r\n }\r\n createNextPiece();\r\n }\r\n\r\n \/\/ Create the next piece\r\n function createNextPiece() {\r\n const shapeIndex = Math.floor(Math.random() * SHAPES.length);\r\n nextPiece = {\r\n shape: SHAPES[shapeIndex],\r\n color: COLORS[shapeIndex],\r\n x: 0,\r\n y: 0\r\n };\r\n }\r\n\r\n \/\/ Draw the game board\r\n function drawBoard() {\r\n const gameBoard = document.getElementById('game-board');\r\n gameBoard.innerHTML = '';\r\n board.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = x * BLOCK_SIZE + 'px';\r\n block.style.top = y * BLOCK_SIZE + 'px';\r\n block.style.width = BLOCK_SIZE + 'px';\r\n block.style.height = BLOCK_SIZE + 'px';\r\n block.style.backgroundColor = value;\r\n gameBoard.appendChild(block);\r\n }\r\n });\r\n });\r\n drawPiece();\r\n }\r\n\r\n \/\/ Draw the current piece\r\n function drawPiece() {\r\n const gameBoard = document.getElementById('game-board');\r\n currentPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = (currentPiece.x + x) * BLOCK_SIZE + 'px';\r\n block.style.top = (currentPiece.y + y) * BLOCK_SIZE + 'px';\r\n block.style.width = BLOCK_SIZE + 'px';\r\n block.style.height = BLOCK_SIZE + 'px';\r\n block.style.backgroundColor = currentPiece.color;\r\n gameBoard.appendChild(block);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Draw the next piece\r\n function drawNextPiece() {\r\n const nextPieceDisplay = document.getElementById('next-piece');\r\n nextPieceDisplay.innerHTML = '';\r\n const scaleFactor = 0.8;\r\n const pieceWidth = nextPiece.shape[0].length * BLOCK_SIZE * scaleFactor;\r\n const pieceHeight = nextPiece.shape.length * BLOCK_SIZE * scaleFactor;\r\n const offsetX = (nextPieceDisplay.offsetWidth - pieceWidth) \/ 2;\r\n const offsetY = (nextPieceDisplay.offsetHeight - pieceHeight) \/ 2;\r\n \r\n nextPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = (x * BLOCK_SIZE * scaleFactor + offsetX) + 'px';\r\n block.style.top = (y * BLOCK_SIZE * scaleFactor + offsetY) + 'px';\r\n block.style.width = (BLOCK_SIZE * scaleFactor) + 'px';\r\n block.style.height = (BLOCK_SIZE * scaleFactor) + 'px';\r\n block.style.backgroundColor = nextPiece.color;\r\n nextPieceDisplay.appendChild(block);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Game loop\r\n function gameLoop() {\r\n if (!isPaused && !isGameOver) {\r\n if (canMove(0, 1)) {\r\n currentPiece.y++;\r\n } else {\r\n placePiece();\r\n removeRows();\r\n createPiece();\r\n drawNextPiece();\r\n if (!canMove(0, 0)) {\r\n gameOver();\r\n }\r\n }\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Check if the piece can move\r\n function canMove(moveX, moveY) {\r\n return currentPiece.shape.every((row, y) => {\r\n return row.every((value, x) => {\r\n if (value === 0) return true;\r\n let newX = currentPiece.x + x + moveX;\r\n let newY = currentPiece.y + y + moveY;\r\n \r\n \/\/ \u05d1\u05d3\u05d9\u05e7\u05d4 \u05d0\u05dd \u05d4\u05d7\u05dc\u05e7 \u05d4\u05d7\u05d3\u05e9 \u05d9\u05d4\u05d9\u05d4 \u05d1\u05ea\u05d5\u05da \u05d2\u05d1\u05d5\u05dc\u05d5\u05ea \u05d4\u05dc\u05d5\u05d7\r\n if (newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {\r\n return false;\r\n }\r\n \r\n \/\/ \u05d1\u05d3\u05d9\u05e7\u05d4 \u05d0\u05dd \u05d4\u05de\u05e7\u05d5\u05dd \u05d4\u05d7\u05d3\u05e9 \u05db\u05d1\u05e8 \u05ea\u05e4\u05d5\u05e1 \u05e2\u05dc \u05d9\u05d3\u05d9 \u05d7\u05dc\u05e7 \u05d0\u05d7\u05e8\r\n if (newY >= 0 && board[newY][newX] !== 0) {\r\n return false;\r\n }\r\n \r\n return true;\r\n });\r\n });\r\n }\r\n\r\n \/\/ Place the piece on the board\r\n function placePiece() {\r\n currentPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Remove completed rows with explosion effect\r\n function removeRows() {\r\n let rowsCleared = 0;\r\n for (let y = BOARD_HEIGHT - 1; y >= 0; y--) {\r\n if (board[y].every(cell => cell !== 0)) {\r\n createExplosionEffect(y);\r\n board.splice(y, 1);\r\n board.unshift(Array(BOARD_WIDTH).fill(0));\r\n rowsCleared++;\r\n y++; \/\/ Check the new row that dropped down\r\n }\r\n }\r\n if (rowsCleared > 0) {\r\n score += rowsCleared * 100;\r\n updateScore();\r\n }\r\n }\r\n\r\n function createExplosionEffect(row) {\r\n const gameBoard = document.getElementById('game-board');\r\n for (let i = 0; i < 100; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'exploding-particle';\r\n particle.style.left = `${Math.random() * gameBoard.offsetWidth}px`;\r\n particle.style.top = `${row * BLOCK_SIZE + Math.random() * BLOCK_SIZE}px`;\r\n particle.style.backgroundColor = getRandomColor();\r\n gameBoard.appendChild(particle);\r\n setTimeout(() => {\r\n particle.remove();\r\n }, 500);\r\n }\r\n }\r\n\r\n function getRandomColor() {\r\n return COLORS[Math.floor(Math.random() * COLORS.length)];\r\n }\r\n\r\n \/\/ Update the score display\r\n function updateScore() {\r\n document.getElementById('score').textContent = score;\r\n }\r\n\r\n \/\/ Game over\r\n function gameOver() {\r\n isGameOver = true;\r\n clearInterval(gameInterval);\r\n clearInterval(downInterval);\r\n alert('\u05d4\u05de\u05e9\u05d7\u05e7 \u05e0\u05d2\u05de\u05e8! \u05d4\u05e0\u05d9\u05e7\u05d5\u05d3 \u05e9\u05dc\u05da: ' + score);\r\n }\r\n\r\n \/\/ Move piece horizontally\r\n function moveHorizontal(dir) {\r\n if (canMove(dir, 0)) {\r\n currentPiece.x += dir;\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Move piece down\r\n function moveDown() {\r\n if (canMove(0, 1)) {\r\n currentPiece.y++;\r\n drawBoard();\r\n } else {\r\n placePiece();\r\n removeRows();\r\n createPiece();\r\n drawNextPiece();\r\n if (!canMove(0, 0)) {\r\n gameOver();\r\n }\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Rotate the piece\r\n function rotatePiece() {\r\n const rotated = currentPiece.shape[0].map((_, i) =>\r\n currentPiece.shape.map(row => row[i]).reverse()\r\n );\r\n if (canRotate(rotated)) {\r\n currentPiece.shape = rotated;\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Check if the piece can rotate\r\n function canRotate(rotated) {\r\n return rotated.every((row, y) => {\r\n return row.every((value, x) => {\r\n let newX = currentPiece.x + x;\r\n let newY = currentPiece.y + y;\r\n return (\r\n value === 0 ||\r\n (newX >= 0 && newX < BOARD_WIDTH && newY < BOARD_HEIGHT && (newY < 0 || board[newY][newX] === 0))\r\n );\r\n });\r\n });\r\n }\r\n\r\n \/\/ Toggle pause\r\n function togglePause() {\r\n isPaused = !isPaused;\r\n document.getElementById('pause-btn').textContent = isPaused ? '\u05d4\u05de\u05e9\u05da' : '\u05d4\u05e9\u05d4\u05d4';\r\n }\r\n\r\n \/\/ Event listeners\r\n document.addEventListener('keydown', handleKeyPress);\r\n document.getElementById('start-btn').addEventListener('click', initGame);\r\n document.getElementById('pause-btn').addEventListener('click', togglePause);\r\n\r\n \/\/ Handle key presses\r\n function handleKeyPress(e) {\r\n if (!isPaused && !isGameOver) {\r\n switch(e.keyCode) {\r\n case 37: \/\/ Left arrow\r\n moveHorizontal(-1);\r\n break;\r\n case 39: \/\/ Right arrow\r\n moveHorizontal(1);\r\n break;\r\n case 40: \/\/ Down arrow\r\n moveDown();\r\n break;\r\n case 38: \/\/ Up arrow\r\n rotatePiece();\r\n break;\r\n }\r\n }\r\n }\r\n\r\n \/\/ Mobile control event listeners\r\n document.getElementById('left-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveHorizontal(-1);\r\n }\r\n });\r\n\r\n document.getElementById('right-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveHorizontal(1);\r\n }\r\n });\r\n\r\n document.getElementById('down-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveDown();\r\n downInterval = setInterval(moveDown, 100);\r\n }\r\n });\r\n\r\n document.getElementById('down-btn').addEventListener('touchend', (e) => {\r\n e.preventDefault();\r\n clearInterval(downInterval);\r\n });\r\n\r\n document.getElementById('rotate-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n rotatePiece();\r\n }\r\n });\r\n\r\n \/\/ Initialize the game when the page loads\r\n window.onload = 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>\u05d8\u05d8\u05e8\u05d9\u05e1 \u05e2\u05ea\u05d9\u05d3\u05e0\u05d9 \u05e0\u05d9\u05e7\u05d5\u05d3: 0 \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-7023","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023","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=7023"}],"version-history":[{"count":97,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023\/revisions"}],"predecessor-version":[{"id":7207,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023\/revisions\/7207"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7023"}],"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 \u05d8\u05d8\u05e8\u05d9\u05e1 \u05e2\u05ea\u05d9\u05d3\u05e0\u05d9<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #ff00ff;\r\n --secondary-color: #00ffff;\r\n --neon-glow: 0 0 5px #fff, 0 0 10px #ff00de;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(45deg, #120458, #000000, #120458);\r\n background-size: 400% 400%;\r\n animation: gradientBG 15s ease infinite;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n color: #fff;\r\n }\r\n\r\n @keyframes gradientBG {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n #game-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n #game-board {\r\n width: 300px;\r\n height: 600px;\r\n border: 2px solid var(--secondary-color);\r\n box-shadow: 0 0 10px var(--secondary-color);\r\n background-color: rgba(0, 0, 0, 0.5);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .tetromino {\r\n position: absolute;\r\n box-shadow: var(--neon-glow);\r\n opacity: 0.9;\r\n }\r\n\r\n #score-display {\r\n font-size: 24px;\r\n margin: 20px 0;\r\n text-shadow: var(--neon-glow);\r\n }\r\n\r\n #next-piece {\r\n width: 120px;\r\n height: 120px;\r\n border: 2px solid var(--secondary-color);\r\n margin-top: 20px;\r\n position: relative;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n button {\r\n margin: 10px;\r\n padding: 10px 20px;\r\n font-size: 18px;\r\n background: transparent;\r\n border: 2px solid var(--primary-color);\r\n color: var(--primary-color);\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n text-shadow: var(--neon-glow);\r\n box-shadow: 0 0 10px var(--primary-color);\r\n }\r\n\r\n button:hover {\r\n background-color: var(--primary-color);\r\n color: #000;\r\n }\r\n\r\n #mobile-controls {\r\n display: none;\r\n position: fixed;\r\n bottom: 20px;\r\n left: 20px;\r\n right: 20px;\r\n }\r\n\r\n .control-button {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border: 2px solid var(--secondary-color);\r\n color: var(--secondary-color);\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n position: absolute;\r\n box-shadow: var(--neon-glow);\r\n }\r\n\r\n #left-btn { left: 0; bottom: 0; }\r\n #right-btn { right: 0; bottom: 0; }\r\n #down-btn { left: 50%; bottom: 0; transform: translateX(-50%); }\r\n #rotate-btn { right: 0; bottom: 70px; }\r\n\r\n @keyframes explode {\r\n 0% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.5); opacity: 0.5; }\r\n 100% { transform: scale(2); opacity: 0; }\r\n }\r\n\r\n .exploding-particle {\r\n position: absolute;\r\n width: 5px;\r\n height: 5px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n animation: explode 0.5s forwards;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n #game-board {\r\n width: 300px;\r\n height: 600px;\r\n }\r\n\r\n #next-piece {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n\r\n button {\r\n font-size: 16px;\r\n padding: 8px 16px;\r\n }\r\n\r\n #mobile-controls {\r\n display: block;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game-container\">\r\n <div id=\"score-display\">\u05e0\u05d9\u05e7\u05d5\u05d3: <span id=\"score\">0<\/span><\/div>\r\n <div id=\"game-board\"><\/div>\r\n <div id=\"next-piece\"><\/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 <div id=\"mobile-controls\">\r\n <div class=\"control-button\" id=\"left-btn\">◀<\/div>\r\n <div class=\"control-button\" id=\"down-btn\">▼<\/div>\r\n <div class=\"control-button\" id=\"right-btn\">▶<\/div>\r\n <div class=\"control-button\" id=\"rotate-btn\">⟳<\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Constants\r\n const BOARD_WIDTH = 10;\r\n const BOARD_HEIGHT = 20;\r\n const BLOCK_SIZE = 30;\r\n\r\n \/\/ Game variables\r\n let board = [];\r\n let currentPiece;\r\n let nextPiece;\r\n let score = 0;\r\n let gameInterval;\r\n let isPaused = false;\r\n let isGameOver = false;\r\n let downInterval;\r\n\r\n \/\/ Tetromino shapes\r\n const SHAPES = [\r\n [[1, 1, 1, 1]], \/\/ I\r\n [[1, 1, 1], [0, 1, 0]], \/\/ T\r\n [[1, 1, 1], [1, 0, 0]], \/\/ L\r\n [[1, 1, 1], [0, 0, 1]], \/\/ J\r\n [[1, 1], [1, 1]], \/\/ O\r\n [[1, 1, 0], [0, 1, 1]], \/\/ Z\r\n [[0, 1, 1], [1, 1, 0]] \/\/ S\r\n ];\r\n\r\n \/\/ Colors for pieces\r\n const COLORS = ['#FF3CAC', '#784BA0', '#2B86C5', '#FF00FF', '#00FFFF', '#FF9966', '#50C878'];\r\n\r\n \/\/ Initialize the game\r\n function initGame() {\r\n createBoard();\r\n createPiece();\r\n createNextPiece();\r\n drawBoard();\r\n drawNextPiece();\r\n gameInterval = setInterval(gameLoop, 1000);\r\n isGameOver = false;\r\n isPaused = false;\r\n score = 0;\r\n updateScore();\r\n clearInterval(downInterval);\r\n }\r\n\r\n \/\/ Create the game board\r\n function createBoard() {\r\n board = Array.from({length: BOARD_HEIGHT}, () => Array(BOARD_WIDTH).fill(0));\r\n }\r\n\r\n \/\/ Create a new piece\r\n function createPiece() {\r\n if (nextPiece) {\r\n currentPiece = nextPiece;\r\n } else {\r\n const shapeIndex = Math.floor(Math.random() * SHAPES.length);\r\n currentPiece = {\r\n shape: SHAPES[shapeIndex],\r\n color: COLORS[shapeIndex],\r\n x: Math.floor(BOARD_WIDTH \/ 2) - Math.floor(SHAPES[shapeIndex][0].length \/ 2),\r\n y: 0\r\n };\r\n }\r\n createNextPiece();\r\n }\r\n\r\n \/\/ Create the next piece\r\n function createNextPiece() {\r\n const shapeIndex = Math.floor(Math.random() * SHAPES.length);\r\n nextPiece = {\r\n shape: SHAPES[shapeIndex],\r\n color: COLORS[shapeIndex],\r\n x: 0,\r\n y: 0\r\n };\r\n }\r\n\r\n \/\/ Draw the game board\r\n function drawBoard() {\r\n const gameBoard = document.getElementById('game-board');\r\n gameBoard.innerHTML = '';\r\n board.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = x * BLOCK_SIZE + 'px';\r\n block.style.top = y * BLOCK_SIZE + 'px';\r\n block.style.width = BLOCK_SIZE + 'px';\r\n block.style.height = BLOCK_SIZE + 'px';\r\n block.style.backgroundColor = value;\r\n gameBoard.appendChild(block);\r\n }\r\n });\r\n });\r\n drawPiece();\r\n }\r\n\r\n \/\/ Draw the current piece\r\n function drawPiece() {\r\n const gameBoard = document.getElementById('game-board');\r\n currentPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = (currentPiece.x + x) * BLOCK_SIZE + 'px';\r\n block.style.top = (currentPiece.y + y) * BLOCK_SIZE + 'px';\r\n block.style.width = BLOCK_SIZE + 'px';\r\n block.style.height = BLOCK_SIZE + 'px';\r\n block.style.backgroundColor = currentPiece.color;\r\n gameBoard.appendChild(block);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Draw the next piece\r\n function drawNextPiece() {\r\n const nextPieceDisplay = document.getElementById('next-piece');\r\n nextPieceDisplay.innerHTML = '';\r\n const scaleFactor = 0.8;\r\n const pieceWidth = nextPiece.shape[0].length * BLOCK_SIZE * scaleFactor;\r\n const pieceHeight = nextPiece.shape.length * BLOCK_SIZE * scaleFactor;\r\n const offsetX = (nextPieceDisplay.offsetWidth - pieceWidth) \/ 2;\r\n const offsetY = (nextPieceDisplay.offsetHeight - pieceHeight) \/ 2;\r\n \r\n nextPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n const block = document.createElement('div');\r\n block.classList.add('tetromino');\r\n block.style.left = (x * BLOCK_SIZE * scaleFactor + offsetX) + 'px';\r\n block.style.top = (y * BLOCK_SIZE * scaleFactor + offsetY) + 'px';\r\n block.style.width = (BLOCK_SIZE * scaleFactor) + 'px';\r\n block.style.height = (BLOCK_SIZE * scaleFactor) + 'px';\r\n block.style.backgroundColor = nextPiece.color;\r\n nextPieceDisplay.appendChild(block);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Game loop\r\n function gameLoop() {\r\n if (!isPaused && !isGameOver) {\r\n if (canMove(0, 1)) {\r\n currentPiece.y++;\r\n } else {\r\n placePiece();\r\n removeRows();\r\n createPiece();\r\n drawNextPiece();\r\n if (!canMove(0, 0)) {\r\n gameOver();\r\n }\r\n }\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Check if the piece can move\r\n function canMove(moveX, moveY) {\r\n return currentPiece.shape.every((row, y) => {\r\n return row.every((value, x) => {\r\n if (value === 0) return true;\r\n let newX = currentPiece.x + x + moveX;\r\n let newY = currentPiece.y + y + moveY;\r\n \r\n \/\/ \u05d1\u05d3\u05d9\u05e7\u05d4 \u05d0\u05dd \u05d4\u05d7\u05dc\u05e7 \u05d4\u05d7\u05d3\u05e9 \u05d9\u05d4\u05d9\u05d4 \u05d1\u05ea\u05d5\u05da \u05d2\u05d1\u05d5\u05dc\u05d5\u05ea \u05d4\u05dc\u05d5\u05d7\r\n if (newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {\r\n return false;\r\n }\r\n \r\n \/\/ \u05d1\u05d3\u05d9\u05e7\u05d4 \u05d0\u05dd \u05d4\u05de\u05e7\u05d5\u05dd \u05d4\u05d7\u05d3\u05e9 \u05db\u05d1\u05e8 \u05ea\u05e4\u05d5\u05e1 \u05e2\u05dc \u05d9\u05d3\u05d9 \u05d7\u05dc\u05e7 \u05d0\u05d7\u05e8\r\n if (newY >= 0 && board[newY][newX] !== 0) {\r\n return false;\r\n }\r\n \r\n return true;\r\n });\r\n });\r\n }\r\n\r\n \/\/ Place the piece on the board\r\n function placePiece() {\r\n currentPiece.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value) {\r\n board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Remove completed rows with explosion effect\r\n function removeRows() {\r\n let rowsCleared = 0;\r\n for (let y = BOARD_HEIGHT - 1; y >= 0; y--) {\r\n if (board[y].every(cell => cell !== 0)) {\r\n createExplosionEffect(y);\r\n board.splice(y, 1);\r\n board.unshift(Array(BOARD_WIDTH).fill(0));\r\n rowsCleared++;\r\n y++; \/\/ Check the new row that dropped down\r\n }\r\n }\r\n if (rowsCleared > 0) {\r\n score += rowsCleared * 100;\r\n updateScore();\r\n }\r\n }\r\n\r\n function createExplosionEffect(row) {\r\n const gameBoard = document.getElementById('game-board');\r\n for (let i = 0; i < 100; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'exploding-particle';\r\n particle.style.left = `${Math.random() * gameBoard.offsetWidth}px`;\r\n particle.style.top = `${row * BLOCK_SIZE + Math.random() * BLOCK_SIZE}px`;\r\n particle.style.backgroundColor = getRandomColor();\r\n gameBoard.appendChild(particle);\r\n setTimeout(() => {\r\n particle.remove();\r\n }, 500);\r\n }\r\n }\r\n\r\n function getRandomColor() {\r\n return COLORS[Math.floor(Math.random() * COLORS.length)];\r\n }\r\n\r\n \/\/ Update the score display\r\n function updateScore() {\r\n document.getElementById('score').textContent = score;\r\n }\r\n\r\n \/\/ Game over\r\n function gameOver() {\r\n isGameOver = true;\r\n clearInterval(gameInterval);\r\n clearInterval(downInterval);\r\n alert('\u05d4\u05de\u05e9\u05d7\u05e7 \u05e0\u05d2\u05de\u05e8! \u05d4\u05e0\u05d9\u05e7\u05d5\u05d3 \u05e9\u05dc\u05da: ' + score);\r\n }\r\n\r\n \/\/ Move piece horizontally\r\n function moveHorizontal(dir) {\r\n if (canMove(dir, 0)) {\r\n currentPiece.x += dir;\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Move piece down\r\n function moveDown() {\r\n if (canMove(0, 1)) {\r\n currentPiece.y++;\r\n drawBoard();\r\n } else {\r\n placePiece();\r\n removeRows();\r\n createPiece();\r\n drawNextPiece();\r\n if (!canMove(0, 0)) {\r\n gameOver();\r\n }\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Rotate the piece\r\n function rotatePiece() {\r\n const rotated = currentPiece.shape[0].map((_, i) =>\r\n currentPiece.shape.map(row => row[i]).reverse()\r\n );\r\n if (canRotate(rotated)) {\r\n currentPiece.shape = rotated;\r\n drawBoard();\r\n }\r\n }\r\n\r\n \/\/ Check if the piece can rotate\r\n function canRotate(rotated) {\r\n return rotated.every((row, y) => {\r\n return row.every((value, x) => {\r\n let newX = currentPiece.x + x;\r\n let newY = currentPiece.y + y;\r\n return (\r\n value === 0 ||\r\n (newX >= 0 && newX < BOARD_WIDTH && newY < BOARD_HEIGHT && (newY < 0 || board[newY][newX] === 0))\r\n );\r\n });\r\n });\r\n }\r\n\r\n \/\/ Toggle pause\r\n function togglePause() {\r\n isPaused = !isPaused;\r\n document.getElementById('pause-btn').textContent = isPaused ? '\u05d4\u05de\u05e9\u05da' : '\u05d4\u05e9\u05d4\u05d4';\r\n }\r\n\r\n \/\/ Event listeners\r\n document.addEventListener('keydown', handleKeyPress);\r\n document.getElementById('start-btn').addEventListener('click', initGame);\r\n document.getElementById('pause-btn').addEventListener('click', togglePause);\r\n\r\n \/\/ Handle key presses\r\n function handleKeyPress(e) {\r\n if (!isPaused && !isGameOver) {\r\n switch(e.keyCode) {\r\n case 37: \/\/ Left arrow\r\n moveHorizontal(-1);\r\n break;\r\n case 39: \/\/ Right arrow\r\n moveHorizontal(1);\r\n break;\r\n case 40: \/\/ Down arrow\r\n moveDown();\r\n break;\r\n case 38: \/\/ Up arrow\r\n rotatePiece();\r\n break;\r\n }\r\n }\r\n }\r\n\r\n \/\/ Mobile control event listeners\r\n document.getElementById('left-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveHorizontal(-1);\r\n }\r\n });\r\n\r\n document.getElementById('right-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveHorizontal(1);\r\n }\r\n });\r\n\r\n document.getElementById('down-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n moveDown();\r\n downInterval = setInterval(moveDown, 100);\r\n }\r\n });\r\n\r\n document.getElementById('down-btn').addEventListener('touchend', (e) => {\r\n e.preventDefault();\r\n clearInterval(downInterval);\r\n });\r\n\r\n document.getElementById('rotate-btn').addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n if (!isPaused && !isGameOver) {\r\n rotatePiece();\r\n }\r\n });\r\n\r\n \/\/ Initialize the game when the page loads\r\n window.onload = 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>\u05d8\u05d8\u05e8\u05d9\u05e1 \u05e2\u05ea\u05d9\u05d3\u05e0\u05d9 \u05e0\u05d9\u05e7\u05d5\u05d3: 0 \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-7023","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023","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=7023"}],"version-history":[{"count":97,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023\/revisions"}],"predecessor-version":[{"id":7207,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7023\/revisions\/7207"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}