http://margo.mozello.shop/gry/ Маргарита - Ігри http://margo.mozello.shop/gry/params/post/5199027/2048-6-6 Fri, 23 Jan 2026 22:22:00 +0000 Темна тема<hr class="moze-more-divider"><p>4</p><p><br></p><meta charset="UTF-8"> <style> /* ===== ОБГОРТКА З ТЕМАМИ ===== */ .game-theme-wrapper { padding: 25px 20px; border-radius: 14px; font-family: sans-serif; text-align: center; transition: background-color .3s, color .3s; } /* Світла тема */ .game-theme-wrapper.light { background: #faf8ef; color: #333; } /* Темна ЗЕЛЕНА тема */ .game-theme-wrapper.dark { background: #0f1f1a; color: #e0f2ea; } /* Кнопка теми */ .theme-toggle { display: inline-block; margin-bottom: 15px; padding: 8px 16px; background: #2d6a4f; color: #fff; border-radius: 20px; cursor: pointer; font-size: 14px; } .theme-toggle:hover { background: #40916c; } /* Заголовки */ .game-theme-wrapper.dark h1, .game-theme-wrapper.dark .info { color: #b7e4c7; } /* Кнопка нової гри */ #restart { margin: 10px 0; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; } /* ===== ДОШКА ГРИ ===== */ #game-board { display: grid; grid-template-columns: repeat(6, 80px); gap: 8px; justify-content: center; margin: 20px auto; padding: 10px; border-radius: 10px; } /* Темна тема — фон дошки */ .game-theme-wrapper.dark #game-board { background: #1b3a2f; } /* Клітинки */ .tile { width: 110px; height: 40px; background: #cdc1b4; font-size: 24px; color: #776e65; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 5px; } /* Кольори плиток */ .tile[data-value="2"] { background: #eee4da; } .tile[data-value="4"] { background: #ede0c8; } .tile[data-value="8"] { background: #f2b179; color: #fff; } .tile[data-value="16"] { background: #f59563; color: #fff; } .tile[data-value="32"] { background: #f67c5f; color: #fff; } .tile[data-value="64"] { background: #f65e3b; color: #fff; } .tile[data-value="128"] { background: #edcf72; color: #fff; } .tile[data-value="256"] { background: #edcc61; color: #fff; } .tile[data-value="512"] { background: #edc850; color: #fff; } .tile[data-value="1024"] { background: #edc53f; color: #fff; } .tile[data-value="2048"] { background: #edc22e; color: #fff; } /* Повідомлення */ #message { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #ffffffee; padding: 25px; border-radius: 10px; display: none; z-index: 10; } </style> <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">Продовжити</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/gry/params/post/5144256/revers Sat, 04 Oct 2025 19:55:00 +0000 <img src="https://site-2669532.mozfiles.com/files/2669532/medium/gra_revers.jpg" style="width: 189px;">У світі настільних ігор є одна, яка поєднує простоту правил і глибину стратегії — це Реверсі. Вона не потребує складного обладнання, але здатна захопити на години. У цій бесіді ми розглянемо, чому Реверсі варта вашої уваги, як у неї грати, і що вона дає гравцеві. <hr class="moze-more-divider"><p>1</p><p><br></p><p><br></p> <meta charset="UTF-8"> <title>Реверсі: Гравець vs Комп'ютер</title> <style> canvas { background: #0a0; display: block; margin: 20px auto; } body { text-align: center; font-family: sans-serif; } details { margin: 20px auto; width: 80%; text-align: left; } summary { font-weight: bold; cursor: pointer; } </style> <h1>Гра Реверсі</h1> <canvas id="board" width="320" height="320"></canvas> <p>Поточний гравець: <span id="player">Гравець (Чорний)</span></p> <details> <summary>📘 Правила гри та інструкція</summary> <p><b>Мета гри:</b> захопити більше клітинок, ніж суперник, перетворюючи його фішки на свої.</p> <p><b>Початок:</b> гра починається з 4 фішками в центрі дошки. Гравець — чорний, комп’ютер — білий.</p> <p><b>Хід:</b> фішка ставиться так, щоб між новою фішкою і вже наявною була хоча б одна фішка суперника. Всі такі фішки перевертаються.</p> <p><b>Коли немає ходів:</b> якщо гравець не має допустимих ходів — хід переходить супернику.</p> <p><b>Завершення гри:</b> коли дошка заповнена або жоден гравець не має ходів. Перемагає той, у кого більше фішок.</p> </details> <script> const canvas = document.getElementById("board"); const ctx = canvas.getContext("2d"); const size = 8; const cell = canvas.width / size; let board = Array(size).fill().map(() => Array(size).fill(null)); board[3][3] = board[4][4] = "W"; board[3][4] = board[4][3] = "B"; let current = "B"; function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { ctx.strokeRect(x * cell, y * cell, cell, cell); if (board[x][y]) { ctx.beginPath(); ctx.arc(x * cell + cell / 2, y * cell + cell / 2, cell / 2 - 4, 0, Math.PI * 2); ctx.fillStyle = board[x][y] === "B" ? "black" : "white"; ctx.fill(); } } } } function isValid(x, y, player) { if (board[x][y]) return false; const opp = player === "B" ? "W" : "B"; const dirs = [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]]; for (let [dx, dy] of dirs) { let nx = x + dx, ny = y + dy, found = false; while (nx >= 0 && ny >= 0 && nx < size && ny < size) { if (board[nx][ny] === opp) found = true; else if (board[nx][ny] === player && found) return true; else break; nx += dx; ny += dy; } } return false; } function flip(x, y, player) { board[x][y] = player; const opp = player === "B" ? "W" : "B"; const dirs = [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]]; for (let [dx, dy] of dirs) { let nx = x + dx, ny = y + dy, path = []; while (nx >= 0 && ny >= 0 && nx < size && ny < size) { if (board[nx][ny] === opp) path.push([nx, ny]); else if (board[nx][ny] === player) { for (let [px, py] of path) board[px][py] = player; break; } else break; nx += dx; ny += dy; } } } function getValidMoves(player) { let moves = []; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { if (isValid(x, y, player)) moves.push([x, y]); } } return moves; } function countDiscs() { let black = 0, white = 0; for (let row of board) { for (let cell of row) { if (cell === "B") black++; if (cell === "W") white++; } } return { black, white }; } function checkEndGame() { const movesB = getValidMoves("B"); const movesW = getValidMoves("W"); const full = board.flat().every(cell => cell !== null); if ((movesB.length === 0 && movesW.length === 0) || full) { const { black, white } = countDiscs(); let result = ""; if (black > white) result = "Ви перемогли!"; else if (white > black) result = "Комп’ютер переміг!"; else result = "Нічия!"; alert(`${result}\nЧорних: ${black}\nБілих: ${white}`); } } function checkTurn() { let moves = getValidMoves(current); if (moves.length === 0) { alert("Ходів немає. Хід переходить супернику."); current = current === "B" ? "W" : "B"; document.getElementById("player").textContent = current === "B" ? "Гравець (Чорний)" : "Комп'ютер (Білий)"; drawBoard(); if (current === "W") { setTimeout(computerMove, 500); } } } function computerMove() { let moves = getValidMoves("W"); if (moves.length > 0) { let [x, y] = moves[0]; flip(x, y, "W"); current = "B"; document.getElementById("player").textContent = "Гравець (Чорний)"; drawBoard(); checkEndGame(); checkTurn(); } else { alert("Комп'ютер не має ходів. Хід переходить гравцю."); current = "B"; document.getElementById("player").textContent = "Гравець (Чорний)"; drawBoard(); checkEndGame(); checkTurn(); } } canvas.addEventListener("click", e => { if (current !== "B") return; const x = Math.floor(e.offsetX / cell); const y = Math.floor(e.offsetY / cell); if (isValid(x, y, "B")) { flip(x, y, "B"); current = "W"; document.getElementById("player").textContent = "Комп'ютер (Білий)"; drawBoard(); checkEndGame(); setTimeout(computerMove, 500); } else { checkTurn(); } }); drawBoard(); </script> http://margo.mozello.shop/gry/params/post/5141570/mozaka-majstrv-7 Thu, 02 Oct 2025 14:15:00 +0000 <span style="text-align: start; font-weight: 400; font-style: normal">Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу<br>на телефоні поворот блоку інший. Гра поводитися трохи дивно і треба призвичаїтись., але кмітлива дитина розбереться<br></span> <hr class="moze-more-divider"><p>2 жовтня 2025</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #8A2BE2; /* Фіолетовий фон сторінки */ font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #98FF98; /* Салатовий фон гри */ max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="rcbg5m">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші або довге натискання (300мс).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Двохпальцевий тап.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('active')); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } const shapes = { single: [[1]], l: [[1, 1], [1, 0]], t: [[1, 1, 1], [0, 1, 0]], i4: [[1, 1, 1, 1]], square: [[1, 1], [1, 1]], z: [[1, 1, 0], [0, 1, 1]], i5: [[1, 1, 1, 1, 1]], i3: [[1, 1, 1]], i2: [[1, 1]], diagonal2: [[1, 0], [0, 1]], diagonal3: [[1, 0, 0], [0, 1, 0], [0, 0, 1]] }; const colors = ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#00CED1', '#0000FF', '#800080']; // Веселка: червоний, оранжевий, жовтий, зелений, блакитний, синій, фіолетовий const cellSize = 30; const gridSize = 10; let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let currentBlocks = []; let selectedBlock = null; let score = 0; let highScore = localStorage.getItem('blockLegendHighScore') || 0; let gameActive = true; let gamePaused = false; let lastMove = null; const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); highScoreElement.textContent = `Рекорд: ${highScore}`; function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#ddd'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? 'rgba(0, 255, 0, 0.5)' : 'rgba(255, 0, 0, 0.5)'; ctx.fillRect((x + sx) * cellSize, (y + sy) * cellSize, cellSize, cellSize); } } } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { if (x + sx < 0 || x + sx >= gridSize || y + sy < 0 || y + sy >= gridSize || grid[y + sy][x + sx]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } drawGrid(); checkLines(); } function rotateShape(shape) { return shape[0].map((_, col) => shape.map(row => row[col]).reverse()); } function flipShape(shape) { return shape.map(row => row.reverse()); } function generateBlock() { const shapeKeys = Object.keys(shapes); const randomShapeKey = shapeKeys[Math.floor(Math.random() * shapeKeys.length)]; const shape = shapes[randomShapeKey]; const color = colors[Math.floor(Math.random() * colors.length)]; return { shape, color }; } function generateBlocks() { while (currentBlocks.length < 3) { currentBlocks.push(generateBlock()); } for (let i = 0; i < 3; i++) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const bctx = blockCanvas.getContext('2d'); bctx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const blockSize = 20; const offsetX = (blockCanvas.width - shape[0].length * blockSize) / 2; const offsetY = (blockCanvas.height - shape.length * blockSize) / 2; const gradient = bctx.createLinearGradient(0, 0, 0, blockSize * shape.length); gradient.addColorStop(0, color); gradient.addColorStop(1, lightenColor(color, 0.3)); // Світлий градієнт для огранки for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { bctx.fillStyle = gradient; bctx.fillRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); bctx.strokeStyle = lightenColor(color, 0.6); // Світлий контур bctx.lineWidth = 2; bctx.strokeRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); } } } } // Функція для освітлення кольору function lightenColor(color, percent) { const num = parseInt(color.replace("#", ""), 16); const r = Math.min(255, Math.floor((num >> 16) * (1 + percent))); const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) * (1 + percent))); const b = Math.min(255, Math.floor((num & 0x0000FF) * (1 + percent))); return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`; } function drawShapePreview(id, shape, color) { const canvas = document.getElementById(id); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const blockSize = 15; const offsetX = (canvas.width - shape[0].length * blockSize) / 2; const offsetY = (canvas.height - shape.length * blockSize) / 2; const gradient = ctx.createLinearGradient(0, 0, 0, blockSize * shape.length); gradient.addColorStop(0, color); gradient.addColorStop(1, lightenColor(color, 0.3)); for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = gradient; ctx.fillRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); ctx.strokeStyle = lightenColor(color, 0.6); ctx.lineWidth = 1; ctx.strokeRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); } } } } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => { bonusMessageElement.style.display = 'none'; }, 2000); } function checkLines() { let linesCleared = 0; for (let i = 0; i < gridSize; i++) { if (grid[i].every(cell => cell)) { grid[i] = Array(gridSize).fill(null); linesCleared++; } let colFull = true; for (let j = 0; j < gridSize; j++) { if (!grid[j][i]) { colFull = false; break; } } if (colFull) { for (let j = 0; j < gridSize; j++) { grid[j][i] = null; } linesCleared++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; } } drawGrid(); checkGameOver(); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); let touchStartX = 0; let touchStartY = 0; const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); // Record initial touch position for movement tolerance const touch = e.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; // Two-finger tap detection for flipping if (e.touches.length === 2) { const touch1 = e.touches[0]; const touch2 = e.touches[1]; const moveTolerance = 10; // Pixels of movement allowed const dx1 = Math.abs(touch1.clientX - touchStartX); const dy1 = Math.abs(touch1.clientY - touchStartY); const dx2 = Math.abs(touch2.clientX - touchStartX); const dy2 = Math.abs(touch2.clientY - touchStartY); if (dx1 < moveTolerance && dy1 < moveTolerance && dx2 < moveTolerance && dy2 < moveTolerance) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (двохпальцевий тап):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); e.preventDefault(); // Prevent default behavior (e.g., zoom) } return; // Exit early to avoid long-press interference } // Long-press detection for rotation let touchStartTime = Date.now(); const touchHoldTimeout = setTimeout(() => { if (Date.now() - touchStartTime >= 300 && e.touches.length === 1) { // Reduced to 300ms currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто (довге натискання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }, 300); // Cancel timeout on touchend or touchmove const touchEndOrMove = (event) => { const currentTouch = event.touches[0] || event.changedTouches[0]; const dx = Math.abs(currentTouch.clientX - touchStartX); const dy = Math.abs(currentTouch.clientY - touchStartY); if (dx > 10 || dy > 10) { // Cancel if significant movement clearTimeout(touchHoldTimeout); } }; canvas.addEventListener('touchend', touchEndOrMove, { once: true }); canvas.addEventListener('touchmove', touchEndOrMove, { once: true }); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } drawGrid(); }); // Ініціалізація попередніх зображень блоків drawShapePreview('shapeSingle', shapes.single, colors[0]); drawShapePreview('shapeL', shapes.l, colors[1]); drawShapePreview('shapeT', shapes.t, colors[2]); drawShapePreview('shapeI4', shapes.i4, colors[3]); drawShapePreview('shapeSquare', shapes.square, colors[4]); drawShapePreview('shapeZ', shapes.z, colors[5]); drawShapePreview('shapeI5', shapes.i5, colors[0]); drawShapePreview('shapeI3', shapes.i3, colors[1]); drawShapePreview('shapeI2', shapes.i2, colors[2]); drawShapePreview('shapeDiagonal2', shapes.diagonal2, colors[3]); drawShapePreview('shapeDiagonal3', shapes.diagonal3, colors[4]); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5141394/mm6 Thu, 02 Oct 2025 10:30:00 +0000 рррррррррррррррррррррр<hr class="moze-more-divider"><p>6</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="62619d">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші або довге натискання (300мс).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Двохпальцевий тап.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[10], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[11], colors[11]); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const shape = blockShapes[shapeIndex]; const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: shape, color: colors[colorIndex] }); drawBlock(i, shape, colors[colorIndex]); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - (shape[0].length * blockCellSize)) / 2; const offsetY = (canvas.height - (shape.length * blockCellSize)) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const rotated = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { rotated[x][rows - 1 - y] = shape[y][x]; } } return rotated; } function flipShape(shape) { return shape.map(row => [...row].reverse()); } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); let touchStartX = 0; let touchStartY = 0; const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); // Record initial touch position for movement tolerance const touch = e.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; // Two-finger tap detection for flipping if (e.touches.length === 2) { const touch1 = e.touches[0]; const touch2 = e.touches[1]; const moveTolerance = 10; // Pixels of movement allowed const dx1 = Math.abs(touch1.clientX - touchStartX); const dy1 = Math.abs(touch1.clientY - touchStartY); const dx2 = Math.abs(touch2.clientX - touchStartX); const dy2 = Math.abs(touch2.clientY - touchStartY); if (dx1 < moveTolerance && dy1 < moveTolerance && dx2 < moveTolerance && dy2 < moveTolerance) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (двохпальцевий тап):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); e.preventDefault(); // Prevent default behavior (e.g., zoom) } return; // Exit early to avoid long-press interference } // Long-press detection for rotation let touchStartTime = Date.now(); const touchHoldTimeout = setTimeout(() => { if (Date.now() - touchStartTime >= 300 && e.touches.length === 1) { // Reduced to 300ms currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто (довге натискання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }, 300); // Cancel timeout on touchend or touchmove const touchEndOrMove = (event) => { const currentTouch = event.touches[0] || event.changedTouches[0]; const dx = Math.abs(currentTouch.clientX - touchStartX); const dy = Math.abs(currentTouch.clientY - touchStartY); if (dx > 10 || dy > 10) { // Cancel if significant movement clearTimeout(touchHoldTimeout); } }; canvas.addEventListener('touchend', touchEndOrMove, { once: true }); canvas.addEventListener('touchmove', touchEndOrMove, { once: true }); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5141333/mozaka-majstrv Thu, 02 Oct 2025 09:25:00 +0000 ооооооооооооооооооооооооо<hr class="moze-more-divider"><p>15</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer" style="display: flex; align-items: flex-start; justify-content: center; gap: 20px;"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші (90°).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Подвійне торкання.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[10], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[11], colors[11]); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const shape = blockShapes[shapeIndex]; const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: shape, color: colors[colorIndex] }); drawBlock(i, shape, colors[colorIndex]); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - (shape[0].length * blockCellSize)) / 2; const offsetY = (canvas.height - (shape.length * blockCellSize)) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const rotated = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { rotated[x][rows - 1 - y] = shape[y][x]; } } return rotated; } function flipShape(shape) { return shape.map(row => [...row].reverse()); } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5140019/mm3 Tue, 30 Sep 2025 14:12:00 +0000 оооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>3</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9 (Виправлена)</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } #rotateButtons { margin-top: 10px; display: flex; gap: 5px; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9 (Виправлена)</h2> <p>Права кнопка миші — поворот блоку на 90°, Жест двома пальцями — поворот на кут, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="imgj4r">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div id="rotateButtons"> <button onclick="rotateSelectedBlock(90)">90°</button> <button onclick="rotateSelectedBlock(180)">180°</button> <button onclick="rotateSelectedBlock(270)">270°</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються знизу для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Кнопки 90°/180°/270° або жест двома пальцями.</li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let selectedBlockIndex = -1; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[1], colors[1]); drawTableBlock('shapeT', blockShapes[2], colors[2]); drawTableBlock('shapeI4', blockShapes[3], colors[3]); drawTableBlock('shapeSquare', blockShapes[4], colors[4]); drawTableBlock('shapeZ', blockShapes[5], colors[0]); drawTableBlock('shapeI5', blockShapes[6], colors[5]); drawTableBlock('shapeI3', blockShapes[7], colors[6]); drawTableBlock('shapeI2', blockShapes[8], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[9], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[10], colors[11]); function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); let touchStart = { x1: 0, y1: 0, x2: 0, y2: 0, time: 0 }; blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; selectedBlockIndex = index; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); selectedBlock = null; selectedBlockIndex = -1; drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; rotateSelectedBlock(90, index); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто на 90°:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused || e.touches.length < 1) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; selectedBlockIndex = index; canvas.classList.add('dragging'); if (e.touches.length === 1) { touchStart = { x1: e.touches[0].clientX, y1: e.touches[0].clientY, time: Date.now() }; } else if (e.touches.length === 2) { touchStart = { x1: e.touches[0].clientX, y1: e.touches[0].clientY, x2: e.touches[1].clientX, y2: e.touches[1].clientY, time: Date.now() }; } console.log('Початок сенсорного перетягування/ротації блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || gamePaused || e.touches.length !== 2 || selectedBlockIndex === -1) return; const touch1 = e.touches[0]; const touch2 = e.touches[1]; const dx = touch2.clientX - touch1.clientX; const dy = touch2.clientY - touch1.clientY; const startDx = touchStart.x2 - touchStart.x1; const startDy = touchStart.y2 - touchStart.y1; let angle = Math.atan2(dy, dx) - Math.atan2(startDy, startDx); angle = Math.round(degrees(angle) / 90) * 90; // Округлення до найближчих 90° rotateSelectedBlock(angle, selectedBlockIndex); drawBlock(selectedBlockIndex, currentBlocks[selectedBlockIndex].shape, currentBlocks[selectedBlockIndex].color); touchStart = { x1: touch1.clientX, y1: touch1.clientY, x2: touch2.clientX, y2: touch2.clientY, time: Date.now() }; }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${selectedBlockIndex}, блок:`, JSON.stringify(selectedBlock)); if (selectedBlockIndex >= 0 && selectedBlockIndex < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, selectedBlockIndex); currentBlocks.splice(selectedBlockIndex, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; selectedBlockIndex = -1; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); touchStart = null; }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; selectedBlockIndex = -1; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: blockShapes[shapeIndex], color: colors[colorIndex] }); drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - maxSize * blockCellSize) / 2; const offsetY = (canvas.height - maxSize * blockCellSize) / 2; for (let y = 0; y < shape.length; y++) { for (let x = 0; x < shape[y].length; x++) { if (shape[y][x]) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } } } } function rotateSelectedBlock(angle, index) { if (index === undefined || index < 0 || index >= currentBlocks.length) { console.error('Невірний індекс блоку для ротації:', index); return; } let shape = currentBlocks[index].shape; let newShape = Array(shape[0].length).fill().map(() => Array(shape.length).fill(0)); for (let y = 0; y < shape.length; y++) { for (let x = 0; x < shape[y].length; x++) { let newX, newY; if (angle === 90) { newX = shape.length - 1 - y; newY = x; } else if (angle === 180) { newX = shape[y].length - 1 - x; newY = shape.length - 1 - y; } else if (angle === 270) { newX = y; newY = shape[0].length - 1 - x; } else { return; // Нічого не робимо для інших кутів } newShape[newY][newX] = shape[y][x]; } } currentBlocks[index].shape = newShape; drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log(`Блок повернуто на ${angle}°:`, index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } function flipShape(shape) { return shape[0].map((_, col) => shape.map(row => row[col]).reverse()); } function undoMove() { if (lastMove) { grid = lastMove.grid; score = lastMove.score; currentBlocks[lastMove.blockIndex] = lastMove.block; scoreElement.textContent = `Очки: ${score}`; drawGrid(); drawBlock(lastMove.blockIndex, currentBlocks[lastMove.blockIndex].shape, currentBlocks[lastMove.blockIndex].color); lastMove = null; undoButton.disabled = true; console.log('Хід скасовано'); } } generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5139951/mm2 Tue, 30 Sep 2025 11:51:00 +0000 ооооооооооооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>1</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="imgj4r">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються знизу для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші (90°).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Подвійне торкання.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[10], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[11], colors[11]); function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => { bonusMessageElement.style.display = 'none'; }, 2000); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const newShape = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { newShape[x][rows - 1 - y] = shape[y][x]; } } return newShape; } function flipShape(shape) { const newShape = shape.map(row => [...row].reverse()); return newShape; } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; const { grid: prevGrid, score: prevScore, block, blockIndex } = lastMove; grid = prevGrid.map(row => [...row]); score = prevScore; scoreElement.textContent = `Очки: ${score}`; currentBlocks.splice(blockIndex, 0, block); for (let i = 0; i < 3; i++) { if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } else { document.getElementById(`block${i + 1}`).getContext('2d').clearRect(0, 0, 80, 80); } } lastMove = null; undoButton.disabled = true; drawGrid(); console.log('Хід скасовано'); } function generateBlocks() { console.log('Генеруються нові блоки, поточна кількість:', currentBlocks.length); currentBlocks = []; for (let i = 1; i <= 3; i++) { document.getElementById(`block${i}`).getContext('2d').clearRect(0, 0, 80, 80); } for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const color = colors[Math.floor(Math.random() * colors.length)]; currentBlocks.push({ shape: blockShapes[shapeIndex], color }); drawBlock(i, blockShapes[shapeIndex], color); console.log(`Згенеровано блок ${i + 1}: форма ${JSON.stringify(blockShapes[shapeIndex])}, колір ${color}`); } console.log('Нові блоки створено:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); drawGrid(); } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const blockCtx = blockCanvas.getContext('2d'); blockCtx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = Math.min(blockCanvas.width / maxSize, blockCanvas.height / maxSize) * 0.9; const offsetX = (blockCanvas.width - maxSize * blockCellSize) / 2; const offsetY = (blockCanvas.height - maxSize * blockCellSize) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5139155/gra-mozaka-majstrv Sun, 28 Sep 2025 11:32:00 +0000 <span style="text-align: start; font-weight: 300; font-style: normal">Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ход<br>гру створив вебпрограміст Бурка Мирон<br></span><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.7</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.7</h2> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="94ja">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються знизу для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші (90°).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Подвійне торкання.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => { bonusMessageElement.style.display = 'none'; }, 2000); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const newShape = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { newShape[x][rows - 1 - y] = shape[y][x]; } } return newShape; } function flipShape(shape) { const newShape = shape.map(row => [...row].reverse()); return newShape; } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; const { grid: prevGrid, score: prevScore, block, blockIndex } = lastMove; grid = prevGrid.map(row => [...row]); score = prevScore; scoreElement.textContent = `Очки: ${score}`; currentBlocks.splice(blockIndex, 0, block); for (let i = 0; i < 3; i++) { if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } else { document.getElementById(`block${i + 1}`).getContext('2d').clearRect(0, 0, 80, 80); } } lastMove = null; undoButton.disabled = true; drawGrid(); console.log('Хід скасовано'); } function generateBlocks() { console.log('Генеруються нові блоки, поточна кількість:', currentBlocks.length); currentBlocks = []; for (let i = 1; i <= 3; i++) { document.getElementById(`block${i}`).getContext('2d').clearRect(0, 0, 80, 80); } for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const color = colors[Math.floor(Math.random() * colors.length)]; currentBlocks.push({ shape: blockShapes[shapeIndex], color }); drawBlock(i, blockShapes[shapeIndex], color); console.log(`Згенеровано блок ${i + 1}: форма ${JSON.stringify(blockShapes[shapeIndex])}, колір ${color}`); } console.log('Нові блоки створено:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); drawGrid(); } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const blockCtx = blockCanvas.getContext('2d'); blockCtx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = Math.min(blockCanvas.width / maxSize, blockCanvas.height / maxSize) * 0.9; const offsetX = (blockCanvas.width - maxSize * blockCellSize) / 2; const offsetY = (blockCanvas.height - maxSize * blockCellSize) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.7'); </script> http://margo.mozello.shop/gry/params/post/5139139/gra-shozha-na-tetrs Sun, 28 Sep 2025 10:40:00 +0000 гггггггггггггггггггг <hr class="moze-more-divider"> <p>2</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Блоки Легенда — Версія 1.5</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } #blockTable { width: 100%; max-width: 500px; border-collapse: collapse; margin-bottom: 15px; } #blockTable th, #blockTable td { border: 1px solid #333; padding: 8px; text-align: center; } #blockTable th { background-color: #ddd; } #blockTable canvas { border: 1px solid #ccc; } </style> <table id="blockTable"> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td> <canvas id="shapeSingle" width="60" height="60"></canvas> </td> <td> <pre>[[1]]</pre> </td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td> <canvas id="shapeL" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1], <br>[1, 0]]</pre> </td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td> <canvas id="shapeT" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1], <br>[0, 1, 0]]</pre> </td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td> <canvas id="shapeI4" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1, 1]]</pre> </td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td> <canvas id="shapeSquare" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1], <br>[1, 1]]</pre> </td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td> <canvas id="shapeZ" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 0], <br>[0, 1, 1]]</pre> </td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td> <canvas id="shapeI5" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1, 1, 1]]</pre> </td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td> <canvas id="shapeI3" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1]]</pre> </td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td> <canvas id="shapeI2" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1]]</pre> </td> <td>Для коротких рядків/стовпців</td> </tr> </tbody> </table> <h2>Блоки Легенда — Версія 1.5</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="q11yh8">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ллллллллллллллллллллллллллллл</div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <script> const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080']; function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => { bonusMessageElement.style.display = 'none'; }, 2000); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const newShape = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { newShape[x][rows - 1 - y] = shape[y][x]; } } return newShape; } function flipShape(shape) { const newShape = shape.map(row => [...row].reverse()); return newShape; } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; const { grid: prevGrid, score: prevScore, block, blockIndex } = lastMove; grid = prevGrid.map(row => [...row]); score = prevScore; scoreElement.textContent = `Очки: ${score}`; currentBlocks.splice(blockIndex, 0, block); for (let i = 0; i < 3; i++) { if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } else { document.getElementById(`block${i + 1}`).getContext('2d').clearRect(0, 0, 80, 80); } } lastMove = null; undoButton.disabled = true; drawGrid(); console.log('Хід скасовано'); } function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); function generateBlocks() { console.log('Генеруються нові блоки, поточна кількість:', currentBlocks.length); currentBlocks = []; for (let i = 1; i <= 3; i++) { document.getElementById(`block${i}`).getContext('2d').clearRect(0, 0, 80, 80); } for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const color = colors[Math.floor(Math.random() * colors.length)]; currentBlocks.push({ shape: blockShapes[shapeIndex], color }); drawBlock(i, blockShapes[shapeIndex], color); console.log(`Згенеровано блок ${i + 1}: форма ${JSON.stringify(blockShapes[shapeIndex])}, колір ${color}`); } console.log('Нові блоки створено:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); drawGrid(); } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const blockCtx = blockCanvas.getContext('2d'); blockCtx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = Math.min(blockCanvas.width / maxSize, blockCanvas.height / maxSize) * 0.9; const offsetX = (blockCanvas.width - maxSize * blockCellSize) / 2; const offsetY = (blockCanvas.height - maxSize * blockCellSize) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне торкання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Версія 1.5'); </script> http://margo.mozello.shop/gry/params/post/5139131/persha-novina Sun, 28 Sep 2025 10:21:00 +0000 <p>Це демо-текст, щоб продемонструвати як буде виглядати повідомлення в блозі. Видаліть цей пост і додайте свої власні повідомлення.</p> <hr class="moze-more-divider"> <p></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p> <br> </p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Блоки Легенда — Версія 1.4</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } #blockTable { width: 100%; max-width: 500px; border-collapse: collapse; margin-bottom: 15px; } #blockTable th, #blockTable td { border: 1px solid #333; padding: 8px; text-align: center; } #blockTable th { background-color: #ddd; } #blockTable canvas { border: 1px solid #ccc; } </style> <table id="blockTable"> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td> <canvas id="shapeSingle" width="60" height="60"></canvas> </td> <td> <pre>[[1]]</pre> </td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td> <canvas id="shapeL" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1], <br>[1, 0]]</pre> </td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td> <canvas id="shapeT" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1], <br>[0, 1, 0]]</pre> </td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td> <canvas id="shapeI4" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1, 1]]</pre> </td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td> <canvas id="shapeSquare" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1], <br>[1, 1]]</pre> </td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td> <canvas id="shapeZ" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 0], <br>[0, 1, 1]]</pre> </td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td> <canvas id="shapeI5" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1, 1, 1]]</pre> </td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td> <canvas id="shapeI3" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1, 1]]</pre> </td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td> <canvas id="shapeI2" width="60" height="60"></canvas> </td> <td> <pre>[[1, 1]]</pre> </td> <td>Для коротких рядків/стовпців</td> </tr> </tbody> </table> <h2>Блоки Легенда — Версія 1.4</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <script> const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080']; function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const newShape = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { newShape[x][rows - 1 - y] = shape[y][x]; } } return newShape; } function flipShape(shape) { const newShape = shape.map(row => [...row].reverse()); return newShape; } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; const { grid: prevGrid, score: prevScore, block, blockIndex } = lastMove; grid = prevGrid.map(row => [...row]); score = prevScore; scoreElement.textContent = `Очки: ${score}`; currentBlocks.splice(blockIndex, 0, block); for (let i = 0; i < 3; i++) { if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } else { document.getElementById(`block${i + 1}`).getContext('2d').clearRect(0, 0, 80, 80); } } lastMove = null; undoButton.disabled = true; drawGrid(); console.log('Хід скасовано'); } function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); function generateBlocks() { console.log('Генеруються нові блоки, поточна кількість:', currentBlocks.length); currentBlocks = []; for (let i = 1; i <= 3; i++) { document.getElementById(`block${i}`).getContext('2d').clearRect(0, 0, 80, 80); } for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const color = colors[Math.floor(Math.random() * colors.length)]; currentBlocks.push({ shape: blockShapes[shapeIndex], color }); drawBlock(i, blockShapes[shapeIndex], color); console.log(`Згенеровано блок ${i + 1}: форма ${JSON.stringify(blockShapes[shapeIndex])}, колір ${color}`); } console.log('Нові блоки створено:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); drawGrid(); } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const blockCtx = blockCanvas.getContext('2d'); blockCtx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = Math.min(blockCanvas.width / maxSize, blockCanvas.height / maxSize) * 0.9; const offsetX = (blockCanvas.width - maxSize * blockCellSize) / 2; const offsetY = (blockCanvas.height - maxSize * blockCellSize) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { score += linesCleared * 100; scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне торкання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Версія 1.4'); </script>