http://margo.mozello.shop/blog3/ Маргарита - Блог3 http://margo.mozello.shop/blog3/params/post/5198958/4 Fri, 23 Jan 2026 16:40:00 +0000 Початок 23 лютого 2026<hr class="moze-more-divider"><p>3&nbsp; <span style="text-align: start; font-weight: 400; font-style: normal">Початок 23 лютого 2026</span> </p><p><span style="text-align: start; font-weight: 400; font-style: normal">3 2026&nbsp; Початок 1 березня кінець 9 березня<br>4 почоток 10 березня&nbsp; кінець 12 березня 2 900 000&nbsp;&nbsp;</span></p><p><span style="text-align: start; font-weight: 400; font-style: normal">початок&nbsp; &nbsp;26 03 2026</span></p><p><span style="text-align: start; font-weight: 400; font-style: normal">початок 31 березня 2026 року</span></p><p><span style="text-align: start; font-weight: 400; font-style: normal"><img src="https://site-2669532.mozfiles.com/files/2669532/12__03_2026____2_900_000.jpg" alt="12__03_2026____2_900_000.jpg"><br></span></p><p><br></p><meta charset="UTF-8"> <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; } .tile[data-value="4096"] { background: #00ff00;color: #fff; } .tile[data-value="8192"] { background: #8B008B; color: #fff; } .tile[data-value="262144"] { background: #4B0082; color: #fff; } .tile[data-value="16384"] { background: #f59563; color: #fff; } .tile[data-value="32768"] { background: #f67c5f; color: #fff; } .tile[data-value="65536"] { background: #f65e3b; color: #fff; } .tile[data-value="131072"] { background: #DE3163; 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/blog3/params/post/5190419/page Sat, 03 Jan 2026 18:38:00 +0000 оооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>2</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>2048 (6x6) Ускладнена</title> <style> body { font-family: -apple-system, sans-serif; display: flex; flex-direction: column; align-items: center; background: #faf8ef; margin: 0; touch-action: none; /* Prevent iOS scrolling */ -webkit-touch-callout: none; /* Disable iOS callouts */ -webkit-user-select: none; /* Disable text selection */ min-height: 80vh; } #game-board { display: grid; grid-template-columns: repeat(6, 10vw); gap: 2vw; margin: 4vw auto; max-width: 110vw; } .tile { width: 11vw; height: 5vw; background: #cdc1b4; font-size: calc(3vw); color: #776e65; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 3px; transition: transform 0.05s ease, background 0.05s ease; /* Прискорена анімація */ } .tile[data-value="2"] { background: #eee4da; } .tile[data-value="4"] { background: #ede0c8; } .tile[data-value="8"] { background: #f2b179; color: #f9f6f2; } .tile[data-value="16"] { background: #f59563; color: #f9f6f2; } .tile[data-value="32"] { background: #f67c5f; color: #f9f6f2; } .tile[data-value="64"] { background: #f65e3b; color: #f9f6f2; } .tile[data-value="128"] { background: #edcf72; color: #f9f6f2; } .tile[data-value="256"] { background: #edcc61; color: #f9f6f2; } .tile[data-value="512"] { background: #edc850; color: #f9f6f2; } .tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; } .tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; } .tile[data-value="4096"], .tile[data-value="8192"], .tile[data-value="16384"], .tile[data-value="32768"] { background: #0000e6; color: #ffeb3b; } .tile[data-value="65536"] { background: #DE3163; color: #f9f6f2; } .tile[data-value="131072"] { background: #DE3163; color: #f9f6f2; } .tile.moved { transform: scale(1.1); } h1 { font-size: 8vw; margin: 4vw 0; } .info { font-size: 4vw; margin: 2vw 0; } #message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffffdd; padding: 6vw; border-radius: 3vw; display: none; box-shadow: 0 0 10px rgba(0,0,0,0.3); text-align: center; z-index: 10; font-size: 5vw; } #message button { font-size: 4vw; padding: 2vw 4vw; margin-top: 2vw; border-radius: 2vw; min-width: 25vw; } #restart, #increase-level, #decrease-level { font-size: 4vw; padding: 2vw 4vw; border-radius: 2vw; min-width: 25vw; margin: 1vw; } .controls { display: flex; justify-content: center; margin: 2vw 0; } @media (max-width: 414px) { #game-board { grid-template-columns: repeat(6, 14vw); gap: 1vw; } .tile { width: 14vw; height: 14vw; font-size: calc(5vw); } h1 { font-size: 7vw; } .info { font-size: 3.5vw; } } </style> <h1>2048 (6x6) Ускладнена</h1> <div class="info" id="score">бали : 0</div> <div class="info" id="best">Рекорд: 0</div> <div class="info" id="level">Рівень: 1</div> <div class="controls"> <button id="restart" fdprocessedid="8y4t5">Нова гра</button> <button id="increase-level" fdprocessedid="kejura">Підвищити рівень</button> <button id="decrease-level" fdprocessedid="hmsjo">Понизити рівень</button> </div> <div id="game-board"></div> <div id="message"> <div id="message-text"></div> <button id="continue">Продовжити</button> </div> <script> const GRID_SIZE = 6; const TOTAL_TILES = GRID_SIZE * GRID_SIZE; const board = document.getElementById('game-board'); const scoreEl = document.getElementById('score'); const bestEl = document.getElementById('best'); const levelEl = document.getElementById('level'); const message = document.getElementById('message'); const messageText = document.getElementById('message-text'); const continueBtn = document.getElementById('continue'); const increaseLevelBtn = document.getElementById('increase-level'); const decreaseLevelBtn = document.getElementById('decrease-level'); let tiles, values, score, best, gameOver, allowContinue; let tilesToAdd = 1; let level = 1; function slide(line) { let newLine = line.filter(v => v !== 0); for (let i = 0; i < newLine.length - 1; i++) { if (newLine[i] === newLine[i + 1]) { newLine[i] *= 2; score += newLine[i]; newLine[i + 1] = 0; } } newLine = newLine.filter(v => v !== 0); while (newLine.length < GRID_SIZE) newLine.push(0); return newLine; } function updateBoard() { for (let i = 0; i < TOTAL_TILES; i++) { const v = values[i]; tiles[i].dataset.value = v || ''; tiles[i].textContent = v || ''; } } function updateScore() { scoreEl.textContent = `Окуляри: ${score}`; best = Math.max(best, score); bestEl.textContent = `Рекорд: ${best}`; localStorage.setItem('game2048_best_6x6', best); // Оновлення рівня на основі очок (автоматично, якщо потрібно) if (score > 1000 * level) { level++; tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; } } function addTile() { const empty = values.reduce((acc, v, i) => { if (!v) acc.push(i); return acc; }, []); if (empty.length) { const idx = empty[Math.floor(Math.random() * empty.length)]; values[idx] = Math.random() < 0.9 ? 2 : 4; } } function move(direction) { if (gameOver) return; let moved = false; for (let i = 0; i < GRID_SIZE; i++) { let line = []; for (let j = 0; j < GRID_SIZE; j++) { let idx = direction === 'left' ? i * GRID_SIZE + j : direction === 'right' ? i * GRID_SIZE + (GRID_SIZE - 1 - j) : direction === 'up' ? j * GRID_SIZE + i : (GRID_SIZE - 1 - j) * GRID_SIZE + i; line.push(values[idx]); } const newLine = slide(line); for (let j = 0; j < GRID_SIZE; j++) { let idx = direction === 'left' ? i * GRID_SIZE + j : direction === 'right' ? i * GRID_SIZE + (GRID_SIZE - 1 - j) : direction === 'up' ? j * GRID_SIZE + i : (GRID_SIZE - 1 - j) * GRID_SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; tiles[idx].classList.add('moved'); setTimeout(() => tiles[idx].classList.remove('moved'), 50); } } } if (moved) { for (let k = 0; k < tilesToAdd; k++) { addTile(); } updateBoard(); updateScore(); checkWinLose(); if (navigator.vibrate) navigator.vibrate(10); } } function checkWinLose() { if (!allowContinue && values.includes(2048)) { showMessage('Ви виграли! 🎉'); gameOver = true; } else if (!canMove()) { showMessage('Гру завершено!'); gameOver = true; } } function showMessage(text) { messageText.textContent = text; message.style.display = 'block'; } function restartGame() { values = new Array(TOTAL_TILES).fill(0); score = 0; level = 1; tilesToAdd = 1; gameOver = false; allowContinue = false; addTile(); addTile(); updateBoard(); updateScore(); levelEl.textContent = `Рівень: ${level}`; message.style.display = 'none'; saveGame(); } function increaseLevel() { level = Math.min(level + 1, 10); // Max level 10, for example tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; saveGame(); } function decreaseLevel() { level = Math.max(level - 1, 1); // Min level 1 tilesToAdd = Math.min(level, 3); levelEl.textContent = `Рівень: ${level}`; saveGame(); } function canMove() { if (values.includes(0)) return true; for (let i = 0; i < GRID_SIZE; i++) { for (let j = 0; j < GRID_SIZE - 1; j++) { if (values[i * GRID_SIZE + j] === values[i * GRID_SIZE + j + 1] || values[j * GRID_SIZE + i] === values[(j + 1) * GRID_SIZE + i]) return true; } } return false; } function saveGame() { localStorage.setItem('game2048_values_6x6', JSON.stringify(values)); localStorage.setItem('game2048_score_6x6', score); localStorage.setItem('game2048_level_6x6', level); localStorage.setItem('game2048_tilesToAdd_6x6', tilesToAdd); } function loadGame() { const savedValues = localStorage.getItem('game2048_values_6x6'); const savedScore = localStorage.getItem('game2048_score_6x6'); const savedLevel = localStorage.getItem('game2048_level_6x6'); const savedTilesToAdd = localStorage.getItem('game2048_tilesToAdd_6x6'); if (savedValues) { values = JSON.parse(savedValues); score = parseInt(savedScore) || 0; level = parseInt(savedLevel) || 1; tilesToAdd = parseInt(savedTilesToAdd) || 1; } else { values = new Array(TOTAL_TILES).fill(0); addTile(); addTile(); } updateBoard(); updateScore(); levelEl.textContent = `Рівень: ${level}`; } function loadBest() { best = parseInt(localStorage.getItem('game2048_best_6x6')) || 0; bestEl.textContent = `Рекорд: ${best}`; } function init() { tiles = []; board.innerHTML = ''; for (let i = 0; i < TOTAL_TILES; i++) { const tile = document.createElement('div'); tile.className = 'tile'; board.appendChild(tile); tiles.push(tile); } loadGame(); } document.addEventListener('keydown', e => { if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault(); move({ ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', ArrowDown: 'down' }[e.key]); } }); let startX, startY; board.addEventListener('touchstart', e => { e.preventDefault(); const t = e.touches[0]; startX = t.clientX; startY = t.clientY; }); board.addEventListener('touchend', e => { e.preventDefault(); const t = e.changedTouches[0]; const dx = t.clientX - startX; const dy = t.clientY - startY; if (Math.abs(dx) > Math.abs(dy)) { if (dx > 20) move('right'); else if (dx < -20) move('left'); } else { if (dy > 20) move('down'); else if (dy < -20) move('up'); } }); document.getElementById('restart').addEventListener('click', restartGame); increaseLevelBtn.addEventListener('click', increaseLevel); decreaseLevelBtn.addEventListener('click', decreaseLevel); continueBtn.addEventListener('click', () => { gameOver = false; allowContinue = true; message.style.display = 'none'; saveGame(); }); loadBest(); init(); </script> http://margo.mozello.shop/blog3/params/post/5185431/kr3 Thu, 18 Dec 2025 17:15:00 +0000 дддддддддддддддддддддд<hr class="moze-more-divider"><p>1</p><p><br></p><div class="rubik-cube-wrapper" style="display: flex; justify-content: center; align-items: center; margin: 20px 0; position: relative; height: auto; min-height: 400px;"> <style> .rubik-cube-container { width: 400px; /* Змініть цей розмір для збільшення/зменшення */ height: 419px; /* Висота повинна бути width + 19px для кнопок */ background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } </style> <script src="https://animcubejs.cubing.net/AnimCube3.js"></script> <div class="rubik-cube-container"> <script> AnimCube3("move=RUR'URU2R'U2&initrevmove=#&edit=1&demo=1"); </script> </div> </div> http://margo.mozello.shop/blog3/params/post/5164939/page Mon, 03 Nov 2025 12:18:00 +0000 лллллллллллллллллллллллллллл<hr class="moze-more-divider"><p>98 2</p><p><br></p><title>Lines 98 - Smaller Field for iOS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js" onerror="loadBackupP5()"></script> <script> function loadBackupP5() { console.log("Failed to load p5.js from primary CDN, trying backup..."); let script = document.createElement('script'); script.src = 'https://unpkg.com/p5@1.4.2/lib/p5.min.js'; script.onload = () => console.log("Backup p5.js loaded"); script.onerror = () => console.log("Failed to load p5.js"); document.head.appendChild(script); } </script> <style> body { margin: 0; padding: 0; background: linear-gradient(to bottom, #e0f7fa, #b3e5fc); font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; align-items: center; } #game-container { max-width: 100%; width: 100%; margin: 0 auto; padding: 5px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: center; box-sizing: border-box; position: relative; } canvas { display: block; margin: 0 auto; border-radius: 8px; touch-action: none; cursor: pointer; width: 100%; max-height: 100vh; } .bottom-controls { display: flex; gap: 10px; margin-top: 10px; } button { padding: 6px 12px; background: #0288d1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; z-index: 10; } button:hover, button:active { background: #0277bd; } @media (max-width: 400px) { #game-container { padding: 3px; } button { padding: 5px 10px; font-size: 10px; } canvas { max-width: 100%; max-height: calc(100vh - 10px); } } </style> <div id="game-container"> </div> <div class="bottom-controls"> <button id="restart" onclick="restartGame()">Restart</button> <button id="hint" onclick="showHint()">Hint</button> </div> <script> let grid; let cellSize; let gridSize = 9; let colors = ['#f44336', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0', '#00bcd4', '#ff9800']; let selectedBall = null; let score = 0; let gameOver = false; let nextBalls = []; let animation = null; let moveCount = 0; function setup() { console.log("p5.js setup started"); pixelDensity(2); // Support Retina display on iPhone 7 let maxWidth = Math.min(window.innerWidth - 10, 320); // Smaller width for iPhone 7 let maxHeight = Math.min(window.innerHeight - 10, 480); // Fit iPhone 7 height cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); // Reduced extra height let canvas = createCanvas(maxWidth, canvasHeight); canvas.parent('game-container'); canvas.style('touch-action', 'none'); console.log(`Canvas size: ${maxWidth}x${canvasHeight}, cellSize: ${cellSize}`); resetGame(); console.log("p5.js setup completed"); } function windowResized() { let maxWidth = Math.min(window.innerWidth - 10, 320); let maxHeight = Math.min(window.innerHeight - 10, 480); cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); resizeCanvas(maxWidth, canvasHeight); console.log(`Resized canvas: ${maxWidth}x${canvasHeight}`); } function resetGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); nextBalls = generateBalls(3); spawnBalls(nextBalls); nextBalls = generateBalls(3); score = 0; gameOver = false; animation = null; selectedBall = null; moveCount = 0; console.log("Game reset"); } function draw() { if (gameOver) { background(255); drawGrid(); drawBalls(); textAlign(CENTER); textSize(cellSize * 0.8); fill(255, 0, 0); text("Game Over!", width / 2, height / 2); return; } background(255); drawGrid(); drawBalls(); drawNextBalls(); drawScore(); if (animation) { let { startX, startY, endX, endY, color, progress } = animation; let x = lerp(startX, endX, progress); let y = lerp(startY, endY, progress); drawBall(x, y, color); animation.progress += 0.05; if (animation.progress >= 1) animation = null; } } function drawGrid() { stroke(200); for (let i = 0; i <= gridSize; i++) { line(i * cellSize, 0, i * cellSize, gridSize * cellSize); line(0, i * cellSize, gridSize * cellSize, i * cellSize); } } function drawBalls() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { drawBall(j * cellSize + cellSize / 2, i * cellSize + cellSize / 2, grid[i][j]); } } } if (selectedBall) { noFill(); stroke(0); strokeWeight(2); rect(selectedBall.j * cellSize, selectedBall.i * cellSize, cellSize, cellSize); } } function drawBall(x, y, color) { fill(color); noStroke(); ellipse(x, y, cellSize * 0.8); } function drawNextBalls() { textAlign(LEFT); textSize(14); fill(0); text("Next:", 10, gridSize * cellSize + 20); for (let i = 0; i < nextBalls.length; i++) { drawBall(60 + i * cellSize / 2, gridSize * cellSize + 20, nextBalls[i]); } } function drawScore() { textAlign(RIGHT); textSize(14); fill(0); text(`Score: ${score}`, width - 10, gridSize * cellSize + 20); } function generateBalls(count) { return Array(count).fill().map(() => random(colors)); } function spawnBalls(balls) { for (let color of balls) { let emptyCells = getEmptyCells(); if (emptyCells.length === 0) { gameOver = true; return; } let pos = random(emptyCells); grid[pos.i][pos.j] = color; } } function getEmptyCells() { let emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) emptyCells.push({ i, j }); } } return emptyCells; } function mousePressed() { if (gameOver || animation) return; let i = floor(mouseY / cellSize); let j = floor(mouseX / cellSize); if (i >= 0 && i < gridSize && j >= 0 && j < gridSize) { if (grid[i][j]) { selectedBall = { i, j }; } else if (selectedBall) { if (canMove(selectedBall.i, selectedBall.j, i, j)) { animateMove(selectedBall.i, selectedBall.j, i, j); moveBall(selectedBall.i, selectedBall.j, i, j); let lines = checkLines(); if (lines.length > 0) { removeLines(lines); } else { spawnBalls(nextBalls); nextBalls = generateBalls(3); } selectedBall = null; moveCount++; if (isGridFull()) gameOver = true; } } } } function animateMove(startI, startJ, endI, endJ) { animation = { startX: startJ * cellSize + cellSize / 2, startY: startI * cellSize + cellSize / 2, endX: endJ * cellSize + cellSize / 2, endY: endI * cellSize + cellSize / 2, color: grid[startI][startJ], progress: 0 }; } function canMove(startI, startJ, endI, endJ) { if (startI === endI && startJ === endJ) return false; let queue = [{ i: startI, j: startJ }]; let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); visited[startI][startJ] = true; let maxIterations = gridSize * gridSize; let iterations = 0; while (queue.length > 0) { iterations++; if (iterations > maxIterations) { console.log("canMove: Max iterations reached"); return false; } let { i, j } = queue.shift(); if (i === endI && j === endJ) return true; let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { queue.push({ i: ni, j: nj }); visited[ni][nj] = true; } } } return false; } function isAnyMovePossible() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); let queue = [{ i: si, j: sj }]; visited[si][sj] = true; while (queue.length > 0) { let { i, j } = queue.shift(); let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { return true; } } } } } } return false; } function moveBall(startI, startJ, endI, endJ) { grid[endI][endJ] = grid[startI][startJ]; grid[startI][startJ] = null; } function copyGrid(g) { return g.map(row => row.slice()); } function checkLine(startI, startJ, di, dj, customGrid = grid) { let line = [{ i: startI, j: startJ }]; let color = customGrid[startI][startJ]; let i = startI + di; let j = startJ + dj; let iterations = 0; let maxIterations = gridSize; while (i >= 0 && i < gridSize && j >= 0 && j < gridSize && customGrid[i][j] === color) { iterations++; if (iterations > maxIterations) { console.log("checkLine: Max iterations reached"); break; } line.push({ i, j }); i += di; j += dj; } return line; } function checkLines(customGrid = grid) { let lines = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (customGrid[i][j]) { let hLine = checkLine(i, j, 0, 1, customGrid); if (hLine.length >= 5) lines.push(hLine); let vLine = checkLine(i, j, 1, 0, customGrid); if (vLine.length >= 5) lines.push(vLine); let d1Line = checkLine(i, j, 1, -1, customGrid); if (d1Line.length >= 5) lines.push(d1Line); let d2Line = checkLine(i, j, 1, 1, customGrid); if (d2Line.length >= 5) lines.push(d2Line); } } } let uniqueLines = []; let removed = new Set(); for (let line of lines) { let positions = line.map(p => `${p.i},${p.j}`); if (!positions.some(pos => removed.has(pos))) { uniqueLines.push(line); positions.forEach(pos => removed.add(pos)); } } return uniqueLines; } function removeLines(lines) { for (let line of lines) { for (let { i, j } of line) { grid[i][j] = null; } score += line.length * 2; } } function isGridFull() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) return false; } } return true; } function findHelpfulMove() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { for (let ei = 0; ei < gridSize; ei++) { for (let ej = 0; ej < gridSize; ej++) { if (!grid[ei][ej] && canMove(si, sj, ei, ej)) { let tempGrid = copyGrid(grid); tempGrid[ei][ej] = tempGrid[si][sj]; tempGrid[si][sj] = null; let lines = checkLines(tempGrid); if (lines.length > 0) { return { from: { i: si, j: sj }, to: { i: ei, j: ej } }; } } } } } } } return null; } function showHint() { if (gameOver) { alert("Game is over!"); return; } let move = findHelpfulMove(); if (move) { alert(`Move ball from row ${move.from.i + 1}, col ${move.from.j + 1} to row ${move.to.i + 1}, col ${move.to.j + 1}`); } else { alert("No immediate line-forming move found."); } } function restartGame() { resetGame(); console.log("Game restarted via button"); } </script> http://margo.mozello.shop/blog3/params/post/5160527/den-1 Wed, 22 Oct 2025 21:17:00 +0000 шшшшшшшшшшшшшшшшшшшшшшшшшшш<hr class="moze-more-divider"><p>1</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Симулятор мислення «Дня 1»</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; text-align: center; } .container { max-width: 1600px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; } .scenario { margin: 20px 0; } button { background-color: #4CAF50; color: white; padding: 10px 20px; margin: 10px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #45a049; } #feedback { margin-top: 20px; font-weight: bold; } #score { font-size: 24px; color: #007BFF; } #replay { display: none; } </style> <div class="container"> <h1>Симулятор мислення «Дня 1»</h1> <p>Ви — CEO зростаючого IT-стартапу. Приймайте рішення, щоб залишатися в режимі 'Дня 1'!</p> <div id="game"></div> <div id="feedback"></div> <div id="score"></div> <button id="replay" onclick="startGame()">Грати знову</button> </div> <script> const scenarios = [ { prompt: "Сценарій: Ваша команда помітила, що конкурент запустив нову функцію. На чому зосередитися?", options: [ { text: "Вивчити конкурента", value: "competitor", feedback: "Це День 2. -5 очок." }, { text: "Опитати клієнтів", value: "client", feedback: "Чудово! +10 очок." }, { text: "Ігнорувати", value: "ignore", feedback: "Ризик стагнації. -5 очок." } ], correct: "client" }, { prompt: "Сценарій: Вирішення щодо нового техстеку з 70% даних. Що робити?", options: [ { text: "Чекати 100%", value: "wait", feedback: "Затримки ведуть до Дня 2. -5 очок." }, { text: "Вирішити зараз", value: "decide", feedback: "Швидка дія! +10 очок." }, { text: "Сформувати комітет", value: "committee", feedback: "Пастка бюрократії. -5 очок." } ], correct: "decide" }, { prompt: "Сценарій: Занадто багато зустрічей уповільнюють розробку. Як виправити?", options: [ { text: "Додати більше зустрічей", value: "more meetings", feedback: "Гірше! -5 очок." }, { text: "Спростити процеси", value: "simplify", feedback: "Аджайл-рух. +10 очок." }, { text: "Ігнорувати", value: "ignore", feedback: "Процеси понад результати. -5 очок." } ], correct: "simplify" }, { prompt: "Сценарій: Виникає новий тренд ШІ. Реакція?", options: [ { text: "Опір", value: "resist", feedback: "Нерелевантність попереду. -5 очок." }, { text: "Експериментувати", value: "experiment", feedback: "Приймайте тренди! +10 очок." }, { text: "Чекати конкурентів", value: "wait competitors", feedback: "Втрачена можливість. -5 очок." } ], correct: "experiment" }, { prompt: "Сценарій: Баг у продакшні. Команда хоче повний аналіз спочатку. Ви?", options: [ { text: "Повний аналіз", value: "full analysis", feedback: "Занадто повільно. -5 очок." }, { text: "Швидке виправлення", value: "quick fix", feedback: "Висока швидкість! +10 очок." }, { text: "Скликати зустріч", value: "meeting", feedback: "Пастка посередників. -5 очок." } ], correct: "quick fix" }, { prompt: "Сценарій: Зворотний зв'язок клієнта щодо UI додатка. Пріоритезувати?", options: [ { text: "Внутрішні метрики", value: "internal metrics", feedback: "Фокус Дня 2. -5 очок." }, { text: "Потреби клієнта", value: "client needs", feedback: "Одержимість клієнтом! +10 очок." }, { text: "Затримати зміни", value: "delay", feedback: "Стагнація. -5 очок." } ], correct: "client needs" } ]; let currentScenario = 0; let score = 0; let shuffledScenarios = []; function shuffle(array) { return array.sort(() => Math.random() - 0.5); } function startGame() { currentScenario = 0; score = 0; shuffledScenarios = shuffle([...scenarios]).slice(0, 4); // 4 випадкових сценарії document.getElementById('feedback').innerHTML = ''; document.getElementById('score').innerHTML = ''; document.getElementById('replay').style.display = 'none'; showScenario(); } function showScenario() { const gameDiv = document.getElementById('game'); gameDiv.innerHTML = `<p class="scenario">${shuffledScenarios[currentScenario].prompt}</p>`; shuffledScenarios[currentScenario].options.forEach(opt => { const btn = document.createElement('button'); btn.innerText = opt.text; btn.onclick = () => handleChoice(opt.value); gameDiv.appendChild(btn); }); } function handleChoice(choice) { const scenario = shuffledScenarios[currentScenario]; let feedbackText = 'Неправильний вибір.'; let points = 0; const opt = scenario.options.find(o => o.value === choice); if (opt) { feedbackText = opt.feedback; points = (choice === scenario.correct) ? 10 : -5; } score += points; document.getElementById('feedback').innerHTML = feedbackText; currentScenario++; if (currentScenario < shuffledScenarios.length) { setTimeout(showScenario, 1500); // Коротка затримка для фідбеку } else { endGame(); } } function endGame() { document.getElementById('game').innerHTML = ''; document.getElementById('feedback').innerHTML = ''; document.getElementById('score').innerHTML = `Ваш рахунок: ${score}/40`; let message = ''; if (score >= 30) message = "Майстер Дня 1! 🎉"; else if (score >= 20) message = "Добре, але вдоскональте ваше мислення."; else message = "Уникайте пасток Дня 2!"; document.getElementById('feedback').innerHTML = message; document.getElementById('replay').style.display = 'block'; } startGame(); // Запустити гру автоматично </script> http://margo.mozello.shop/blog3/params/post/5138926/julotijuo Sat, 27 Sep 2025 12:29:00 +0000 оооооооооооооооооооооооо <hr class="moze-more-divider"> <p>1</p> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Тренажер: Збір стопки книг (Розвиток змістової пам'яті)</title> <style> :root { --bg: #f5e6d3; /* Бежевий фон як на малюнку */ --shelf-bg: #ffffff; /* Білі полички */ --shelf-shadow: rgba(0,0,0,0.15); --book-h: 30px; /* Висота книг, зменшена для кращого вигляду */ --font: "Segoe UI", Roboto, Arial; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--bg); min-height: 100vh; color: #111; display: flex; align-items: flex-start; justify-content: center; padding: 20px; position: relative; } .game { width: 100%; max-width: 1500px; position: relative; } header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #333; } header h1 { margin: 0; font-size: 20px; } .controls { display: flex; gap: 12px; align-items: center; } .controls button { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; background: #4CAF50; color: white; } .controls .stat { color: #333; font-size: 14px; } .wall-decor { position: absolute; top: 20px; left: 20px; width: 40px; height: 30px; background: #e0d0b0; /* Картина на стіні */ border: 2px solid #d0b080; z-index: -1; } .shelves { display: flex; justify-content: space-around; margin-bottom: 24px; position: relative; } .shelf { width: 180px; height: 250px; background: var(--shelf-bg); border-radius: 4px; box-shadow: 0 2px 4px var(--shelf-shadow); position: relative; display: flex; flex-direction: column-reverse; align-items: center; padding-bottom: 10px; gap: 2px; /* Додано gap для проміжків між книгами */ } .shelf::before { content: ''; position: absolute; bottom: -5px; width: 100%; height: 5px; background: #d0d0d0; } /* Тінь під полицею */ .shelf:nth-child(1)::after { content: '🌵'; /* Кактус на нижній полиці */ position: absolute; bottom: 10px; left: 10px; font-size: 24px; } .shelf:nth-child(2)::after { content: '🌸'; /* Квітка на середній */ position: absolute; bottom: 10px; right: 10px; font-size: 24px; } .shelf:nth-child(3)::after { content: '📖'; /* Декор на верхній */ position: absolute; top: 10px; left: 10px; font-size: 20px; } .book { height: var(--book-h); border-radius: 4px; box-shadow: 0 2px 4px var(--shelf-shadow); cursor: grab; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; transition: transform 0.2s; user-select: none; /* Додано, щоб уникнути виділення тексту */ } .book.extra-large { width: 160px; background: linear-gradient(180deg, #ff4500, #d2691e); } /* Помаранчева велика */ .book.large { width: 120px; background: linear-gradient(180deg, #32cd32, #228b22); } /* Зелена */ .book.medium { width: 80px; background: linear-gradient(180deg, #ff0000, #b22222); } /* Червона */ .book.small { width: 40px; background: linear-gradient(180deg, #1e90ff, #4169e1); } /* Синя для різноманітності */ .arrow { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); font-size: 40px; color: #ff69b4; /* Рожева стрілка вниз */ pointer-events: none; animation: fall 1s infinite; } @keyframes fall { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } } .drag-layer { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; } .drag-layer .book { position: relative; left: 0; top: 0; } .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); } .overlay.hidden { display: none; } .overlay-content { background: #fff; padding: 20px; border-radius: 10px; text-align: center; } </style> <div class="game"> <header> <h1>Тренажер: Збір стопки книг</h1> <div class="controls"> <button id="newGameBtn" fdprocessedid="6mivbe">Нова гра</button> <div class="stat">Ходи: <span id="moves">0</span> </div> </div> </header> <div class="wall-decor"></div> <!-- Картина на стіні --> <main> <div class="shelves"> <div class="shelf" data-index="0"></div> <div class="shelf" data-index="1"></div> <div class="shelf" data-index="2"></div> </div> <div class="arrow">↓</div> <!-- Анімована стрілка вниз --> </main> <div id="winOverlay" class="overlay hidden"> <div class="overlay-content"> <h2>Вітаю — перемога! 🎉</h2> <p>Ходи: <span id="winMoves">0</span> </p> <button id="closeWin">Ще раз</button> </div> </div> </div> <script> (() => { const SIZES = ['extra-large', 'large', 'medium', 'small']; // Розміри книг let shelves = [[], [], []]; // Три полиці let moves = 0; let dragState = null; const shelvesEls = document.querySelectorAll('.shelf'); const movesEl = document.getElementById('moves'); const winOverlay = document.getElementById('winOverlay'); const winMoves = document.getElementById('winMoves'); const newGameBtn = document.getElementById('newGameBtn'); const closeWin = document.getElementById('closeWin'); function newGame(numBooks = 4) { shelves = [[], [], []]; moves = 0; renderMoves(); // Створюємо книги та розміщуємо на першій полиці (зверху найменша) for (let i = 0; i < numBooks; i++) { shelves[0].push({ size: SIZES[i] }); } renderAll(); } function renderAll() { shelvesEls.forEach((el, idx) => { el.innerHTML = ''; shelves[idx].forEach((book, bookIdx) => { const bookEl = createBookEl(book); el.appendChild(bookEl); bookEl.addEventListener('pointerdown', (e) => beginDrag(e, idx, bookIdx)); }); }); checkWin(); } function createBookEl(book) { const el = document.createElement('div'); el.className = `book ${book.size}`; el.textContent = book.size.charAt(0).toUpperCase(); return el; } function renderMoves() { movesEl.textContent = moves; } function beginDrag(e, shelfIdx, bookIdx) { e.preventDefault(); // Додано, щоб уникнути дефолтної поведінки if (bookIdx !== shelves[shelfIdx].length - 1) return; const seq = [shelves[shelfIdx].pop()]; dragState = { shelfIdx, seq, layer: null, ox: e.clientX, oy: e.clientY, dx: 0, dy: 0, dragging: false }; const move = ev => { if (!dragState.dragging && Math.abs(ev.clientX - dragState.ox) + Math.abs(ev.clientY - dragState.oy) > 5) { startDrag(ev); } if (dragState.dragging) updateDrag(ev); }; const up = ev => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); endDrag(ev); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); } function startDrag(e) { dragState.dragging = true; const layer = document.createElement('div'); layer.className = 'drag-layer'; document.body.append(layer); dragState.layer = layer; dragState.seq.forEach(book => { const el = createBookEl(book); layer.append(el); }); updateDrag(e); } function updateDrag(e) { dragState.dx = e.clientX - 40; dragState.dy = e.clientY - 40; dragState.layer.style.transform = `translate(${dragState.dx}px, ${dragState.dy}px)`; } function endDrag(e) { if (!dragState.dragging) { dragState = null; return; } if (dragState.layer) dragState.layer.style.pointerEvents = 'none'; const elems = document.elementsFromPoint(e.clientX, e.clientY); if (dragState.layer) dragState.layer.style.pointerEvents = ''; let dropped = false; const targetShelf = elems.find(el => el.classList && el.classList.contains('shelf')); if (targetShelf) { const targetIdx = parseInt(targetShelf.dataset.index); if (targetIdx !== dragState.shelfIdx) { dropped = tryToShelf(dragState.seq[0], targetIdx); } } if (!dropped) { shelves[dragState.shelfIdx].push(dragState.seq[0]); } else { moves++; renderMoves(); } if (dragState.layer) dragState.layer.remove(); dragState = null; renderAll(); } function tryToShelf(book, targetIdx) { const targetStack = shelves[targetIdx]; if (targetStack.length === 0 || SIZES.indexOf(book.size) > SIZES.indexOf(targetStack[targetStack.length - 1].size)) { targetStack.push(book); return true; } return false; } function checkWin() { if (shelves[2].length === SIZES.length) { winMoves.textContent = moves; winOverlay.classList.remove('hidden'); } } newGameBtn.onclick = () => { winOverlay.classList.add('hidden'); newGame(); }; closeWin.onclick = () => { winOverlay.classList.add('hidden'); newGame(); }; newGame(); })(); </script> http://margo.mozello.shop/blog3/params/post/5137115/11 Tue, 23 Sep 2025 12:54:00 +0000 оооооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>1</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Блоки Легенда — Версія 1.3</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 { 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.3</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="j7xyhz">Пауза</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="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 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 currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; 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}`; } console.log('Очищено ліній:', linesCleared, 'Очки:', score); } 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; finalScoreElement.textContent = `Ваш рахунок: ${score}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена'); } 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.3'); </script> http://margo.mozello.shop/blog3/params/post/5137035/9 Tue, 23 Sep 2025 10:08:00 +0000 <title>Lines 98 - Smaller Field for iOS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js" onerror="loadBackupP5()"></script> <script> function loadBackupP5() { console.log("Failed to load p5.js from primary CDN, trying backup..."); let script = document.createElement('script'); script.src = 'https://unpkg.com/p5@1.4.2/lib/p5.min.js'; script.onload = () => console.log("Backup p5.js loaded"); script.onerror = () => console.log("Failed to load p5.js"); document.head.appendChild(script); } </script> <style> body { margin: 0; padding: 0; background: linear-gradient(to bottom, #e0f7fa, #b3e5fc); font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; } #game-container { max-width: 100%; width: 100%; margin: 0 auto; padding: 5px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: center; box-sizing: border-box; position: relative; } canvas { display: block; margin: 0 auto; border-radius: 8px; touch-action: none; cursor: pointer; width: 100%; max-height: 100vh; } #restart { position: absolute; top: 5px; right: 5px; padding: 6px 12px; background: #0288d1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; z-index: 10; } #restart:hover, #restart:active { background: #0277bd; } @media (max-width: 400px) { #game-container { padding: 3px; } #restart { padding: 5px 10px; font-size: 10px; } canvas { max-width: 100%; max-height: calc(100vh - 10px); } } </style> <div id="game-container"> <button id="restart" onclick="restartGame()" fdprocessedid="1ze84">Restart</button> <script> let grid; let cellSize; let gridSize = 9; let colors = ['#f44336', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0', '#00bcd4', '#ff9800']; let selectedBall = null; let score = 0; let gameOver = false; let nextBalls = []; let animation = null; let moveCount = 0; function setup() { console.log("p5.js setup started"); pixelDensity(2); // Support Retina display on iPhone 7 let maxWidth = Math.min(window.innerWidth - 10, 320); // Smaller width for iPhone 7 let maxHeight = Math.min(window.innerHeight - 10, 480); // Fit iPhone 7 height cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); // Reduced extra height let canvas = createCanvas(maxWidth, canvasHeight); canvas.parent('game-container'); canvas.style('touch-action', 'none'); console.log(`Canvas size: ${maxWidth}x${canvasHeight}, cellSize: ${cellSize}`); resetGame(); console.log("p5.js setup completed"); } function windowResized() { let maxWidth = Math.min(window.innerWidth - 10, 320); let maxHeight = Math.min(window.innerHeight - 10, 480); cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); resizeCanvas(maxWidth, canvasHeight); console.log(`Resized canvas: ${maxWidth}x${canvasHeight}`); } function resetGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); nextBalls = generateBalls(3); spawnBalls(nextBalls); nextBalls = generateBalls(3); score = 0; gameOver = false; animation = null; selectedBall = null; moveCount = 0; console.log("Game reset"); } function draw() { if (gameOver) { background(255); drawGrid(); drawBalls(); textAlign(CENTER); textSize(cellSize * 0.8); fill(255, 0, 0); text("Game Over!", width / 2, height / 2); return; } background(255); drawGrid(); drawBalls(); drawNextBalls(); drawScore(); if (animation) { let { startX, startY, endX, endY, color, progress } = animation; let x = lerp(startX, endX, progress); let y = lerp(startY, endY, progress); drawBall(-1, -1, color, x, y); animation.progress += 0.05; if (animation.progress >= 1) { animation = null; } } } function drawGrid() { fill(240, 240, 240); rect(10, 10, gridSize * cellSize, gridSize * cellSize, 5); stroke(200); strokeWeight(1); for (let i = 0; i <= gridSize; i++) { line(10 + i * cellSize, 10, 10 + i * cellSize, 10 + gridSize * cellSize); line(10, 10 + i * cellSize, 10 + gridSize * cellSize, 10 + i * cellSize); } } function drawBalls() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { drawBall(i, j, grid[i][j]); } } } if (selectedBall) { noFill(); stroke(255, 215, 0); strokeWeight(2); ellipse(10 + selectedBall.i * cellSize + cellSize / 2, 10 + selectedBall.j * cellSize + cellSize / 2, cellSize * 0.9); } } function drawNextBalls() { fill(0); textSize(cellSize * 0.3); textAlign(LEFT); text("Next:", 10, gridSize * cellSize + 40); for (let k = 0; k < nextBalls.length; k++) { drawBall(-1, -1, nextBalls[k], 10 + (k + 1) * cellSize, gridSize * cellSize + 30 + cellSize / 2, 0.5); } } function drawScore() { fill(0); textSize(cellSize * 0.3); text(`Score: ${score}`, 10, gridSize * cellSize + 80); } function drawBall(i, j, col, customX = null, customY = null, scale = 1) { let x = customX || 10 + i * cellSize + cellSize / 2; let y = customY || 10 + j * cellSize + cellSize / 2; let gradient = drawingContext.createRadialGradient(x - cellSize * 0.1 * scale, y - cellSize * 0.1 * scale, 0, x, y, cellSize * 0.4 * scale); gradient.addColorStop(0, lightenColor(col)); gradient.addColorStop(1, col); drawingContext.fillStyle = gradient; noStroke(); ellipse(x, y, cellSize * 0.8 * scale); fill(255, 255, 255, 150); ellipse(x - cellSize * 0.2 * scale, y - cellSize * 0.2 * scale, cellSize * 0.2 * scale); } function lightenColor(hex) { let r = parseInt(hex.slice(1,3),16); let g = parseInt(hex.slice(3,5),16); let b = parseInt(hex.slice(5,7),16); r = Math.min(255, r + 50); g = Math.min(255, g + 50); b = Math.min(255, b + 50); return `rgb(${r},${g},${b})`; } function touchStarted() { if (gameOver) return false; let coords = touches.length > 0 ? { x: touches[0].x, y: touches[0].y } : { x: mouseX, y: mouseY }; console.log(`Touch/Click at: (${coords.x}, ${coords.y})`); let mx = coords.x - 10; let my = coords.y - 10; let i = Math.floor(mx / cellSize); let j = Math.floor(my / cellSize); console.log(`Grid position: (${i}, ${j})`); if (i < 0 || i >= gridSize || j < 0 || j >= gridSize) { console.log("Touch/Click outside grid, deselecting"); selectedBall = null; return false; } if (!selectedBall) { if (grid[i][j]) { selectedBall = { i, j }; console.log(`Selected ball at: (${i}, ${j})`); } else { console.log("No ball at touched position"); } } else { if (grid[i][j]) { if (i === selectedBall.i && j === selectedBall.j) { console.log("Deselected same ball"); selectedBall = null; } else { console.log(`Reselected new ball at: (${i}, ${j})`); selectedBall = { i, j }; } } else { if (canMove(selectedBall.i, selectedBall.j, i, j)) { moveCount++; console.log(`Move ${moveCount}: From (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); let startX = 10 + selectedBall.i * cellSize + cellSize / 2; let startY = 10 + selectedBall.j * cellSize + cellSize / 2; let endX = 10 + i * cellSize + cellSize / 2; let endY = 10 + j * cellSize + cellSize / 2; animation = { startX, startY, endX, endY, color: grid[selectedBall.i][selectedBall.j], progress: 0 }; moveBall(selectedBall.i, selectedBall.j, i, j); let lines = checkLines(); if (lines.length === 0) { if (!spawnBalls(nextBalls)) { console.log("No empty cells for spawning balls, ending game"); gameOver = true; } else { nextBalls = generateBalls(3); if (isGridFull() || !isAnyMovePossible()) { console.log("Grid is full or no moves possible, ending game"); gameOver = true; } } } else { removeLines(lines); } selectedBall = null; } else { console.log(`Invalid move: No path from (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); selectedBall = null; } } } return false; // Prevent default iOS touch behavior } function mousePressed() { if (gameOver) return; touchStarted(); // Reuse touchStarted for desktop compatibility } function generateBalls(num) { return Array(num).fill().map(() => random(colors)); } function spawnBalls(balls) { let emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) emptyCells.push({ i, j }); } } if (emptyCells.length < balls.length) { console.log("Not enough empty cells for spawning"); return false; } for (let n = 0; n < balls.length; n++) { let idx = Math.floor(random(emptyCells.length)); let { i, j } = emptyCells.splice(idx, 1)[0]; grid[i][j] = balls[n]; } return true; } function canMove(startI, startJ, endI, endJ) { if (startI === endI && startJ === endJ) return false; let queue = [{ i: startI, j: startJ }]; let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); visited[startI][startJ] = true; let maxIterations = gridSize * gridSize; let iterations = 0; while (queue.length > 0) { iterations++; if (iterations > maxIterations) { console.log("canMove: Max iterations reached"); return false; } let { i, j } = queue.shift(); if (i === endI && j === endJ) return true; let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { queue.push({ i: ni, j: nj }); visited[ni][nj] = true; } } } return false; } function isAnyMovePossible() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); let queue = [{ i: si, j: sj }]; visited[si][sj] = true; while (queue.length > 0) { let { i, j } = queue.shift(); let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { return true; } } } } } } return false; } function moveBall(startI, startJ, endI, endJ) { grid[endI][endJ] = grid[startI][startJ]; grid[startI][startJ] = null; } function checkLines() { let lines = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { let hLine = checkLine(i, j, 0, 1); if (hLine.length >= 5) lines.push(hLine); let vLine = checkLine(i, j, 1, 0); if (vLine.length >= 5) lines.push(vLine); let d1Line = checkLine(i, j, 1, -1); if (d1Line.length >= 5) lines.push(d1Line); let d2Line = checkLine(i, j, 1, 1); if (d2Line.length >= 5) lines.push(d2Line); } } } let uniqueLines = []; let removed = new Set(); for (let line of lines) { let positions = line.map(p => `${p.i},${p.j}`); if (!positions.some(pos => removed.has(pos))) { uniqueLines.push(line); positions.forEach(pos => removed.add(pos)); } } return uniqueLines; } function checkLine(startI, startJ, di, dj) { let line = [{ i: startI, j: startJ }]; let color = grid[startI][startJ]; let i = startI + di; let j = startJ + dj; let iterations = 0; let maxIterations = gridSize; while (i >= 0 && i < gridSize && j >= 0 && j < gridSize && grid[i][j] === color) { iterations++; if (iterations > maxIterations) { console.log("checkLine: Max iterations reached"); break; } line.push({ i, j }); i += di; j += dj; } return line; } function removeLines(lines) { for (let line of lines) { for (let { i, j } of line) { grid[i][j] = null; } score += line.length * 2; } } function isGridFull() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) return false; } } return true; } function restartGame() { resetGame(); console.log("Game restarted via button"); } </script> </div> http://margo.mozello.shop/blog3/params/post/5137012/8-dlja-mob Tue, 23 Sep 2025 09:41:00 +0000 <title>Lines 98 - iOS Ad Banner Fix</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js" onerror="loadBackupP5()"></script> <script> function loadBackupP5() { console.log("Failed to load p5.js from primary CDN, trying backup..."); let script = document.createElement('script'); script.src = 'https://unpkg.com/p5@1.4.2/lib/p5.min.js'; script.onload = () => console.log("Backup p5.js loaded"); script.onerror = () => console.log("Failed to load p5.js"); document.head.appendChild(script); } </script> <style> body { margin: 0; padding: 0; background: linear-gradient(to bottom, #e0f7fa, #b3e5fc); font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; } #game-container { max-width: 100%; width: 100%; margin: 0 auto; padding: 5px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: center; box-sizing: border-box; position: relative; margin-top: 60px; } /* Added margin-top for ad banner */ canvas { display: block; margin: 0 auto; border-radius: 8px; touch-action: none; cursor: pointer; width: 100%; max-height: calc(100vh - 70px); } /* Adjusted for banner */ #restart { position: absolute; top: 5px; right: 5px; padding: 6px 12px; background: #0288d1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; z-index: 10; } #restart:hover, #restart:active { background: #0277bd; } @media (max-width: 400px) { #game-container { padding: 3px; margin-top: 50px; } /* Smaller margin for smaller screens */ #restart { padding: 5px 10px; font-size: 10px; } canvas { max-width: 100%; max-height: calc(100vh - 60px); } } </style> <div id="game-container"> <button id="restart" onclick="restartGame()">Restart</button> <script> let grid; let cellSize; let gridSize = 9; let colors = ['#f44336', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0', '#00bcd4', '#ff9800']; let selectedBall = null; let score = 0; let gameOver = false; let nextBalls = []; let animation = null; let moveCount = 0; function setup() { console.log("p5.js setup started"); pixelDensity(2); // Support Retina display on iPhone 7 let maxWidth = Math.min(window.innerWidth - 10, 320); // Fixed width for iPhone 7 let maxHeight = Math.min(window.innerHeight - 70, 400); // Reduced height for ad banner cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 80); // Reduced extra height let canvas = createCanvas(maxWidth, canvasHeight); canvas.parent('game-container'); canvas.style('touch-action', 'none'); console.log(`Canvas size: ${maxWidth}x${canvasHeight}, cellSize: ${cellSize}, window.innerHeight: ${window.innerHeight}`); resetGame(); console.log("p5.js setup completed"); } function windowResized() { let maxWidth = Math.min(window.innerWidth - 10, 320); let maxHeight = Math.min(window.innerHeight - 70, 400); cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 80); resizeCanvas(maxWidth, canvasHeight); console.log(`Resized canvas: ${maxWidth}x${canvasHeight}`); } function resetGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); nextBalls = generateBalls(3); spawnBalls(nextBalls); nextBalls = generateBalls(3); score = 0; gameOver = false; animation = null; selectedBall = null; moveCount = 0; console.log("Game reset"); } function draw() { if (gameOver) { background(255); drawGrid(); drawBalls(); textAlign(CENTER); textSize(cellSize * 0.8); fill(255, 0, 0); text("Game Over!", width / 2, height / 2); return; } background(255); drawGrid(); drawBalls(); drawNextBalls(); drawScore(); if (animation) { let { startX, startY, endX, endY, color, progress } = animation; let x = lerp(startX, endX, progress); let y = lerp(startY, endY, progress); drawBall(-1, -1, color, x, y); animation.progress += 0.05; if (animation.progress >= 1) { animation = null; } } } function drawGrid() { fill(240, 240, 240); rect(10, 10, gridSize * cellSize, gridSize * cellSize, 5); stroke(200); strokeWeight(1); for (let i = 0; i <= gridSize; i++) { line(10 + i * cellSize, 10, 10 + i * cellSize, 10 + gridSize * cellSize); line(10, 10 + i * cellSize, 10 + gridSize * cellSize, 10 + i * cellSize); } } function drawBalls() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { drawBall(i, j, grid[i][j]); } } } if (selectedBall) { noFill(); stroke(255, 215, 0); strokeWeight(2); ellipse(10 + selectedBall.i * cellSize + cellSize / 2, 10 + selectedBall.j * cellSize + cellSize / 2, cellSize * 0.9); } } function drawNextBalls() { fill(0); textSize(cellSize * 0.25); textAlign(LEFT); text("Next:", 10, gridSize * cellSize + 30); for (let k = 0; k < nextBalls.length; k++) { drawBall(-1, -1, nextBalls[k], 10 + (k + 1) * cellSize, gridSize * cellSize + 20 + cellSize / 2, 0.4); } } function drawScore() { fill(0); textSize(cellSize * 0.25); text(`Score: ${score}`, 10, gridSize * cellSize + 60); } function drawBall(i, j, col, customX = null, customY = null, scale = 1) { let x = customX || 10 + i * cellSize + cellSize / 2; let y = customY || 10 + j * cellSize + cellSize / 2; let gradient = drawingContext.createRadialGradient(x - cellSize * 0.1 * scale, y - cellSize * 0.1 * scale, 0, x, y, cellSize * 0.4 * scale); gradient.addColorStop(0, lightenColor(col)); gradient.addColorStop(1, col); drawingContext.fillStyle = gradient; noStroke(); ellipse(x, y, cellSize * 0.8 * scale); fill(255, 255, 255, 150); ellipse(x - cellSize * 0.2 * scale, y - cellSize * 0.2 * scale, cellSize * 0.2 * scale); } function lightenColor(hex) { let r = parseInt(hex.slice(1,3),16); let g = parseInt(hex.slice(3,5),16); let b = parseInt(hex.slice(5,7),16); r = Math.min(255, r + 50); g = Math.min(255, g + 50); b = Math.min(255, b + 50); return `rgb(${r},${g},${b})`; } function touchStarted() { if (gameOver) return false; let coords = touches.length > 0 ? { x: touches[0].x, y: touches[0].y } : { x: mouseX, y: mouseY }; console.log(`Touch/Click at: (${coords.x}, ${coords.y})`); let mx = coords.x - 10; let my = coords.y - 10; let i = Math.floor(mx / cellSize); let j = Math.floor(my / cellSize); console.log(`Grid position: (${i}, ${j})`); if (i < 0 || i >= gridSize || j < 0 || j >= gridSize) { console.log("Touch/Click outside grid, deselecting"); selectedBall = null; return false; } if (!selectedBall) { if (grid[i][j]) { selectedBall = { i, j }; console.log(`Selected ball at: (${i}, ${j})`); } else { console.log("No ball at touched position"); } } else { if (grid[i][j]) { if (i === selectedBall.i && j === selectedBall.j) { console.log("Deselected same ball"); selectedBall = null; } else { console.log(`Reselected new ball at: (${i}, ${j})`); selectedBall = { i, j }; } } else { if (canMove(selectedBall.i, selectedBall.j, i, j)) { moveCount++; console.log(`Move ${moveCount}: From (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); let startX = 10 + selectedBall.i * cellSize + cellSize / 2; let startY = 10 + selectedBall.j * cellSize + cellSize / 2; let endX = 10 + i * cellSize + cellSize / 2; let endY = 10 + j * cellSize + cellSize / 2; animation = { startX, startY, endX, endY, color: grid[selectedBall.i][selectedBall.j], progress: 0 }; moveBall(selectedBall.i, selectedBall.j, i, j); let lines = checkLines(); if (lines.length === 0) { if (!spawnBalls(nextBalls)) { console.log("No empty cells for spawning balls, ending game"); gameOver = true; } else { nextBalls = generateBalls(3); if (isGridFull() || !isAnyMovePossible()) { console.log("Grid is full or no moves possible, ending game"); gameOver = true; } } } else { removeLines(lines); } selectedBall = null; } else { console.log(`Invalid move: No path from (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); selectedBall = null; } } } return false; // Prevent default iOS touch behavior } function mousePressed() { if (gameOver) return; touchStarted(); // Reuse touchStarted for desktop compatibility } function generateBalls(num) { return Array(num).fill().map(() => random(colors)); } function spawnBalls(balls) { let emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) emptyCells.push({ i, j }); } } if (emptyCells.length < balls.length) { console.log("Not enough empty cells for spawning"); return false; } for (let n = 0; n < balls.length; n++) { let idx = Math.floor(random(emptyCells.length)); let { i, j } = emptyCells.splice(idx, 1)[0]; grid[i][j] = balls[n]; } return true; } function canMove(startI, startJ, endI, endJ) { if (startI === endI && startJ === endJ) return false; let queue = [{ i: startI, j: startJ }]; let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); visited[startI][startJ] = true; let maxIterations = gridSize * gridSize; let iterations = 0; while (queue.length > 0) { iterations++; if (iterations > maxIterations) { console.log("canMove: Max iterations reached"); return false; } let { i, j } = queue.shift(); if (i === endI && j === endJ) return true; let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { queue.push({ i: ni, j: nj }); visited[ni][nj] = true; } } } return false; } function isAnyMovePossible() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); let queue = [{ i: si, j: sj }]; visited[si][sj] = true; while (queue.length > 0) { let { i, j } = queue.shift(); let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { return true; } } } } } } return false; } function moveBall(startI, startJ, endI, endJ) { grid[endI][endJ] = grid[startI][startJ]; grid[startI][startJ] = null; } function checkLines() { let lines = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { let hLine = checkLine(i, j, 0, 1); if (hLine.length >= 5) lines.push(hLine); let vLine = checkLine(i, j, 1, 0); if (vLine.length >= 5) lines.push(vLine); let d1Line = checkLine(i, j, 1, -1); if (d1Line.length >= 5) lines.push(d1Line); let d2Line = checkLine(i, j, 1, 1); if (d2Line.length >= 5) lines.push(d2Line); } } } let uniqueLines = []; let removed = new Set(); for (let line of lines) { let positions = line.map(p => `${p.i},${p.j}`); if (!positions.some(pos => removed.has(pos))) { uniqueLines.push(line); positions.forEach(pos => removed.add(pos)); } } return uniqueLines; } function checkLine(startI, startJ, di, dj) { let line = [{ i: startI, j: startJ }]; let color = grid[startI][startJ]; let i = startI + di; let j = startJ + dj; let iterations = 0; let maxIterations = gridSize; while (i >= 0 && i < gridSize && j >= 0 && j < gridSize && grid[i][j] === color) { iterations++; if (iterations > maxIterations) { console.log("checkLine: Max iterations reached"); break; } line.push({ i, j }); i += di; j += dj; } return line; } function removeLines(lines) { for (let line of lines) { for (let { i, j } of line) { grid[i][j] = null; } score += line.length * 2; } } function isGridFull() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) return false; } } return true; } function restartGame() { resetGame(); console.log("Game restarted via button"); } </script> </div> http://margo.mozello.shop/blog3/params/post/5137006/7-dlja-mob Tue, 23 Sep 2025 09:30:00 +0000 <title>Lines 98 - Smaller Field for iOS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js" onerror="loadBackupP5()"></script> <script> function loadBackupP5() { console.log("Failed to load p5.js from primary CDN, trying backup..."); let script = document.createElement('script'); script.src = 'https://unpkg.com/p5@1.4.2/lib/p5.min.js'; script.onload = () => console.log("Backup p5.js loaded"); script.onerror = () => console.log("Failed to load p5.js"); document.head.appendChild(script); } </script> <style> body { margin: 0; padding: 0; background: linear-gradient(to bottom, #e0f7fa, #b3e5fc); font-family: Arial, sans-serif; -webkit-user-select: none; user-select: none; } #game-container { max-width: 100%; width: 100%; margin: 0 auto; padding: 5px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: center; box-sizing: border-box; position: relative; } canvas { display: block; margin: 0 auto; border-radius: 8px; touch-action: none; cursor: pointer; width: 100%; max-height: 100vh; } #restart { position: absolute; top: 5px; right: 5px; padding: 6px 12px; background: #0288d1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; z-index: 10; } #restart:hover, #restart:active { background: #0277bd; } @media (max-width: 400px) { #game-container { padding: 3px; } #restart { padding: 5px 10px; font-size: 10px; } canvas { max-width: 100%; max-height: calc(100vh - 10px); } } </style> <div id="game-container"> <button id="restart" onclick="restartGame()" fdprocessedid="d2ifaj">Restart</button> <script> let grid; let cellSize; let gridSize = 9; let colors = ['#f44336', '#2196f3', '#4caf50', '#ffeb3b', '#9c27b0', '#00bcd4', '#ff9800']; let selectedBall = null; let score = 0; let gameOver = false; let nextBalls = []; let animation = null; let moveCount = 0; function setup() { console.log("p5.js setup started"); pixelDensity(2); // Support Retina display on iPhone 7 let maxWidth = Math.min(window.innerWidth - 10, 320); // Smaller width for iPhone 7 let maxHeight = Math.min(window.innerHeight - 10, 480); // Fit iPhone 7 height cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); // Reduced extra height let canvas = createCanvas(maxWidth, canvasHeight); canvas.parent('game-container'); canvas.style('touch-action', 'none'); console.log(`Canvas size: ${maxWidth}x${canvasHeight}, cellSize: ${cellSize}`); resetGame(); console.log("p5.js setup completed"); } function windowResized() { let maxWidth = Math.min(window.innerWidth - 10, 320); let maxHeight = Math.min(window.innerHeight - 10, 480); cellSize = Math.floor(maxWidth / gridSize); let canvasHeight = Math.min(maxHeight, gridSize * cellSize + 100); resizeCanvas(maxWidth, canvasHeight); console.log(`Resized canvas: ${maxWidth}x${canvasHeight}`); } function resetGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); nextBalls = generateBalls(3); spawnBalls(nextBalls); nextBalls = generateBalls(3); score = 0; gameOver = false; animation = null; selectedBall = null; moveCount = 0; console.log("Game reset"); } function draw() { if (gameOver) { background(255); drawGrid(); drawBalls(); textAlign(CENTER); textSize(cellSize * 0.8); fill(255, 0, 0); text("Game Over!", width / 2, height / 2); return; } background(255); drawGrid(); drawBalls(); drawNextBalls(); drawScore(); if (animation) { let { startX, startY, endX, endY, color, progress } = animation; let x = lerp(startX, endX, progress); let y = lerp(startY, endY, progress); drawBall(-1, -1, color, x, y); animation.progress += 0.05; if (animation.progress >= 1) { animation = null; } } } function drawGrid() { fill(240, 240, 240); rect(10, 10, gridSize * cellSize, gridSize * cellSize, 5); stroke(200); strokeWeight(1); for (let i = 0; i <= gridSize; i++) { line(10 + i * cellSize, 10, 10 + i * cellSize, 10 + gridSize * cellSize); line(10, 10 + i * cellSize, 10 + gridSize * cellSize, 10 + i * cellSize); } } function drawBalls() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { drawBall(i, j, grid[i][j]); } } } if (selectedBall) { noFill(); stroke(255, 215, 0); strokeWeight(2); ellipse(10 + selectedBall.i * cellSize + cellSize / 2, 10 + selectedBall.j * cellSize + cellSize / 2, cellSize * 0.9); } } function drawNextBalls() { fill(0); textSize(cellSize * 0.3); textAlign(LEFT); text("Next:", 10, gridSize * cellSize + 40); for (let k = 0; k < nextBalls.length; k++) { drawBall(-1, -1, nextBalls[k], 10 + (k + 1) * cellSize, gridSize * cellSize + 30 + cellSize / 2, 0.5); } } function drawScore() { fill(0); textSize(cellSize * 0.3); text(`Score: ${score}`, 10, gridSize * cellSize + 80); } function drawBall(i, j, col, customX = null, customY = null, scale = 1) { let x = customX || 10 + i * cellSize + cellSize / 2; let y = customY || 10 + j * cellSize + cellSize / 2; let gradient = drawingContext.createRadialGradient(x - cellSize * 0.1 * scale, y - cellSize * 0.1 * scale, 0, x, y, cellSize * 0.4 * scale); gradient.addColorStop(0, lightenColor(col)); gradient.addColorStop(1, col); drawingContext.fillStyle = gradient; noStroke(); ellipse(x, y, cellSize * 0.8 * scale); fill(255, 255, 255, 150); ellipse(x - cellSize * 0.2 * scale, y - cellSize * 0.2 * scale, cellSize * 0.2 * scale); } function lightenColor(hex) { let r = parseInt(hex.slice(1,3),16); let g = parseInt(hex.slice(3,5),16); let b = parseInt(hex.slice(5,7),16); r = Math.min(255, r + 50); g = Math.min(255, g + 50); b = Math.min(255, b + 50); return `rgb(${r},${g},${b})`; } function touchStarted() { if (gameOver) return false; let coords = touches.length > 0 ? { x: touches[0].x, y: touches[0].y } : { x: mouseX, y: mouseY }; console.log(`Touch/Click at: (${coords.x}, ${coords.y})`); let mx = coords.x - 10; let my = coords.y - 10; let i = Math.floor(mx / cellSize); let j = Math.floor(my / cellSize); console.log(`Grid position: (${i}, ${j})`); if (i < 0 || i >= gridSize || j < 0 || j >= gridSize) { console.log("Touch/Click outside grid, deselecting"); selectedBall = null; return false; } if (!selectedBall) { if (grid[i][j]) { selectedBall = { i, j }; console.log(`Selected ball at: (${i}, ${j})`); } else { console.log("No ball at touched position"); } } else { if (grid[i][j]) { if (i === selectedBall.i && j === selectedBall.j) { console.log("Deselected same ball"); selectedBall = null; } else { console.log(`Reselected new ball at: (${i}, ${j})`); selectedBall = { i, j }; } } else { if (canMove(selectedBall.i, selectedBall.j, i, j)) { moveCount++; console.log(`Move ${moveCount}: From (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); let startX = 10 + selectedBall.i * cellSize + cellSize / 2; let startY = 10 + selectedBall.j * cellSize + cellSize / 2; let endX = 10 + i * cellSize + cellSize / 2; let endY = 10 + j * cellSize + cellSize / 2; animation = { startX, startY, endX, endY, color: grid[selectedBall.i][selectedBall.j], progress: 0 }; moveBall(selectedBall.i, selectedBall.j, i, j); let lines = checkLines(); if (lines.length === 0) { if (!spawnBalls(nextBalls)) { console.log("No empty cells for spawning balls, ending game"); gameOver = true; } else { nextBalls = generateBalls(3); if (isGridFull() || !isAnyMovePossible()) { console.log("Grid is full or no moves possible, ending game"); gameOver = true; } } } else { removeLines(lines); } selectedBall = null; } else { console.log(`Invalid move: No path from (${selectedBall.i}, ${selectedBall.j}) to (${i}, ${j})`); selectedBall = null; } } } return false; // Prevent default iOS touch behavior } function mousePressed() { if (gameOver) return; touchStarted(); // Reuse touchStarted for desktop compatibility } function generateBalls(num) { return Array(num).fill().map(() => random(colors)); } function spawnBalls(balls) { let emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) emptyCells.push({ i, j }); } } if (emptyCells.length < balls.length) { console.log("Not enough empty cells for spawning"); return false; } for (let n = 0; n < balls.length; n++) { let idx = Math.floor(random(emptyCells.length)); let { i, j } = emptyCells.splice(idx, 1)[0]; grid[i][j] = balls[n]; } return true; } function canMove(startI, startJ, endI, endJ) { if (startI === endI && startJ === endJ) return false; let queue = [{ i: startI, j: startJ }]; let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); visited[startI][startJ] = true; let maxIterations = gridSize * gridSize; let iterations = 0; while (queue.length > 0) { iterations++; if (iterations > maxIterations) { console.log("canMove: Max iterations reached"); return false; } let { i, j } = queue.shift(); if (i === endI && j === endJ) return true; let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { queue.push({ i: ni, j: nj }); visited[ni][nj] = true; } } } return false; } function isAnyMovePossible() { for (let si = 0; si < gridSize; si++) { for (let sj = 0; sj < gridSize; sj++) { if (grid[si][sj]) { let visited = Array(gridSize).fill().map(() => Array(gridSize).fill(false)); let queue = [{ i: si, j: sj }]; visited[si][sj] = true; while (queue.length > 0) { let { i, j } = queue.shift(); let neighbors = [ { ni: i + 1, nj: j }, { ni: i - 1, nj: j }, { ni: i, nj: j + 1 }, { ni: i, nj: j - 1 } ]; for (let { ni, nj } of neighbors) { if (ni >= 0 && ni < gridSize && nj >= 0 && nj < gridSize && !visited[ni][nj] && !grid[ni][nj]) { return true; } } } } } } return false; } function moveBall(startI, startJ, endI, endJ) { grid[endI][endJ] = grid[startI][startJ]; grid[startI][startJ] = null; } function checkLines() { let lines = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j]) { let hLine = checkLine(i, j, 0, 1); if (hLine.length >= 5) lines.push(hLine); let vLine = checkLine(i, j, 1, 0); if (vLine.length >= 5) lines.push(vLine); let d1Line = checkLine(i, j, 1, -1); if (d1Line.length >= 5) lines.push(d1Line); let d2Line = checkLine(i, j, 1, 1); if (d2Line.length >= 5) lines.push(d2Line); } } } let uniqueLines = []; let removed = new Set(); for (let line of lines) { let positions = line.map(p => `${p.i},${p.j}`); if (!positions.some(pos => removed.has(pos))) { uniqueLines.push(line); positions.forEach(pos => removed.add(pos)); } } return uniqueLines; } function checkLine(startI, startJ, di, dj) { let line = [{ i: startI, j: startJ }]; let color = grid[startI][startJ]; let i = startI + di; let j = startJ + dj; let iterations = 0; let maxIterations = gridSize; while (i >= 0 && i < gridSize && j >= 0 && j < gridSize && grid[i][j] === color) { iterations++; if (iterations > maxIterations) { console.log("checkLine: Max iterations reached"); break; } line.push({ i, j }); i += di; j += dj; } return line; } function removeLines(lines) { for (let line of lines) { for (let { i, j } of line) { grid[i][j] = null; } score += line.length * 2; } } function isGridFull() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!grid[i][j]) return false; } } return true; } function restartGame() { resetGame(); console.log("Game restarted via button"); } </script> </div>