http://margo.mozello.shop/blog3/ Маргарита - Блог3 http://margo.mozello.shop/blog3/params/post/5336838/3 Thu, 22 Oct 2026 21:05:00 +0000 33<p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048 (8×8)</title> <style> /* ===== СТИЛІ ТА ТЕМИ ===== */ :root { --bg-color: #faf8ef; --wrapper-bg: #bbada0; --tile-empty: rgba(238, 228, 218, 0.35); --text-color: #776e65; --header-color: #776e65; } .game-theme-wrapper.dark { --bg-color: #121212; --wrapper-bg: #2d2a26; --tile-empty: #3d3a36; --text-color: #f9f6f2; --header-color: #e2d7cb; } body { background-color: var(--bg-color); font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 95vh; transition: background-color 0.3s; } .game-theme-wrapper { text-align: center; max-width: 520px; width: 100%; position: relative; } .theme-toggle { cursor: pointer; padding: 8px 12px; background: #8f7a66; color: #fff; border-radius: 5px; display: inline-block; margin-bottom: 10px; font-weight: bold; user-select: none; } h1 { color: var(--header-color); margin: 5px 0; font-size: 38px; } .info-container { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 5px; } .info { background: #bbada0; color: #fff; padding: 8px 10px; border-radius: 5px; font-weight: bold; font-size: 16px; min-width: 70px; flex: 1; } #restart { background: #8f7a66; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 16px; flex: 1; } #restart:hover { background: #9e8b78; } /* ІГРОВЕ ПОЛЕ 8х8 */ #game-container { position: relative; width: 100%; } #game-board { width: 100%; aspect-ratio: 1; background: var(--wrapper-bg); border-radius: 6px; padding: 8px; box-sizing: border-box; display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 5px; } .tile { background: var(--tile-empty); border-radius: 4px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 16px; color: #776e65; user-select: none; aspect-ratio: 1; } /* Стилі плиток за значеннями */ .tile[data-value="2"] { background: #eee4da; color: #776e65; } .tile[data-value="4"] { background: #ede0c8; color: #776e65; } .tile[data-value="8"] { background: #f2b179; color: #f9f6f2; } .tile[data-value="16"] { background: #f59563; color: #f9f6f2; } .tile[data-value="32"] { background: #f67c5f; color: #f9f6f2; } .tile[data-value="64"] { background: #f65e3b; color: #f9f6f2; } .tile[data-value="128"] { background: #edcf72; color: #f9f6f2; font-size: 14px; } .tile[data-value="256"] { background: #edcc61; color: #f9f6f2; font-size: 14px; } .tile[data-value="512"] { background: #edc850; color: #f9f6f2; font-size: 14px; } .tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; font-size: 12px; } .tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; font-size: 12px; } .tile[data-value="4096"], .tile[data-value="8192"] { background: #3c3a32; color: #f9f6f2; font-size: 12px; } /* ВІКНО ПОВІДОМЛЕННЯ */ #message { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(238, 228, 218, 0.73); z-index: 10; flex-direction: column; justify-content: center; align-items: center; border-radius: 6px; } .game-theme-wrapper.dark #message { background: rgba(45, 42, 38, 0.85); } #message-text { font-size: 36px; font-weight: bold; color: #776e65; margin-bottom: 20px; } .game-theme-wrapper.dark #message-text { color: #f9f6f2; } #continue { background: #8f7a66; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 18px; } /* ЕКРАННИЙ КУРСОР КЕРУВАННЯ */ .controls { margin-top: 15px; display: grid; grid-template-areas: ". up ." "left down right"; grid-gap: 8px; justify-content: center; width: 100%; } .control-btn { background: #8f7a66; color: #fff; border: none; width: 60px; height: 50px; border-radius: 5px; font-size: 24px; font-weight: bold; cursor: pointer; user-select: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 0 #6f5d4e; } .control-btn:active { transform: translateY(3px); box-shadow: none; } .btn-up { grid-area: up; } .btn-left { grid-area: left; } .btn-down { grid-area: down; } .btn-right { grid-area: right; } </style> <div class="game-theme-wrapper light" id="gameTheme"> <div class="theme-toggle" id="themeToggle">🌙 Темна тема</div> <h1>2048 (8×8)</h1> <div class="info-container"> <div class="info" id="score">Очки: 0</div> <button id="restart">Нова гра</button> <div class="info" id="best">Рекорд: 0</div> </div> <div id="game-container"> <div id="game-board"></div> <div id="message"> <div id="message-text"></div> <button id="continue">Продовжити</button> </div> </div> <!-- Екранні кнопки --> <div class="controls"> <button class="control-btn btn-up" data-dir="u">↑</button> <button class="control-btn btn-left" data-dir="l">←</button> <button class="control-btn btn-down" data-dir="d">↓</button> <button class="control-btn btn-right" data-dir="r">→</button> </div> </div> <script> /* ===== ПЕРЕМИКАЧ ТЕМИ ===== */ (function () { const w = document.getElementById("gameTheme"); const t = document.getElementById("themeToggle"); const saved = localStorage.getItem("theme2048"); if (saved === "dark") { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; } t.onclick = () => { if (w.classList.contains("dark")) { w.classList.replace("dark", "light"); t.textContent = "🌙 Темна тема"; localStorage.setItem("theme2048", "light"); } else { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; localStorage.setItem("theme2048", "dark"); } }; })(); </script> <script> /* ===== ГРА 2048 (8x8) ===== */ const board = document.getElementById('game-board'), scoreD = document.getElementById('score'), bestD = document.getElementById('best'), msg = document.getElementById('message'), msgT = document.getElementById('message-text'), cont = document.getElementById('continue'); const SIZE = 8; const CELLS_COUNT = SIZE * SIZE; let values = [], tiles = [], score = 0, best = 0; let gameOver = false, allow = false; best = +localStorage.getItem('best2048_8x8') || 0; bestD.textContent = 'Рекорд: ' + best; function save() { localStorage.setItem('g2048v_8x8', JSON.stringify(values)); localStorage.setItem('g2048s_8x8', score); localStorage.setItem('g2048go_8x8', gameOver ? '1' : '0'); localStorage.setItem('g2048al_8x8', allow ? '1' : '0'); } function add() { const e = values.map((v, i) => v ? null : i).filter(v => v !== null); if (e.length) { values[e[Math.floor(Math.random() * e.length)]] = Math.random() < .9 ? 2 : 4; } } function draw() { tiles.forEach((t, i) => { t.textContent = values[i] || ''; if (values[i]) { t.setAttribute('data-value', values[i]); } else { t.removeAttribute('data-value'); } }); scoreD.textContent = 'Очки: ' + score; if (score > best) { best = score; bestD.textContent = 'Рекорд: ' + best; localStorage.setItem('best2048_8x8', best); } save(); } function slide(r) { r = r.filter(v => v); for (let i = 0; i < r.length - 1; i++) { if (r[i] === r[i + 1]) { r[i] *= 2; score += r[i]; r[i + 1] = 0; } } r = r.filter(v => v); while (r.length < SIZE) r.push(0); return r; } function move(d) { if (gameOver) return; let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; line.push(values[x]); } let newLine = slide(line); for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; if (values[x] !== newLine[j]) { values[x] = newLine[j]; moved = true; } } } if (moved) { add(); draw(); check(); } } function hasMoves() { if (values.includes(0)) return true; for (let i = 0; i < SIZE; i++) { for (let j = 0; j < SIZE; j++) { let current = values[i * SIZE + j]; if (j < SIZE - 1 && current === values[i * SIZE + j + 1]) return true; if (i < SIZE - 1 && current === values[(i + 1) * SIZE + j]) return true; } } return false; } function check() { if (!allow && values.includes(2048)) { msgT.textContent = 'Ви виграли 🎉'; msg.style.display = 'flex'; gameOver = true; save(); } else if (!hasMoves()) { msgT.textContent = 'Гру завершено'; msg.style.display = 'flex'; gameOver = true; save(); } } function init() { board.innerHTML = ''; tiles = []; // Завантаження стану з LocalStorage const savedValues = localStorage.getItem('g2048v_8x8'); values = savedValues ? JSON.parse(savedValues) : Array(CELLS_COUNT).fill(0); score = +localStorage.getItem('g2048s_8x8') || 0; gameOver = localStorage.getItem('g2048go_8x8') === '1'; allow = localStorage.getItem('g2048al_8x8') === '1'; for (let i = 0; i < CELLS_COUNT; i++) { let d = document.createElement('div'); d.className = 'tile'; board.appendChild(d); tiles.push(d); } if (!savedValues && !values.some(v => v)) { add(); add(); } draw(); // Відновлення вікна повідомлення, якщо гра була завершена if (gameOver) { if (!allow && values.includes(2048)) { msgT.textContent = 'Ви виграли 🎉'; msg.style.display = 'flex'; } else if (!hasMoves()) { msgT.textContent = 'Гру завершено'; msg.style.display = 'flex'; } } } /* Керування клавіатурою */ document.addEventListener('keydown', function (e) { const keys = { ArrowLeft: 'l', ArrowRight: 'r', ArrowUp: 'u', ArrowDown: 'd' }; if (keys[e.key]) { e.preventDefault(); move(keys[e.key]); } }); /* Керування екранними кнопками */ document.querySelectorAll('.control-btn').forEach(btn => { btn.onclick = () => { const dir = btn.getAttribute('data-dir'); move(dir); }; }); document.getElementById('restart').onclick = () => { values = Array(CELLS_COUNT).fill(0); score = 0; gameOver = false; allow = false; add(); add(); msg.style.display = 'none'; draw(); }; cont.onclick = () => { gameOver = false; allow = true; msg.style.display = 'none'; save(); }; init(); </script> http://margo.mozello.shop/blog3/params/post/5333940/2048-8-na-8 Sat, 17 Oct 2026 12:32:00 +0000 1<p><br></p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>2048 — поле 8×8</title> <style> /* Усі стилі обмежені контейнером гри й не змінюють оформлення решти блогу. */ #game2048-app { --bg: #faf8ef; --board: #bbada0; --empty: rgba(238, 228, 218, .42); --text: #776e65; --accent: #8f7a66; max-width: 100%; margin: 18px auto; color: var(--text); font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; } #game2048-app *, #game2048-app *::before, #game2048-app *::after { box-sizing: border-box; } #game2048-app .g2048-shell { width: 100%; max-width: 900px; margin: auto; padding: clamp(10px, 2vw, 22px); border-radius: 16px; background: var(--bg); border: 1px solid #e8dfd4; } #game2048-app .g2048-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } #game2048-app .g2048-title { margin: 0; font-size: clamp(28px, 5vw, 46px); line-height: 1; font-weight: 900; letter-spacing: -1px; color: #776e65; } #game2048-app .g2048-scores { display:flex; gap:8px; flex-wrap:wrap; } #game2048-app .g2048-score { min-width: 82px; padding: 7px 12px; border-radius: 8px; background: #bbada0; color: #fff; text-align:center; font-weight:700; } #game2048-app .g2048-score small { display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:.9; margin-bottom:2px; } #game2048-app .g2048-score strong { font-size:18px; } #game2048-app .g2048-actions { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0; } #game2048-app button { font: inherit; font-weight:700; border:0; border-radius:7px; padding:10px 14px; cursor:pointer; color:#fff; background:#8f7a66; touch-action: manipulation; } #game2048-app button:hover { filter:brightness(1.06); } #game2048-app button:focus-visible { outline:3px solid #3c8d5a; outline-offset:2px; } #game2048-app button:disabled { opacity:.45; cursor:not-allowed; } #game2048-app .g2048-help { margin: 8px 0 12px; font-size:14px; line-height:1.45; } #game2048-app .g2048-pad { display:grid; grid-template-columns:repeat(3, 48px); grid-template-rows:repeat(2, 42px); gap:5px; justify-content:center; margin:10px auto 12px; } #game2048-app .g2048-pad button { padding:0; font-size:22px; line-height:1; border-radius:7px; background:#776e65; } #game2048-app .g2048-pad .up { grid-column:2; grid-row:1; } #game2048-app .g2048-pad .left { grid-column:1; grid-row:2; } #game2048-app .g2048-pad .down { grid-column:2; grid-row:2; } #game2048-app .g2048-pad .right { grid-column:3; grid-row:2; } #game2048-app .g2048-board-wrap { width:100%; overflow-x:auto; padding-bottom:3px; } #game2048-app .g2048-board { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); grid-template-rows:repeat(8, 48px); gap:5px; padding:7px; background:var(--board); border-radius:9px; width:100%; min-width:0; position:relative; isolation:isolate; } #game2048-app .g2048-cell { min-width:0; min-height:0; height:48px; border-radius:5px; background:var(--empty); display:flex; align-items:center; justify-content:center; font-weight:800; line-height:1; white-space:nowrap; overflow:hidden; padding:0 1px; user-select:none; font-variant-numeric:tabular-nums; } #game2048-app .g2048-cell.filled { animation:g2048-appear .12s ease-out; } @keyframes g2048-appear { from { transform:scale(.88); } to { transform:scale(1); } } #game2048-app .g2048-overlay { position:absolute; inset:7px; z-index:2; display:none; align-items:center; justify-content:center; flex-direction:column; gap:12px; text-align:center; border-radius:7px; background:rgba(250,248,239,.88); color:#776e65; font-size:clamp(24px,5vw,38px); font-weight:900; } #game2048-app .g2048-overlay.visible { display:flex; } #game2048-app .g2048-overlay p { margin:0; } #game2048-app .g2048-status { min-height:20px; margin-top:9px; font-size:13px; } @media (max-width: 560px) { #game2048-app .g2048-shell { padding:8px; border-radius:10px; } #game2048-app .g2048-board { grid-template-rows:repeat(8, clamp(27px, 8.3vw, 42px)); gap:3px; padding:4px; } #game2048-app .g2048-cell { height:clamp(27px, 8.3vw, 42px); border-radius:3px; } #game2048-app .g2048-overlay { inset:4px; } #game2048-app button { padding:9px 11px; } } </style> <div id="game2048-app"> <section class="g2048-shell" aria-label="Гра 2048 на полі 8 на 8"> <div class="g2048-head"> <h1 class="g2048-title">2048</h1> <div class="g2048-scores"> <div class="g2048-score"><small>Рахунок</small><b id="g2048-score">0</b></div> <div class="g2048-score"><small>Рекорд</small><b id="g2048-best">0</b></div> </div> </div> <div class="g2048-actions"> <button type="button" id="g2048-new">Нова гра</button> <button type="button" id="g2048-undo">Скасувати хід</button> </div> <p class="g2048-help">Керування: <b>W A S D</b> або <b>I J K L</b>; також можна натискати екранні кнопки зі стрілками. На телефоні проведіть пальцем у потрібному напрямку. Однакові плитки зливаються, а після кожного результативного ходу з’являється нова плитка.</p> <div class="g2048-pad" aria-label="Екранне керування"> <button type="button" class="up" data-direction="up" aria-label="Угору">↑</button> <button type="button" class="left" data-direction="left" aria-label="Ліворуч">←</button> <button type="button" class="down" data-direction="down" aria-label="Униз">↓</button> <button type="button" class="right" data-direction="right" aria-label="Праворуч">→</button> </div> <div class="g2048-board-wrap"> <div class="g2048-board" id="g2048-board" role="grid" aria-label="Ігрове поле 8 на 8"></div> </div> <div class="g2048-status" id="g2048-status" aria-live="polite">Об’єднуйте плитки та збільшуйте рахунок.</div> </section> </div> <script> (() => { 'use strict'; const SIZE = 8, CELLS = SIZE * SIZE, SAVE_KEY = 'blog2048_8x8_save_v1'; const app = document.getElementById('game2048-app'); const boardEl = app.querySelector('#g2048-board'); const scoreEl = app.querySelector('#g2048-score'); const bestEl = app.querySelector('#g2048-best'); const undoBtn = app.querySelector('#g2048-undo'); const statusEl = app.querySelector('#g2048-status'); const newBtn = app.querySelector('#g2048-new'); const overlay = document.createElement('div'); overlay.className = 'g2048-overlay'; overlay.innerHTML = '<p></p><button type="button">Грати ще</button>'; boardEl.appendChild(overlay); const overlayText = overlay.querySelector('p'); const overlayButton = overlay.querySelector('button'); let board = Array(CELLS).fill(0); let score = 0, best = 0, won = false, keepPlaying = false, over = false; let previous = null, touchStart = null; const cells = []; for (let i = 0; i < CELLS; i++) { const cell = document.createElement('div'); cell.className = 'g2048-cell'; cell.setAttribute('role', 'gridcell'); cells.push(cell); boardEl.insertBefore(cell, overlay); } function compactNumber(n) { // Степені двійки округлюємо до найближчого цілого для читабельного скорочення. if (n < 1024) return String(n); if (n < 1048576) return (n / 1024).toFixed(n < 10240 ? 1 : 0).replace(/\.0$/, '') + 'K'; return (n / 1048576).toFixed(n < 10485760 ? 1 : 0).replace(/\.0$/, '') + 'M'; } function tileColor(v) { const colors = { 2:['#eee4da','#776e65'], 4:['#ede0c8','#776e65'], 8:['#f2b179','#fff'], 16:['#f59563','#fff'], 32:['#f67c5f','#fff'], 64:['#f65e3b','#fff'], 128:['#edcf72','#fff'], 256:['#edcc61','#fff'], 512:['#edc850','#fff'], 1024:['#edc53f','#fff'], 2048:['#edc22e','#fff'] }; if (colors[v]) return colors[v]; const hue = (Math.log2(v) * 31 + 35) % 360; return [`hsl(${hue} 58% 43%)`, '#fff']; } function render() { for (let i = 0; i < CELLS; i++) { const v = board[i], el = cells[i]; el.textContent = v ? compactNumber(v) : ''; el.classList.toggle('filled', !!v); el.style.background = v ? tileColor(v)[0] : ''; el.style.color = v ? tileColor(v)[1] : ''; // Довгі скорочення отримують менший шрифт, але не обрізаються. const len = el.textContent.length; el.style.fontSize = (v === 0 ? 16 : Math.max(10, Math.min(25, 25 - Math.max(0, len - 3) * 3))) + 'px'; el.setAttribute('aria-label', v ? compactNumber(v) : 'порожня клітинка'); } scoreEl.textContent = compactNumber(score); bestEl.textContent = compactNumber(best); undoBtn.disabled = !previous; overlay.classList.toggle('visible', over || (won && !keepPlaying)); if (over) { overlayText.textContent = 'Гру завершено'; overlayButton.textContent = 'Спробувати знову'; } else if (won && !keepPlaying) { overlayText.textContent = '2048 досягнуто!'; overlayButton.textContent = 'Продовжити'; } save(); } function save() { try { localStorage.setItem(SAVE_KEY, JSON.stringify({board, score, best, won, keepPlaying, over, previous})); } catch (_) { /* Гра працює і без доступу до localStorage. */ } } function spawnTile() { // Без while: один прохід збирає всі порожні клітинки, далі обирається одна випадкова. const empty = []; for (let i = 0; i < CELLS; i++) if (board[i] === 0) empty.push(i); if (empty.length === 0) return false; const index = empty[Math.floor(Math.random() * empty.length)]; board[index] = Math.random() < 0.9 ? 2 : 4; return true; } function snapshot() { return {board: board.slice(), score, won, keepPlaying, over}; } function restore(s) { board = s.board.slice(); score = s.score; won = s.won; keepPlaying = s.keepPlaying; over = s.over; } function newGame() { board = Array(CELLS).fill(0); score = 0; won = false; keepPlaying = false; over = false; previous = null; spawnTile(); spawnTile(); statusEl.textContent = 'Нова гра почалася. Успіхів!'; render(); } function lineIndices(direction, line) { const out = []; for (let step = 0; step < SIZE; step++) { if (direction === 'left') out.push(line * SIZE + step); if (direction === 'right') out.push(line * SIZE + (SIZE - 1 - step)); if (direction === 'up') out.push(step * SIZE + line); if (direction === 'down') out.push((SIZE - 1 - step) * SIZE + line); } return out; } function move(direction) { if (over || (won && !keepPlaying)) return; const before = snapshot(); let changed = false, gained = 0; for (let line = 0; line < SIZE; line++) { const indices = lineIndices(direction, line); const values = indices.map(i => board[i]).filter(v => v !== 0); const merged = []; for (let i = 0; i < values.length; i++) { if (values[i] === values[i + 1]) { const value = values[i] * 2; merged.push(value); gained += value; i++; if (value >= 2048 && !won) won = true; } else merged.push(values[i]); } while (merged.length < SIZE) merged.push(0); indices.forEach((index, i) => { if (board[index] !== merged[i]) changed = true; board[index] = merged[i]; }); } if (!changed) return; previous = before; score += gained; if (score > best) best = score; spawnTile(); over = !canMove(); if (over) statusEl.textContent = 'Немає доступних ходів. Почніть нову гру.'; else if (won && !keepPlaying) statusEl.textContent = 'Ви досягли 2048! Можна продовжити гру.'; else statusEl.textContent = gained ? `Злиття додало ${compactNumber(gained)} очок.` : 'Хід виконано.'; render(); } function canMove() { if (board.some(v => v === 0)) return true; for (let r = 0; r < SIZE; r++) for (let c = 0; c < SIZE; c++) { const i = r * SIZE + c; if (c < SIZE - 1 && board[i] === board[i + 1]) return true; if (r < SIZE - 1 && board[i] === board[i + SIZE]) return true; } return false; } function undo() { if (!previous) return; const p = previous; previous = null; restore(p); statusEl.textContent = 'Попередній хід скасовано.'; render(); } function load() { try { const raw = localStorage.getItem(SAVE_KEY); if (!raw) return false; const s = JSON.parse(raw); if (!s || !Array.isArray(s.board) || s.board.length !== CELLS) return false; if (!s.board.every(v => Number.isSafeInteger(v) && v >= 0)) return false; board = s.board; score = Number(s.score) || 0; best = Number(s.best) || 0; won = !!s.won; keepPlaying = !!s.keepPlaying; over = !!s.over; previous = s.previous && Array.isArray(s.previous.board) && s.previous.board.length === CELLS ? s.previous : null; statusEl.textContent = 'Попередню гру відновлено.'; return true; } catch (_) { return false; } } document.addEventListener('keydown', e => { if (!app.isConnected) return; const key = e.key.toLowerCase(); const map = { arrowleft:'left', a:'left', j:'left', arrowright:'right', d:'right', l:'right', arrowup:'up', w:'up', i:'up', arrowdown:'down', s:'down', k:'down' }; if (map[key]) { e.preventDefault(); move(map[key]); } }); boardEl.addEventListener('touchstart', e => { if (e.touches.length !== 1) return; touchStart = {x:e.touches[0].clientX, y:e.touches[0].clientY}; }, {passive:true}); boardEl.addEventListener('touchend', e => { if (!touchStart || !e.changedTouches.length) return; const dx = e.changedTouches[0].clientX - touchStart.x; const dy = e.changedTouches[0].clientY - touchStart.y; touchStart = null; if (Math.max(Math.abs(dx), Math.abs(dy)) < 24) return; move(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up')); }, {passive:true}); newBtn.addEventListener('click', () => { if (confirm('Почати нову гру? Поточний прогрес буде замінено.')) newGame(); }); app.querySelectorAll('[data-direction]').forEach(button => { button.addEventListener('click', () => move(button.dataset.direction)); }); undoBtn.addEventListener('click', undo); overlayButton.addEventListener('click', () => { if (over) newGame(); else if (won) { keepPlaying = true; statusEl.textContent = 'Продовжуйте гру після 2048!'; render(); } }); if (!load()) newGame(); else render(); })(); </script> http://margo.mozello.shop/blog3/params/post/5281636/4 Tue, 21 Jul 2026 09:55:00 +0000 ооооооооооооооооо<hr class="moze-more-divider"><p>4</p><p><br></p> <div id="game-container" style="display:flex; flex-direction:column; align-items:center; font-family:sans-serif; padding:10px;"> <div style="width:100%; max-width:800px; display:flex; justify-content:space-between; margin-bottom:10px;"> <h2 style="margin:0;">2048 - Eternal</h2> <div class="moze-right">Score: <span id="s-val">0</span><br>Best: <span id="b-val">0</span></div> </div> <div id="board" style="display:grid; gap:8px; background:#bbada0; padding:8px; border-radius:6px; transition:grid-template-columns 0.1s linear;"></div> <div style="margin-top:20px; display:flex; gap:10px;"> <button onclick="game.reset()">New Game</button> <button onclick="game.undo()">Undo</button> </div> </div> <style> .tile { min-height: 50px; min-width: 50px; border-radius:4px; display:flex; justify-content:center; align-items:center; font-weight:bold; color:#fff; transition:all 0.1s; padding: 0 10px; white-space:nowrap; } </style> <script> class Game2048 { constructor() { this.size = 7; this.boardEl = document.getElementById('board'); this.ctx = document.createElement('canvas').getContext('2d'); this.loadGame(); document.addEventListener('keydown', (e) => this.input(e)); this.render(); } saveGame() { localStorage.setItem('2048_eternal', JSON.stringify({ board: this.board, score: this.score, history: this.history })); } loadGame() { const saved = localStorage.getItem('2048_eternal'); if (saved) { const data = JSON.parse(saved); this.board = data.board; this.score = data.score; this.history = data.history; } else { this.board = Array(this.size).fill().map(() => Array(this.size).fill(0)); this.score = 0; this.history = []; this.spawn(); this.spawn(); } } input(e) { const keys = {ArrowUp:'up', ArrowDown:'down', ArrowLeft:'left', ArrowRight:'right', w:'up', s:'down', a:'left', d:'right'}; if (keys[e.key]) { e.preventDefault(); this.move(keys[e.key]); } } move(dir) { let prevBoard = JSON.stringify(this.board); let moved = false; const rotate = () => { let next = Array(this.size).fill().map(() => Array(this.size).fill(0)); for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) next[c][this.size-1-r] = this.board[r][c]; this.board = next; }; const slide = () => { for(let r=0; r<this.size; r++) { let row = this.board[r].filter(x => x); let newRow = []; for(let i=0; i<row.length; i++) { if(i + 1 < row.length && row[i] === row[i+1]) { newRow.push(row[i]*2); this.score += row[i]*2; i++; moved = true; } else { newRow.push(row[i]); } } while(newRow.length < this.size) newRow.push(0); if(this.board[r].join(',') !== newRow.join(',')) moved = true; this.board[r] = newRow; } }; const dirs = {up:3, right:2, down:1, left:0}; for(let i=0; i<dirs[dir]; i++) rotate(); slide(); for(let i=0; i<(4-dirs[dir])%4; i++) rotate(); if(moved) { this.history.push(prevBoard); this.spawn(); this.saveGame(); this.render(); } } spawn() { let empty = []; for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) if(!this.board[r][c]) empty.push({r,c}); if(empty.length) { let {r,c} = empty[Math.floor(Math.random()*empty.length)]; this.board[r][c] = Math.random() < 0.9 ? 2 : 4; } } render() { this.boardEl.innerHTML = ''; let colWidths = Array(this.size).fill(0); for(let c=0; c<this.size; c++) { let max = 60; for(let r=0; r<this.size; r++) { let val = this.board[r][c] ? this.board[r][c].toString() : "0"; let w = this.ctx.measureText(val).width + 30; if(w > max) max = w; } colWidths[c] = max; } this.boardEl.style.gridTemplateColumns = colWidths.map(w => `${w}px`).join(' '); this.board.flat().forEach(val => { let t = document.createElement('div'); t.className = 'tile'; t.textContent = val || ''; t.style.background = val ? `hsl(${Math.log2(val)*20}, 70%, 45%)` : '#cdc1b4'; t.style.fontSize = val > 100000 ? '12px' : '18px'; this.boardEl.appendChild(t); }); document.getElementById('s-val').textContent = this.score; let best = Math.max(this.score, localStorage.getItem('best') || 0); localStorage.setItem('best', best); document.getElementById('b-val').textContent = best; } reset() { localStorage.removeItem('2048_eternal'); location.reload(); } undo() { if(this.history.length) { this.board = JSON.parse(this.history.pop()); this.saveGame(); this.render(); } } } const game = new Game2048(); </script> http://margo.mozello.shop/blog3/params/post/5279599/3 Wed, 15 Jul 2026 13:57:00 +0000 початок 16 липня 2026&nbsp;&nbsp; <span style="text-align: right; font-weight: 300; font-style: normal">155232</span> <hr class="moze-more-divider"><p>3</p><p><br></p> <div id="game-container" style="display:flex; flex-direction:column; align-items:center; font-family:sans-serif; padding:10px;"> <div style="width:100%; max-width:800px; display:flex; justify-content:space-between; margin-bottom:10px;"> <h2 style="margin:0;">2048 - Eternal</h2> <div class="moze-right">Score: <span id="s-val">0</span><br>Best: <span id="b-val">0</span></div> </div> <div id="board" style="display:grid; gap:8px; background:#bbada0; padding:8px; border-radius:6px; transition:grid-template-columns 0.1s linear;"></div> <div style="margin-top:20px; display:flex; gap:10px;"> <button onclick="game.reset()" fdprocessedid="sq2gat">New Game</button> <button onclick="game.undo()" fdprocessedid="omrp2p">Undo</button> </div> </div> <style> .tile { min-height: 50px; min-width: 50px; border-radius:4px; display:flex; justify-content:center; align-items:center; font-weight:bold; color:#fff; transition:all 0.1s; padding: 0 10px; white-space:nowrap; } </style> <script> class Game2048 { constructor() { this.size = 7; this.boardEl = document.getElementById('board'); this.ctx = document.createElement('canvas').getContext('2d'); this.loadGame(); document.addEventListener('keydown', (e) => this.input(e)); this.render(); } saveGame() { localStorage.setItem('2048_eternal', JSON.stringify({ board: this.board, score: this.score, history: this.history })); } loadGame() { const saved = localStorage.getItem('2048_eternal'); if (saved) { const data = JSON.parse(saved); this.board = data.board; this.score = data.score; this.history = data.history; } else { this.board = Array(this.size).fill().map(() => Array(this.size).fill(0)); this.score = 0; this.history = []; this.spawn(); this.spawn(); } } input(e) { const keys = {ArrowUp:'up', ArrowDown:'down', ArrowLeft:'left', ArrowRight:'right', w:'up', s:'down', a:'left', d:'right'}; if (keys[e.key]) { e.preventDefault(); this.move(keys[e.key]); } } move(dir) { let prevBoard = JSON.stringify(this.board); // Логіка зсуву (стандартна для 2048) let moved = false; // Тут реалізовано поворот для всіх 4 напрямків через одну функцію const rotate = () => { let next = Array(this.size).fill().map(() => Array(this.size).fill(0)); for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) next[c][this.size-1-r] = this.board[r][c]; this.board = next; }; const slide = () => { for(let r=0; r<this.size; r++) { let row = this.board[r].filter(x => x); let newRow = []; for(let i=0; i<row.length; i++) { if(row[i] === row[i+1]) { newRow.push(row[i]*2); this.score += row[i]*2; i++; moved = true; } else { newRow.push(row[i]); } } while(newRow.length < this.size) newRow.push(0); if(this.board[r].join(',') !== newRow.join(',')) moved = true; this.board[r] = newRow; } }; const dirs = {up:3, right:2, down:1, left:0}; for(let i=0; i<dirs[dir]; i++) rotate(); slide(); for(let i=0; i<(4-dirs[dir])%4; i++) rotate(); if(moved) { this.history.push(prevBoard); this.spawn(); this.saveGame(); this.render(); } } spawn() { let empty = []; for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) if(!this.board[r][c]) empty.push({r,c}); if(empty.length) { let {r,c} = empty[Math.floor(Math.random()*empty.length)]; this.board[r][c] = Math.random() < 0.9 ? 2 : 4; } } render() { this.boardEl.innerHTML = ''; let colWidths = Array(this.size).fill(0); // Розрахунок ширини for(let c=0; c<this.size; c++) { let max = 60; for(let r=0; r<this.size; r++) { let val = this.board[r][c] ? this.board[r][c].toString() : "0"; let w = this.ctx.measureText(val).width + 30; if(w > max) max = w; } colWidths[c] = max; } this.boardEl.style.gridTemplateColumns = colWidths.map(w => `${w}px`).join(' '); this.board.flat().forEach(val => { let t = document.createElement('div'); t.className = 'tile'; t.textContent = val || ''; t.style.background = val ? `hsl(${Math.log2(val)*20}, 70%, 45%)` : '#cdc1b4'; t.style.fontSize = val > 100000 ? '12px' : '18px'; this.boardEl.appendChild(t); }); document.getElementById('s-val').textContent = this.score; let best = Math.max(this.score, localStorage.getItem('best') || 0); localStorage.setItem('best', best); document.getElementById('b-val').textContent = best; } reset() { localStorage.removeItem('2048_eternal'); location.reload(); } undo() { if(this.history.length) { this.board = JSON.parse(this.history.pop()); this.saveGame(); this.render(); } } } const game = new Game2048(); </script> http://margo.mozello.shop/blog3/params/post/5250004/10 Thu, 07 May 2026 15:54:00 +0000 10&nbsp; 10&nbsp; 10&nbsp;&nbsp;<hr class="moze-more-divider"><p>10</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048 (7×7) — Покращена версія</title> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #faf8ef, #f3e5d0); margin: 0; padding: 15px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 38px; margin: 10px 0 5px; color: #5c4033; text-align: center; } .subtitle { margin-bottom: 10px; color: #7a5c4b; font-size: 16px; text-align: center; } .stats { display: flex; gap: 15px; margin: 10px 0; flex-wrap: wrap; justify-content: center; } .info-box { background: #8f7a66; color: white; padding: 10px 18px; border-radius: 10px; min-width: 120px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .label { font-size: 14px; opacity: 0.9; } .value { font-size: 24px; font-weight: bold; margin-top: 4px; } button { padding: 12px 22px; font-size: 18px; margin: 12px 0; border: none; border-radius: 10px; background: #6d4c41; color: white; cursor: pointer; transition: 0.2s; font-weight: bold; } button:hover { background: #5d4037; transform: scale(1.03); } #game-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #bbada0; padding: 8px; border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .tile { background: #cdc1b4; min-height: 62px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 8px; font-size: 24px; transition: all 0.12s ease-in-out; user-select: none; } .tile:not(:empty) { animation: pop 0.15s ease; } @keyframes pop { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } .tile[data-value="2"] { background: #eee4da; color: #776e65; } .tile[data-value="4"] { background: #ede0c8; color: #776e65; } .tile[data-value="8"] { background: #f2b179; color: white; } .tile[data-value="16"] { background: #f59563; color: white; } .tile[data-value="32"] { background: #f67c5f; color: white; } .tile[data-value="64"] { background: #f65e3b; color: white; } .tile[data-value="128"] { background: #edcf72; color: white; font-size: 22px; } .tile[data-value="256"] { background: #edcc61; color: white; font-size: 22px; } .tile[data-value="512"] { background: #edc850; color: white; font-size: 22px; } .tile[data-value="1024"] { background: #edc53f; color: white; font-size: 20px; } .tile[data-value="2048"] { background: #edc22e; color: white; font-size: 20px; } .tile[data-value="4096"] { background: #00b894; color: white; font-size: 20px; } .tile[data-value="8192"] { background: #00a8ff; color: white; font-size: 19px; } .tile[data-value="16384"] { background: #6c5ce7; color: white; font-size: 18px; } .tile[data-value="32768"] { background: #a55eea; color: white; font-size: 17px; } .tile[data-value="65536"] { background: #ff7675; color: white; font-size: 16px; } .tile[data-value="131072"] { background: #fd79a8; color: white; font-size: 15px; } .tile[data-value="262144"] { background: #feca57; color: #2d3436; font-size: 14px; } .tile[data-value="524288"] { background: #48dbfb; color: #1e272e; font-size: 13px; } .tile[data-value="1048576"] { background: #ff9ff3; color: #1e272e; font-size: 12px; } .controls { margin-top: 15px; text-align: center; color: #6d4c41; font-size: 14px; max-width: 520px; } @media (max-width: 600px) { .tile { min-height: 44px; font-size: 18px; } h1 { font-size: 30px; } } </style> <h1>2048 (7×7)</h1> <div class="subtitle">Покращена версія з рекордом і плитками до 1048576</div> <div class="stats"> <div class="info-box"> <div class="label">Очки</div> <div class="value" id="score">0</div> </div> <div class="info-box"> <div class="label">Рекорд</div> <div class="value" id="best">0</div> </div> </div> <button id="restart">Нова гра</button> <div id="game-board"></div> <div class="controls"> Керування: ← ↑ → ↓ (стрілки клавіатури) </div> <script> const SIZE = 7; const TOTAL = SIZE * SIZE; let values = new Array(TOTAL).fill(0); let score = 0; let best = parseInt(localStorage.getItem("best2048_7x7")) || 0; const board = document.getElementById("game-board"); const scoreEl = document.getElementById("score"); const bestEl = document.getElementById("best"); function createBoard() { board.innerHTML = ""; for (let i = 0; i < TOTAL; i++) { const tile = document.createElement("div"); tile.className = "tile"; board.appendChild(tile); } } function updateBest() { if (score > best) { best = score; localStorage.setItem("best2048_7x7", best); } } function updateBoard() { const tiles = board.children; for (let i = 0; i < TOTAL; i++) { const val = values[i]; tiles[i].textContent = val || ""; tiles[i].dataset.value = val || ""; } updateBest(); scoreEl.textContent = score; bestEl.textContent = best; } function addTile() { const empty = []; for (let i = 0; i < TOTAL; i++) { if (values[i] === 0) { empty.push(i); } } if (empty.length > 0) { const randomIndex = Math.floor(Math.random() * empty.length); const pos = empty[randomIndex]; values[pos] = Math.random() < 0.9 ? 2 : 4; } } function slide(line) { let arr = line.filter(v => v !== 0); for (let i = 0; i < arr.length - 1; i++) { if (arr[i] === arr[i + 1]) { arr[i] *= 2; score += arr[i]; arr[i + 1] = 0; } } arr = arr.filter(v => v !== 0); while (arr.length < SIZE) { arr.push(0); } return arr; } function move(direction) { let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let idx; if (direction === "left") idx = i * SIZE + j; if (direction === "right") idx = i * SIZE + (SIZE - 1 - j); if (direction === "up") idx = j * SIZE + i; if (direction === "down") idx = (SIZE - 1 - j) * SIZE + i; line.push(values[idx]); } const newLine = slide(line); for (let j = 0; j < SIZE; j++) { let idx; if (direction === "left") idx = i * SIZE + j; if (direction === "right") idx = i * SIZE + (SIZE - 1 - j); if (direction === "up") idx = j * SIZE + i; if (direction === "down") idx = (SIZE - 1 - j) * SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; } } } if (moved) { addTile(); updateBoard(); if (isGameOver()) { setTimeout(() => { alert("Гру завершено! Спробуй ще раз."); }, 100); } } } function isGameOver() { for (let i = 0; i < TOTAL; i++) { if (values[i] === 0) return false; } for (let row = 0; row < SIZE; row++) { for (let col = 0; col < SIZE; col++) { const current = values[row * SIZE + col]; if (col < SIZE - 1 && current === values[row * SIZE + col + 1]) { return false; } if (row < SIZE - 1 && current === values[(row + 1) * SIZE + col]) { return false; } } } return true; } function restart() { values = new Array(TOTAL).fill(0); score = 0; addTile(); addTile(); updateBoard(); } document.addEventListener("keydown", (e) => { if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) { e.preventDefault(); if (e.key === "ArrowLeft") move("left"); if (e.key === "ArrowRight") move("right"); if (e.key === "ArrowUp") move("up"); if (e.key === "ArrowDown") move("down"); } }); document.getElementById("restart").addEventListener("click", restart); createBoard(); restart(); </script> http://margo.mozello.shop/blog3/params/post/5250000/9 Thu, 07 May 2026 15:43:00 +0000 9999999999999999999999999999<hr class="moze-more-divider"><p>0</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048 (7×7) — Красиві кольори</title> <style> body { font-family: Arial, sans-serif; background: #faf8ef; margin: 0; padding: 10px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 36px; margin: 10px 0 5px; } .info { font-size: 20px; margin: 5px 0; } button { padding: 10px 20px; font-size: 17px; margin: 10px 0; border: none; border-radius: 8px; background: #8f7a66; color: white; cursor: pointer; } #game-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #bbada0; padding: 8px; border-radius: 12px; width: 100%; max-width: 480px; } .tile { background: #cdc1b4; min-height: 58px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 8px; font-size: 26px; transition: all 0.1s; } /* Основні кольори */ .tile[data-value="2"] { background: #eee4da; color: #776e65; } .tile[data-value="4"] { background: #ede0c8; color: #776e65; } .tile[data-value="8"] { background: #f2b179; color: white; } .tile[data-value="16"] { background: #f59563; color: white; } .tile[data-value="32"] { background: #f67c5f; color: white; } .tile[data-value="64"] { background: #f65e3b; color: white; } .tile[data-value="128"] { background: #edcf72; color: white; } .tile[data-value="256"] { background: #edcc61; color: white; } .tile[data-value="512"] { background: #edc850; color: white; } .tile[data-value="1024"] { background: #edc53f; color: white; } .tile[data-value="2048"] { background: #edc22e; color: white; } /* Яскраві кольори для великих чисел */ .tile[data-value="4096"] { background: #00b894; color: white; } .tile[data-value="8192"] { background: #00a8ff; color: white; } .tile[data-value="16384"] { background: #6c5ce7; color: white; } .tile[data-value="32768"] { background: #a55eea; color: white; } .tile[data-value="65536"] { background: #ff7675; color: white; } .tile[data-value="131072"]{ background: #fd79a8; color: white; } .tile[data-value^="262144"]{ background: #feca57; color: #2d3436; font-size: 22px; } </style> <h1>2048 (7×7) — Тест</h1> <div class="info" id="score">Очки: 0</div> <div class="info" id="best">Рекорд: 0</div> <button id="restart" fdprocessedid="pxw4e9">Нова гра</button> <div id="game-board"></div> <script> const SIZE = 7; const TOTAL = SIZE * SIZE; let values = new Array(TOTAL).fill(0); let score = 0; const board = document.getElementById('game-board'); const scoreEl = document.getElementById('score'); function createBoard() { board.innerHTML = ''; for (let i = 0; i < TOTAL; i++) { const tile = document.createElement('div'); tile.className = 'tile'; board.appendChild(tile); } } function updateBoard() { const tiles = board.children; for (let i = 0; i < TOTAL; i++) { const val = values[i]; tiles[i].textContent = val || ''; tiles[i].dataset.value = val || ''; } scoreEl.textContent = 'Очки: ' + score; } function addTile() { const empty = []; for (let i = 0; i < TOTAL; i++) if (values[i] === 0) empty.push(i); if (empty.length > 0) { const pos = empty[Math.floor(Math.random() * empty.length)]; values[pos] = Math.random() < 0.9 ? 2 : 4; } } function slide(line) { let arr = line.filter(v => v); for (let i = 0; i < arr.length - 1; i++) { if (arr[i] === arr[i + 1]) { arr[i] *= 2; score += arr[i]; arr[i + 1] = 0; } } arr = arr.filter(v => v); while (arr.length < SIZE) arr.push(0); return arr; } function move(dir) { let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let idx = (dir === 'left') ? i*SIZE + j : (dir === 'right') ? i*SIZE + (SIZE-1-j) : (dir === 'up') ? j*SIZE + i : (SIZE-1-j)*SIZE + i; line.push(values[idx]); } let newLine = slide(line); for (let j = 0; j < SIZE; j++) { let idx = (dir === 'left') ? i*SIZE + j : (dir === 'right') ? i*SIZE + (SIZE-1-j) : (dir === 'up') ? j*SIZE + i : (SIZE-1-j)*SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; } } } if (moved) { addTile(); updateBoard(); } } function restart() { values = new Array(TOTAL).fill(0); score = 0; addTile(); addTile(); updateBoard(); } createBoard(); restart(); document.addEventListener('keydown', e => { if (["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)) { e.preventDefault(); if (e.key === "ArrowLeft") move("left"); if (e.key === "ArrowRight") move("right"); if (e.key === "ArrowUp") move("up"); if (e.key === "ArrowDown") move("down"); } }); document.getElementById('restart').onclick = restart; </script> http://margo.mozello.shop/blog3/params/post/5198958/4 Fri, 23 Jan 2026 16:40:00 +0000 Початок 23 лютого 2026<p>3&nbsp; <span style="text-align: start; font-weight: 400; font-style: normal">Початок 23 лютого 2026</span></p> <p><span style="text-align: start; font-weight: 400; font-style: normal">3 2026&nbsp; Початок 1 березня кінець 9 березня<br> 4 почоток 10 березня&nbsp; кінець 12 березня 2 900 000&nbsp;&nbsp;</span></p> <p><span style="text-align: start; font-weight: 400; font-style: normal">початок&nbsp; &nbsp;26 03 2026</span></p> <p><span style="text-align: start; font-weight: 400; font-style: normal">початок 31 березня 2026 року</span></p> <p><span style="text-align: start; font-weight: 400; font-style: normal"><img src="https://site-2669532.mozfiles.com/files/2669532/12__03_2026____2_900_000.jpg" alt="12__03_2026____2_900_000.jpg"><br></span></p> <p><br></p> <meta charset="UTF-8"> <div class="game-theme-wrapper light" id="gameTheme"> <div class="theme-toggle" id="themeToggle">🌙 Темна тема</div> <h1>2048 (6×6)</h1> <div class="info" id="score">Очки: 0</div> <div class="info" id="best">Рекорд: 0</div> <button id="restart" fdprocessedid="3y1n4">Нова гра</button> <div id="game-board"></div> <div id="message"> <div id="message-text"></div> <button id="continue" fdprocessedid="xtnbda">Продовжити</button></div> </div> <script> /* ===== ПЕРЕМИКАЧ ТЕМИ ===== */ (function () { const w = document.getElementById("gameTheme"); const t = document.getElementById("themeToggle"); const saved = localStorage.getItem("theme2048"); if (saved === "dark") { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; } t.onclick = () => { if (w.classList.contains("dark")) { w.classList.replace("dark", "light"); t.textContent = "🌙 Темна тема"; localStorage.setItem("theme2048", "light"); } else { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; localStorage.setItem("theme2048", "dark"); } }; })(); </script> <script> /* ===== ГРА 2048 (6x6) ===== */ const board = document.getElementById('game-board'), scoreD = document.getElementById('score'), bestD = document.getElementById('best'), msg = document.getElementById('message'), msgT = document.getElementById('message-text'), cont = document.getElementById('continue'); const SIZE = 6; let values = [], tiles = [], score = 0, best = 0; let gameOver = false, allow = false; best = +localStorage.getItem('best2048_6x6') || 0; bestD.textContent = 'Рекорд: ' + best; function save() { localStorage.setItem('g2048v', JSON.stringify(values)); localStorage.setItem('g2048s', score); } function add() { const e = values.map((v, i) => v ? null : i).filter(v => v !== null); if (e.length) values[e[Math.random() * e.length | 0]] = Math.random() < .9 ? 2 : 4; } function draw() { tiles.forEach((t, i) => { t.textContent = values[i] || ''; t.dataset.value = values[i]; }); scoreD.textContent = 'Очки: ' + score; if (score > best) { best = score; bestD.textContent = 'Рекорд: ' + best; localStorage.setItem('best2048_6x6', best); } save(); } function slide(r) { r = r.filter(v => v); for (let i = 0; i < r.length - 1; i++) { if (r[i] === r[i + 1]) { r[i] *= 2; score += r[i]; r[i + 1] = 0; } } r = r.filter(v => v); while (r.length < SIZE) r.push(0); return r; } function move(d) { if (gameOver) return; let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; line.push(values[x]); } let newLine = slide(line); for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; if (values[x] !== newLine[j]) { values[x] = newLine[j]; moved = true; } } } if (moved) { add(); draw(); check(); } } function check() { if (!allow && values.includes(2048)) { msgT.textContent = 'Ви виграли 🎉'; msg.style.display = 'block'; gameOver = true; } else if (!values.includes(0)) { msgT.textContent = 'Гру завершено'; msg.style.display = 'block'; gameOver = true; } } function init() { board.innerHTML = ''; tiles = []; values = JSON.parse(localStorage.getItem('g2048v')) || Array(36).fill(0); score = +localStorage.getItem('g2048s') || 0; for (let i = 0; i < 36; i++) { let d = document.createElement('div'); d.className = 'tile'; board.appendChild(d); tiles.push(d); } if (!values.some(v => v)) { add(); add(); } draw(); } /* ⬇️ ВИПРАВЛЕННЯ: сторінка більше НЕ скролиться */ document.addEventListener('keydown', function (e) { const keys = { ArrowLeft: 'l', ArrowRight: 'r', ArrowUp: 'u', ArrowDown: 'd' }; if (keys[e.key]) { e.preventDefault(); move(keys[e.key]); } }); document.getElementById('restart').onclick = () => { values = Array(36).fill(0); score = 0; gameOver = false; allow = false; add(); add(); msg.style.display = 'none'; draw(); }; cont.onclick = () => { gameOver = false; allow = true; msg.style.display = 'none'; }; init(); </script> http://margo.mozello.shop/blog3/params/post/5190419/page Sat, 03 Jan 2026 18:38:00 +0000 оооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>2</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>2048 (6x6) Ускладнена</title> <style> body { font-family: -apple-system, sans-serif; display: flex; flex-direction: column; align-items: center; background: #faf8ef; margin: 0; touch-action: none; /* Prevent iOS scrolling */ -webkit-touch-callout: none; /* Disable iOS callouts */ -webkit-user-select: none; /* Disable text selection */ min-height: 80vh; } #game-board { display: grid; grid-template-columns: repeat(6, 10vw); gap: 2vw; margin: 4vw auto; max-width: 110vw; } .tile { width: 11vw; height: 5vw; background: #cdc1b4; font-size: calc(3vw); color: #776e65; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 3px; transition: transform 0.05s ease, background 0.05s ease; /* Прискорена анімація */ } .tile[data-value="2"] { background: #eee4da; } .tile[data-value="4"] { background: #ede0c8; } .tile[data-value="8"] { background: #f2b179; color: #f9f6f2; } .tile[data-value="16"] { background: #f59563; color: #f9f6f2; } .tile[data-value="32"] { background: #f67c5f; color: #f9f6f2; } .tile[data-value="64"] { background: #f65e3b; color: #f9f6f2; } .tile[data-value="128"] { background: #edcf72; color: #f9f6f2; } .tile[data-value="256"] { background: #edcc61; color: #f9f6f2; } .tile[data-value="512"] { background: #edc850; color: #f9f6f2; } .tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; } .tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; } .tile[data-value="4096"], .tile[data-value="8192"], .tile[data-value="16384"], .tile[data-value="32768"] { background: #0000e6; color: #ffeb3b; } .tile[data-value="65536"] { background: #DE3163; color: #f9f6f2; } .tile[data-value="131072"] { background: #DE3163; color: #f9f6f2; } .tile.moved { transform: scale(1.1); } h1 { font-size: 8vw; margin: 4vw 0; } .info { font-size: 4vw; margin: 2vw 0; } #message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffffdd; padding: 6vw; border-radius: 3vw; display: none; box-shadow: 0 0 10px rgba(0,0,0,0.3); text-align: center; z-index: 10; font-size: 5vw; } #message button { font-size: 4vw; padding: 2vw 4vw; margin-top: 2vw; border-radius: 2vw; min-width: 25vw; } #restart, #increase-level, #decrease-level { font-size: 4vw; padding: 2vw 4vw; border-radius: 2vw; min-width: 25vw; margin: 1vw; } .controls { display: flex; justify-content: center; margin: 2vw 0; } @media (max-width: 414px) { #game-board { grid-template-columns: repeat(6, 14vw); gap: 1vw; } .tile { width: 14vw; height: 14vw; font-size: calc(5vw); } h1 { font-size: 7vw; } .info { font-size: 3.5vw; } } </style> <h1>2048 (6x6) Ускладнена</h1> <div class="info" id="score">бали : 0</div> <div class="info" id="best">Рекорд: 0</div> <div class="info" id="level">Рівень: 1</div> <div class="controls"> <button id="restart" fdprocessedid="8y4t5">Нова гра</button> <button id="increase-level" fdprocessedid="kejura">Підвищити рівень</button> <button id="decrease-level" fdprocessedid="hmsjo">Понизити рівень</button> </div> <div id="game-board"></div> <div id="message"> <div id="message-text"></div> <button id="continue">Продовжити</button> </div> <script> const GRID_SIZE = 6; const TOTAL_TILES = GRID_SIZE * GRID_SIZE; const board = document.getElementById('game-board'); const scoreEl = document.getElementById('score'); const bestEl = document.getElementById('best'); const levelEl = document.getElementById('level'); const message = document.getElementById('message'); const messageText = document.getElementById('message-text'); const continueBtn = document.getElementById('continue'); const increaseLevelBtn = document.getElementById('increase-level'); const decreaseLevelBtn = document.getElementById('decrease-level'); let tiles, values, score, best, gameOver, allowContinue; let tilesToAdd = 1; let level = 1; function slide(line) { let newLine = line.filter(v => v !== 0); for (let i = 0; i < newLine.length - 1; i++) { if (newLine[i] === newLine[i + 1]) { newLine[i] *= 2; score += newLine[i]; newLine[i + 1] = 0; } } newLine = newLine.filter(v => v !== 0); while (newLine.length < GRID_SIZE) newLine.push(0); return newLine; } function updateBoard() { for (let i = 0; i < TOTAL_TILES; i++) { const v = values[i]; tiles[i].dataset.value = v || ''; tiles[i].textContent = v || ''; } } function updateScore() { scoreEl.textContent = `Окуляри: ${score}`; best = Math.max(best, score); bestEl.textContent = `Рекорд: ${best}`; localStorage.setItem('game2048_best_6x6', best); // Оновлення рівня на основі очок (автоматично, якщо потрібно) if (score > 1000 * level) { level++; tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; } } function addTile() { const empty = values.reduce((acc, v, i) => { if (!v) acc.push(i); return acc; }, []); if (empty.length) { const idx = empty[Math.floor(Math.random() * empty.length)]; values[idx] = Math.random() < 0.9 ? 2 : 4; } } function move(direction) { if (gameOver) return; let moved = false; for (let i = 0; i < GRID_SIZE; i++) { let line = []; for (let j = 0; j < GRID_SIZE; j++) { let idx = direction === 'left' ? i * GRID_SIZE + j : direction === 'right' ? i * GRID_SIZE + (GRID_SIZE - 1 - j) : direction === 'up' ? j * GRID_SIZE + i : (GRID_SIZE - 1 - j) * GRID_SIZE + i; line.push(values[idx]); } const newLine = slide(line); for (let j = 0; j < GRID_SIZE; j++) { let idx = direction === 'left' ? i * GRID_SIZE + j : direction === 'right' ? i * GRID_SIZE + (GRID_SIZE - 1 - j) : direction === 'up' ? j * GRID_SIZE + i : (GRID_SIZE - 1 - j) * GRID_SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; tiles[idx].classList.add('moved'); setTimeout(() => tiles[idx].classList.remove('moved'), 50); } } } if (moved) { for (let k = 0; k < tilesToAdd; k++) { addTile(); } updateBoard(); updateScore(); checkWinLose(); if (navigator.vibrate) navigator.vibrate(10); } } function checkWinLose() { if (!allowContinue && values.includes(2048)) { showMessage('Ви виграли! 🎉'); gameOver = true; } else if (!canMove()) { showMessage('Гру завершено!'); gameOver = true; } } function showMessage(text) { messageText.textContent = text; message.style.display = 'block'; } function restartGame() { values = new Array(TOTAL_TILES).fill(0); score = 0; level = 1; tilesToAdd = 1; gameOver = false; allowContinue = false; addTile(); addTile(); updateBoard(); updateScore(); levelEl.textContent = `Рівень: ${level}`; message.style.display = 'none'; saveGame(); } function increaseLevel() { level = Math.min(level + 1, 10); // Max level 10, for example tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; saveGame(); } function decreaseLevel() { level = Math.max(level - 1, 1); // Min level 1 tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; saveGame(); } function canMove() { if (values.includes(0)) return true; for (let i = 0; i < GRID_SIZE; i++) { for (let j = 0; j < GRID_SIZE - 1; j++) { if (values[i * GRID_SIZE + j] === values[i * GRID_SIZE + j + 1] || values[j * GRID_SIZE + i] === values[(j + 1) * GRID_SIZE + i]) return true; } } return false; } function saveGame() { localStorage.setItem('game2048_values_6x6', JSON.stringify(values)); localStorage.setItem('game2048_score_6x6', score); localStorage.setItem('game2048_level_6x6', level); localStorage.setItem('game2048_tilesToAdd_6x6', tilesToAdd); } function loadGame() { const savedValues = localStorage.getItem('game2048_values_6x6'); const savedScore = localStorage.getItem('game2048_score_6x6'); const savedLevel = localStorage.getItem('game2048_level_6x6'); const savedTilesToAdd = localStorage.getItem('game2048_tilesToAdd_6x6'); if (savedValues) { values = JSON.parse(savedValues); score = parseInt(savedScore) || 0; level = parseInt(savedLevel) || 1; tilesToAdd = parseInt(savedTilesToAdd) || 1; } else { values = new Array(TOTAL_TILES).fill(0); addTile(); addTile(); } updateBoard(); updateScore(); levelEl.textContent = `Рівень: ${level}`; } function loadBest() { best = parseInt(localStorage.getItem('game2048_best_6x6')) || 0; bestEl.textContent = `Рекорд: ${best}`; } function init() { tiles = []; board.innerHTML = ''; for (let i = 0; i < TOTAL_TILES; i++) { const tile = document.createElement('div'); tile.className = 'tile'; board.appendChild(tile); tiles.push(tile); } loadGame(); } document.addEventListener('keydown', e => { if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault(); move({ ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', ArrowDown: 'down' }[e.key]); } }); let startX, startY; board.addEventListener('touchstart', e => { e.preventDefault(); const t = e.touches[0]; startX = t.clientX; startY = t.clientY; }); board.addEventListener('touchend', e => { e.preventDefault(); const t = e.changedTouches[0]; const dx = t.clientX - startX; const dy = t.clientY - startY; if (Math.abs(dx) > Math.abs(dy)) { if (dx > 20) move('right'); else if (dx < -20) move('left'); } else { if (dy > 20) move('down'); else if (dy < -20) move('up'); } }); document.getElementById('restart').addEventListener('click', restartGame); increaseLevelBtn.addEventListener('click', increaseLevel); decreaseLevelBtn.addEventListener('click', decreaseLevel); continueBtn.addEventListener('click', () => { gameOver = false; allowContinue = true; message.style.display = 'none'; saveGame(); }); loadBest(); init(); </script> http://margo.mozello.shop/blog3/params/post/5185431/kr3 Thu, 18 Dec 2025 17:15:00 +0000 дддддддддддддддддддддд<hr class="moze-more-divider"><p>1</p><p><br></p><div class="rubik-cube-wrapper" style="display: flex; justify-content: center; align-items: center; margin: 20px 0; position: relative; height: auto; min-height: 400px;"> <style> .rubik-cube-container { width: 400px; /* Змініть цей розмір для збільшення/зменшення */ height: 419px; /* Висота повинна бути width + 19px для кнопок */ background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } </style> <script src="https://animcubejs.cubing.net/AnimCube3.js"></script> <div class="rubik-cube-container"> <script> AnimCube3("move=RUR'URU2R'U2&initrevmove=#&edit=1&demo=1"); </script> </div> </div> http://margo.mozello.shop/blog3/params/post/5164939/page Mon, 03 Nov 2025 12:18:00 +0000 лллллллллллллллллллллллллллл<hr class="moze-more-divider"><p>98 2</p><p><br></p><title>Lines 98 - Smaller Field for iOS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js" onerror="loadBackupP5()"></script> <script> function loadBackupP5() { console.log("Failed to load p5.js from primary CDN, trying backup..."); let script = document.createElement('script'); script.src = 'https://unpkg.com/p5@1.4.2/lib/p5.min.js'; script.onload = () => console.log("Backup p5.js loaded"); script.onerror = () => console.log("Failed to load p5.js"); document.head.appendChild(script); } </script> <style> body { margin: 0; padding: 0; background: linear-gradient(to bottom, #e0f7fa, #b3e5fc); font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; align-items: center; } #game-container { max-width: 100%; width: 100%; margin: 0 auto; padding: 5px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: center; box-sizing: border-box; position: relative; } canvas { display: block; margin: 0 auto; border-radius: 8px; touch-action: none; cursor: pointer; width: 100%; max-height: 100vh; } .bottom-controls { display: flex; gap: 10px; margin-top: 10px; } button { padding: 6px 12px; background: #0288d1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; z-index: 10; } button:hover, button:active { background: #0277bd; } @media (max-width: 400px) { #game-container { padding: 3px; } button { padding: 5px 10px; font-size: 10px; } canvas { max-width: 100%; max-height: calc(100vh - 10px); } } </style> <div id="game-container"> </div> <div class="bottom-controls"> <button id="restart" onclick="restartGame()">Restart</button> <button id="hint" onclick="showHint()">Hint</button> </div> <script> let grid; let cellSize; let gridSize = 9; let colors = ['#f44336', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0', '#00bcd4', '#ff9800']; let selectedBall = null; let score = 0; let gameOver = false; let nextBalls = []; let animation = null; let moveCount = 0; function setup() { console.log("p5.js setup started"); pixelDensity(2); // Support Retina display on iPhone 7 let maxWidth = Math.min(window.innerWidth - 10, 320); // Smaller width for iPhone 7 let maxHeight = Math.min(window.innerHeight - 10, 480); // Fit iPhone 7 height cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); // Reduced extra height let canvas = createCanvas(maxWidth, canvasHeight); canvas.parent('game-container'); canvas.style('touch-action', 'none'); console.log(`Canvas size: ${maxWidth}x${canvasHeight}, cellSize: ${cellSize}`); resetGame(); console.log("p5.js setup completed"); } function windowResized() { let maxWidth = Math.min(window.innerWidth - 10, 320); let maxHeight = Math.min(window.innerHeight - 10, 480); cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); resizeCanvas(maxWidth, canvasHeight); console.log(`Resized canvas: ${maxWidth}x${canvasHeight}`); } function resetGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); nextBalls = generateBalls(3); spawnBalls(nextBalls); nextBalls = generateBalls(3); score = 0; gameOver = false; animation = null; selectedBall = null; moveCount = 0; console.log("Game reset"); } function draw() { if (gameOver) { background(255); drawGrid(); drawBalls(); textAlign(CENTER); textSize(cellSize * 0.8); fill(255, 0, 0); text("Game Over!", width / 2, height / 2); return; } background(255); drawGrid(); drawBalls(); drawNextBalls(); drawScore(); if (animation) { let { startX, startY, endX, endY, color, progress } = animation; let x = lerp(startX, endX, progress); let y = lerp(startY, endY, progress); drawBall(x, y, color); animation.progress += 0.05; if (animation.progress >= 1) animation = null; } } function drawGrid() { stroke(200); for (let i = 0; i <= gridSize; i++) { line(i * cellSize, 0, i * cellSize, gridSize * cellSize); line(0, i * cellSize, gridSize * cellSize, i * cellSize); } } function drawBalls() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { drawBall(j * cellSize + cellSize / 2, i * cellSize + cellSize / 2, grid[i][j]); } } } if (selectedBall) { noFill(); stroke(0); strokeWeight(2); rect(selectedBall.j * cellSize, selectedBall.i * cellSize, cellSize, cellSize); } } function drawBall(x, y, color) { fill(color); noStroke(); ellipse(x, y, cellSize * 0.8); } function drawNextBalls() { textAlign(LEFT); textSize(14); fill(0); text("Next:", 10, gridSize * cellSize + 20); for (let i = 0; i < nextBalls.length; i++) { drawBall(60 + i * cellSize / 2, gridSize * cellSize + 20, nextBalls[i]); } } function drawScore() { textAlign(RIGHT); textSize(14); fill(0); text(`Score: ${score}`, width - 10, gridSize * cellSize + 20); } function generateBalls(count) { return Array(count).fill().map(() => random(colors)); } function spawnBalls(balls) { for (let color of balls) { let emptyCells = getEmptyCells(); if (emptyCells.length === 0) { gameOver = true; return; } let pos = random(emptyCells); grid[pos.i][pos.j] = color; } } function getEmptyCells() { let emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) emptyCells.push({ i, j }); } } return emptyCells; } function mousePressed() { if (gameOver || animation) return; let i = floor(mouseY / cellSize); let j = floor(mouseX / cellSize); if (i >= 0 && i < gridSize && j >= 0 && j < gridSize) { if (grid[i][j]) { selectedBall = { i, j }; } else if (selectedBall) { if (canMove(selectedBall.i, selectedBall.j, i, j)) { animateMove(selectedBall.i, selectedBall.j, i, j); moveBall(selectedBall.i, selectedBall.j, i, j); let lines = checkLines(); if (lines.length > 0) { removeLines(lines); } else { spawnBalls(nextBalls); nextBalls = generateBalls(3); } selectedBall = null; moveCount++; if (isGridFull()) gameOver = true; } } } } function animateMove(startI, startJ, endI, endJ) { animation = { startX: startJ * cellSize + cellSize / 2, startY: startI * cellSize + cellSize / 2, endX: endJ * cellSize + cellSize / 2, endY: endI * cellSize + cellSize / 2, color: grid[startI][startJ], progress: 0 }; } function canMove(startI, startJ, endI, endJ) { if (startI === endI && startJ === endJ) return false; let queue = [{ i: startI, j: startJ }]; let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); visited[startI][startJ] = true; let maxIterations = gridSize * gridSize; let iterations = 0; while (queue.length > 0) { iterations++; if (iterations > maxIterations) { console.log("canMove: Max iterations reached"); return false; } let { i, j } = queue.shift(); if (i === endI && j === endJ) return true; let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { queue.push({ i: ni, j: nj }); visited[ni][nj] = true; } } } return false; } function isAnyMovePossible() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); let queue = [{ i: si, j: sj }]; visited[si][sj] = true; while (queue.length > 0) { let { i, j } = queue.shift(); let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { return true; } } } } } } return false; } function moveBall(startI, startJ, endI, endJ) { grid[endI][endJ] = grid[startI][startJ]; grid[startI][startJ] = null; } function copyGrid(g) { return g.map(row => row.slice()); } function checkLine(startI, startJ, di, dj, customGrid = grid) { let line = [{ i: startI, j: startJ }]; let color = customGrid[startI][startJ]; let i = startI + di; let j = startJ + dj; let iterations = 0; let maxIterations = gridSize; while (i >= 0 && i < gridSize && j >= 0 && j < gridSize && customGrid[i][j] === color) { iterations++; if (iterations > maxIterations) { console.log("checkLine: Max iterations reached"); break; } line.push({ i, j }); i += di; j += dj; } return line; } function checkLines(customGrid = grid) { let lines = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (customGrid[i][j]) { let hLine = checkLine(i, j, 0, 1, customGrid); if (hLine.length >= 5) lines.push(hLine); let vLine = checkLine(i, j, 1, 0, customGrid); if (vLine.length >= 5) lines.push(vLine); let d1Line = checkLine(i, j, 1, -1, customGrid); if (d1Line.length >= 5) lines.push(d1Line); let d2Line = checkLine(i, j, 1, 1, customGrid); if (d2Line.length >= 5) lines.push(d2Line); } } } let uniqueLines = []; let removed = new Set(); for (let line of lines) { let positions = line.map(p => `${p.i},${p.j}`); if (!positions.some(pos => removed.has(pos))) { uniqueLines.push(line); positions.forEach(pos => removed.add(pos)); } } return uniqueLines; } function removeLines(lines) { for (let line of lines) { for (let { i, j } of line) { grid[i][j] = null; } score += line.length * 2; } } function isGridFull() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) return false; } } return true; } function findHelpfulMove() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { for (let ei = 0; ei < gridSize; ei++) { for (let ej = 0; ej < gridSize; ej++) { if (!grid[ei][ej] && canMove(si, sj, ei, ej)) { let tempGrid = copyGrid(grid); tempGrid[ei][ej] = tempGrid[si][sj]; tempGrid[si][sj] = null; let lines = checkLines(tempGrid); if (lines.length > 0) { return { from: { i: si, j: sj }, to: { i: ei, j: ej } }; } } } } } } } return null; } function showHint() { if (gameOver) { alert("Game is over!"); return; } let move = findHelpfulMove(); if (move) { alert(`Move ball from row ${move.from.i + 1}, col ${move.from.j + 1} to row ${move.to.i + 1}, col ${move.to.j + 1}`); } else { alert("No immediate line-forming move found."); } } function restartGame() { resetGame(); console.log("Game restarted via button"); } </script>