http://margo.mozello.shop/blog-5/ Маргарита - Блог 5 http://margo.mozello.shop/blog-5/params/post/5342594/persha-novina Tue, 03 Nov 2026 13:20:00 +0000 1жжжжжжжжжжжжжжжжжжжжжжжжжжжжжжжжжжж<p>7</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Мозаїка Майстрів — Версія 1.9 (Планшетна адаптація)</title> <h2>Мозаїка Майстрів — Версія 1.9 (Планшетна адаптація)</h2> <p>Права кнопка миші — поворот блоку на 90°, Жест двома пальцями — поворот на кут, Кнопка "Скасувати" — скасування ходу</p> <div id="gameContainer"> <canvas id="gameCanvas" width="250" height="250"></canvas> <div id="controlPanel"><button id="pauseButton" fdprocessedid="imgj4r">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="rotateButtons"><button onclick="rotateSelectedBlock(90)" fdprocessedid="q77zl">90°</button> <button onclick="rotateSelectedBlock(180)" fdprocessedid="2d8u">180°</button> <button onclick="rotateSelectedBlock(270)" fdprocessedid="1gr28">270°</button></div> </div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="60" height="60" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="60" height="60" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="60" height="60" 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()" fdprocessedid="17a4n">Грати знову</button></div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()" fdprocessedid="jrjse5">Відновити</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> </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; // 25px або 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, startDy); 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>