http://margo.mozello.shop/blog3/ Маргарита - Блог3 http://margo.mozello.shop/blog3/params/post/5281636/4 Tue, 21 Jul 2026 09:55:00 +0000 ооооооооооооооооо<hr class="moze-more-divider"><p>4</p><p><br></p> <div id="game-container" style="display:flex; flex-direction:column; align-items:center; font-family:sans-serif; padding:10px;"> <div style="width:100%; max-width:800px; display:flex; justify-content:space-between; margin-bottom:10px;"> <h2 style="margin:0;">2048 - Eternal</h2> <div class="moze-right">Score: <span id="s-val">0</span><br>Best: <span id="b-val">0</span></div> </div> <div id="board" style="display:grid; gap:8px; background:#bbada0; padding:8px; border-radius:6px; transition:grid-template-columns 0.1s linear;"></div> <div style="margin-top:20px; display:flex; gap:10px;"> <button onclick="game.reset()">New Game</button> <button onclick="game.undo()">Undo</button> </div> </div> <style> .tile { min-height: 50px; min-width: 50px; border-radius:4px; display:flex; justify-content:center; align-items:center; font-weight:bold; color:#fff; transition:all 0.1s; padding: 0 10px; white-space:nowrap; } </style> <script> class Game2048 { constructor() { this.size = 7; this.boardEl = document.getElementById('board'); this.ctx = document.createElement('canvas').getContext('2d'); this.loadGame(); document.addEventListener('keydown', (e) => this.input(e)); this.render(); } saveGame() { localStorage.setItem('2048_eternal', JSON.stringify({ board: this.board, score: this.score, history: this.history })); } loadGame() { const saved = localStorage.getItem('2048_eternal'); if (saved) { const data = JSON.parse(saved); this.board = data.board; this.score = data.score; this.history = data.history; } else { this.board = Array(this.size).fill().map(() => Array(this.size).fill(0)); this.score = 0; this.history = []; this.spawn(); this.spawn(); } } input(e) { const keys = {ArrowUp:'up', ArrowDown:'down', ArrowLeft:'left', ArrowRight:'right', w:'up', s:'down', a:'left', d:'right'}; if (keys[e.key]) { e.preventDefault(); this.move(keys[e.key]); } } move(dir) { let prevBoard = JSON.stringify(this.board); let moved = false; const rotate = () => { let next = Array(this.size).fill().map(() => Array(this.size).fill(0)); for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) next[c][this.size-1-r] = this.board[r][c]; this.board = next; }; const slide = () => { for(let r=0; r<this.size; r++) { let row = this.board[r].filter(x => x); let newRow = []; for(let i=0; i<row.length; i++) { if(i + 1 < row.length && row[i] === row[i+1]) { newRow.push(row[i]*2); this.score += row[i]*2; i++; moved = true; } else { newRow.push(row[i]); } } while(newRow.length < this.size) newRow.push(0); if(this.board[r].join(',') !== newRow.join(',')) moved = true; this.board[r] = newRow; } }; const dirs = {up:3, right:2, down:1, left:0}; for(let i=0; i<dirs[dir]; i++) rotate(); slide(); for(let i=0; i<(4-dirs[dir])%4; i++) rotate(); if(moved) { this.history.push(prevBoard); this.spawn(); this.saveGame(); this.render(); } } spawn() { let empty = []; for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) if(!this.board[r][c]) empty.push({r,c}); if(empty.length) { let {r,c} = empty[Math.floor(Math.random()*empty.length)]; this.board[r][c] = Math.random() < 0.9 ? 2 : 4; } } render() { this.boardEl.innerHTML = ''; let colWidths = Array(this.size).fill(0); for(let c=0; c<this.size; c++) { let max = 60; for(let r=0; r<this.size; r++) { let val = this.board[r][c] ? this.board[r][c].toString() : "0"; let w = this.ctx.measureText(val).width + 30; if(w > max) max = w; } colWidths[c] = max; } this.boardEl.style.gridTemplateColumns = colWidths.map(w => `${w}px`).join(' '); this.board.flat().forEach(val => { let t = document.createElement('div'); t.className = 'tile'; t.textContent = val || ''; t.style.background = val ? `hsl(${Math.log2(val)*20}, 70%, 45%)` : '#cdc1b4'; t.style.fontSize = val > 100000 ? '12px' : '18px'; this.boardEl.appendChild(t); }); document.getElementById('s-val').textContent = this.score; let best = Math.max(this.score, localStorage.getItem('best') || 0); localStorage.setItem('best', best); document.getElementById('b-val').textContent = best; } reset() { localStorage.removeItem('2048_eternal'); location.reload(); } undo() { if(this.history.length) { this.board = JSON.parse(this.history.pop()); this.saveGame(); this.render(); } } } const game = new Game2048(); </script> http://margo.mozello.shop/blog3/params/post/5279599/3 Wed, 15 Jul 2026 13:57:00 +0000 початок 16 липня 2026&nbsp;&nbsp; <span style="text-align: right; font-weight: 300; font-style: normal">155232</span> <hr class="moze-more-divider"><p>3</p><p><br></p> <div id="game-container" style="display:flex; flex-direction:column; align-items:center; font-family:sans-serif; padding:10px;"> <div style="width:100%; max-width:800px; display:flex; justify-content:space-between; margin-bottom:10px;"> <h2 style="margin:0;">2048 - Eternal</h2> <div class="moze-right">Score: <span id="s-val">0</span><br>Best: <span id="b-val">0</span></div> </div> <div id="board" style="display:grid; gap:8px; background:#bbada0; padding:8px; border-radius:6px; transition:grid-template-columns 0.1s linear;"></div> <div style="margin-top:20px; display:flex; gap:10px;"> <button onclick="game.reset()" fdprocessedid="sq2gat">New Game</button> <button onclick="game.undo()" fdprocessedid="omrp2p">Undo</button> </div> </div> <style> .tile { min-height: 50px; min-width: 50px; border-radius:4px; display:flex; justify-content:center; align-items:center; font-weight:bold; color:#fff; transition:all 0.1s; padding: 0 10px; white-space:nowrap; } </style> <script> class Game2048 { constructor() { this.size = 7; this.boardEl = document.getElementById('board'); this.ctx = document.createElement('canvas').getContext('2d'); this.loadGame(); document.addEventListener('keydown', (e) => this.input(e)); this.render(); } saveGame() { localStorage.setItem('2048_eternal', JSON.stringify({ board: this.board, score: this.score, history: this.history })); } loadGame() { const saved = localStorage.getItem('2048_eternal'); if (saved) { const data = JSON.parse(saved); this.board = data.board; this.score = data.score; this.history = data.history; } else { this.board = Array(this.size).fill().map(() => Array(this.size).fill(0)); this.score = 0; this.history = []; this.spawn(); this.spawn(); } } input(e) { const keys = {ArrowUp:'up', ArrowDown:'down', ArrowLeft:'left', ArrowRight:'right', w:'up', s:'down', a:'left', d:'right'}; if (keys[e.key]) { e.preventDefault(); this.move(keys[e.key]); } } move(dir) { let prevBoard = JSON.stringify(this.board); // Логіка зсуву (стандартна для 2048) let moved = false; // Тут реалізовано поворот для всіх 4 напрямків через одну функцію const rotate = () => { let next = Array(this.size).fill().map(() => Array(this.size).fill(0)); for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) next[c][this.size-1-r] = this.board[r][c]; this.board = next; }; const slide = () => { for(let r=0; r<this.size; r++) { let row = this.board[r].filter(x => x); let newRow = []; for(let i=0; i<row.length; i++) { if(row[i] === row[i+1]) { newRow.push(row[i]*2); this.score += row[i]*2; i++; moved = true; } else { newRow.push(row[i]); } } while(newRow.length < this.size) newRow.push(0); if(this.board[r].join(',') !== newRow.join(',')) moved = true; this.board[r] = newRow; } }; const dirs = {up:3, right:2, down:1, left:0}; for(let i=0; i<dirs[dir]; i++) rotate(); slide(); for(let i=0; i<(4-dirs[dir])%4; i++) rotate(); if(moved) { this.history.push(prevBoard); this.spawn(); this.saveGame(); this.render(); } } spawn() { let empty = []; for(let r=0; r<this.size; r++) for(let c=0; c<this.size; c++) if(!this.board[r][c]) empty.push({r,c}); if(empty.length) { let {r,c} = empty[Math.floor(Math.random()*empty.length)]; this.board[r][c] = Math.random() < 0.9 ? 2 : 4; } } render() { this.boardEl.innerHTML = ''; let colWidths = Array(this.size).fill(0); // Розрахунок ширини for(let c=0; c<this.size; c++) { let max = 60; for(let r=0; r<this.size; r++) { let val = this.board[r][c] ? this.board[r][c].toString() : "0"; let w = this.ctx.measureText(val).width + 30; if(w > max) max = w; } colWidths[c] = max; } this.boardEl.style.gridTemplateColumns = colWidths.map(w => `${w}px`).join(' '); this.board.flat().forEach(val => { let t = document.createElement('div'); t.className = 'tile'; t.textContent = val || ''; t.style.background = val ? `hsl(${Math.log2(val)*20}, 70%, 45%)` : '#cdc1b4'; t.style.fontSize = val > 100000 ? '12px' : '18px'; this.boardEl.appendChild(t); }); document.getElementById('s-val').textContent = this.score; let best = Math.max(this.score, localStorage.getItem('best') || 0); localStorage.setItem('best', best); document.getElementById('b-val').textContent = best; } reset() { localStorage.removeItem('2048_eternal'); location.reload(); } undo() { if(this.history.length) { this.board = JSON.parse(this.history.pop()); this.saveGame(); this.render(); } } } const game = new Game2048(); </script> http://margo.mozello.shop/blog3/params/post/5250004/10 Thu, 07 May 2026 15:54:00 +0000 10&nbsp; 10&nbsp; 10&nbsp;&nbsp;<hr class="moze-more-divider"><p>10</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048 (7×7) — Покращена версія</title> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #faf8ef, #f3e5d0); margin: 0; padding: 15px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 38px; margin: 10px 0 5px; color: #5c4033; text-align: center; } .subtitle { margin-bottom: 10px; color: #7a5c4b; font-size: 16px; text-align: center; } .stats { display: flex; gap: 15px; margin: 10px 0; flex-wrap: wrap; justify-content: center; } .info-box { background: #8f7a66; color: white; padding: 10px 18px; border-radius: 10px; min-width: 120px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .label { font-size: 14px; opacity: 0.9; } .value { font-size: 24px; font-weight: bold; margin-top: 4px; } button { padding: 12px 22px; font-size: 18px; margin: 12px 0; border: none; border-radius: 10px; background: #6d4c41; color: white; cursor: pointer; transition: 0.2s; font-weight: bold; } button:hover { background: #5d4037; transform: scale(1.03); } #game-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #bbada0; padding: 8px; border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .tile { background: #cdc1b4; min-height: 62px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 8px; font-size: 24px; transition: all 0.12s ease-in-out; user-select: none; } .tile:not(:empty) { animation: pop 0.15s ease; } @keyframes pop { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } .tile[data-value="2"] { background: #eee4da; color: #776e65; } .tile[data-value="4"] { background: #ede0c8; color: #776e65; } .tile[data-value="8"] { background: #f2b179; color: white; } .tile[data-value="16"] { background: #f59563; color: white; } .tile[data-value="32"] { background: #f67c5f; color: white; } .tile[data-value="64"] { background: #f65e3b; color: white; } .tile[data-value="128"] { background: #edcf72; color: white; font-size: 22px; } .tile[data-value="256"] { background: #edcc61; color: white; font-size: 22px; } .tile[data-value="512"] { background: #edc850; color: white; font-size: 22px; } .tile[data-value="1024"] { background: #edc53f; color: white; font-size: 20px; } .tile[data-value="2048"] { background: #edc22e; color: white; font-size: 20px; } .tile[data-value="4096"] { background: #00b894; color: white; font-size: 20px; } .tile[data-value="8192"] { background: #00a8ff; color: white; font-size: 19px; } .tile[data-value="16384"] { background: #6c5ce7; color: white; font-size: 18px; } .tile[data-value="32768"] { background: #a55eea; color: white; font-size: 17px; } .tile[data-value="65536"] { background: #ff7675; color: white; font-size: 16px; } .tile[data-value="131072"] { background: #fd79a8; color: white; font-size: 15px; } .tile[data-value="262144"] { background: #feca57; color: #2d3436; font-size: 14px; } .tile[data-value="524288"] { background: #48dbfb; color: #1e272e; font-size: 13px; } .tile[data-value="1048576"] { background: #ff9ff3; color: #1e272e; font-size: 12px; } .controls { margin-top: 15px; text-align: center; color: #6d4c41; font-size: 14px; max-width: 520px; } @media (max-width: 600px) { .tile { min-height: 44px; font-size: 18px; } h1 { font-size: 30px; } } </style> <h1>2048 (7×7)</h1> <div class="subtitle">Покращена версія з рекордом і плитками до 1048576</div> <div class="stats"> <div class="info-box"> <div class="label">Очки</div> <div class="value" id="score">0</div> </div> <div class="info-box"> <div class="label">Рекорд</div> <div class="value" id="best">0</div> </div> </div> <button id="restart">Нова гра</button> <div id="game-board"></div> <div class="controls"> Керування: ← ↑ → ↓ (стрілки клавіатури) </div> <script> const SIZE = 7; const TOTAL = SIZE * SIZE; let values = new Array(TOTAL).fill(0); let score = 0; let best = parseInt(localStorage.getItem("best2048_7x7")) || 0; const board = document.getElementById("game-board"); const scoreEl = document.getElementById("score"); const bestEl = document.getElementById("best"); function createBoard() { board.innerHTML = ""; for (let i = 0; i < TOTAL; i++) { const tile = document.createElement("div"); tile.className = "tile"; board.appendChild(tile); } } function updateBest() { if (score > best) { best = score; localStorage.setItem("best2048_7x7", best); } } function updateBoard() { const tiles = board.children; for (let i = 0; i < TOTAL; i++) { const val = values[i]; tiles[i].textContent = val || ""; tiles[i].dataset.value = val || ""; } updateBest(); scoreEl.textContent = score; bestEl.textContent = best; } function addTile() { const empty = []; for (let i = 0; i < TOTAL; i++) { if (values[i] === 0) { empty.push(i); } } if (empty.length > 0) { const randomIndex = Math.floor(Math.random() * empty.length); const pos = empty[randomIndex]; values[pos] = Math.random() < 0.9 ? 2 : 4; } } function slide(line) { let arr = line.filter(v => v !== 0); for (let i = 0; i < arr.length - 1; i++) { if (arr[i] === arr[i + 1]) { arr[i] *= 2; score += arr[i]; arr[i + 1] = 0; } } arr = arr.filter(v => v !== 0); while (arr.length < SIZE) { arr.push(0); } return arr; } function move(direction) { let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let idx; if (direction === "left") idx = i * SIZE + j; if (direction === "right") idx = i * SIZE + (SIZE - 1 - j); if (direction === "up") idx = j * SIZE + i; if (direction === "down") idx = (SIZE - 1 - j) * SIZE + i; line.push(values[idx]); } const newLine = slide(line); for (let j = 0; j < SIZE; j++) { let idx; if (direction === "left") idx = i * SIZE + j; if (direction === "right") idx = i * SIZE + (SIZE - 1 - j); if (direction === "up") idx = j * SIZE + i; if (direction === "down") idx = (SIZE - 1 - j) * SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; } } } if (moved) { addTile(); updateBoard(); if (isGameOver()) { setTimeout(() => { alert("Гру завершено! Спробуй ще раз."); }, 100); } } } function isGameOver() { for (let i = 0; i < TOTAL; i++) { if (values[i] === 0) return false; } for (let row = 0; row < SIZE; row++) { for (let col = 0; col < SIZE; col++) { const current = values[row * SIZE + col]; if (col < SIZE - 1 && current === values[row * SIZE + col + 1]) { return false; } if (row < SIZE - 1 && current === values[(row + 1) * SIZE + col]) { return false; } } } return true; } function restart() { values = new Array(TOTAL).fill(0); score = 0; addTile(); addTile(); updateBoard(); } document.addEventListener("keydown", (e) => { if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) { e.preventDefault(); if (e.key === "ArrowLeft") move("left"); if (e.key === "ArrowRight") move("right"); if (e.key === "ArrowUp") move("up"); if (e.key === "ArrowDown") move("down"); } }); document.getElementById("restart").addEventListener("click", restart); createBoard(); restart(); </script> http://margo.mozello.shop/blog3/params/post/5250000/9 Thu, 07 May 2026 15:43:00 +0000 9999999999999999999999999999<hr class="moze-more-divider"><p>0</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2048 (7×7) — Красиві кольори</title> <style> body { font-family: Arial, sans-serif; background: #faf8ef; margin: 0; padding: 10px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } h1 { font-size: 36px; margin: 10px 0 5px; } .info { font-size: 20px; margin: 5px 0; } button { padding: 10px 20px; font-size: 17px; margin: 10px 0; border: none; border-radius: 8px; background: #8f7a66; color: white; cursor: pointer; } #game-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #bbada0; padding: 8px; border-radius: 12px; width: 100%; max-width: 480px; } .tile { background: #cdc1b4; min-height: 58px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 8px; font-size: 26px; transition: all 0.1s; } /* Основні кольори */ .tile[data-value="2"] { background: #eee4da; color: #776e65; } .tile[data-value="4"] { background: #ede0c8; color: #776e65; } .tile[data-value="8"] { background: #f2b179; color: white; } .tile[data-value="16"] { background: #f59563; color: white; } .tile[data-value="32"] { background: #f67c5f; color: white; } .tile[data-value="64"] { background: #f65e3b; color: white; } .tile[data-value="128"] { background: #edcf72; color: white; } .tile[data-value="256"] { background: #edcc61; color: white; } .tile[data-value="512"] { background: #edc850; color: white; } .tile[data-value="1024"] { background: #edc53f; color: white; } .tile[data-value="2048"] { background: #edc22e; color: white; } /* Яскраві кольори для великих чисел */ .tile[data-value="4096"] { background: #00b894; color: white; } .tile[data-value="8192"] { background: #00a8ff; color: white; } .tile[data-value="16384"] { background: #6c5ce7; color: white; } .tile[data-value="32768"] { background: #a55eea; color: white; } .tile[data-value="65536"] { background: #ff7675; color: white; } .tile[data-value="131072"]{ background: #fd79a8; color: white; } .tile[data-value^="262144"]{ background: #feca57; color: #2d3436; font-size: 22px; } </style> <h1>2048 (7×7) — Тест</h1> <div class="info" id="score">Очки: 0</div> <div class="info" id="best">Рекорд: 0</div> <button id="restart" fdprocessedid="pxw4e9">Нова гра</button> <div id="game-board"></div> <script> const SIZE = 7; const TOTAL = SIZE * SIZE; let values = new Array(TOTAL).fill(0); let score = 0; const board = document.getElementById('game-board'); const scoreEl = document.getElementById('score'); function createBoard() { board.innerHTML = ''; for (let i = 0; i < TOTAL; i++) { const tile = document.createElement('div'); tile.className = 'tile'; board.appendChild(tile); } } function updateBoard() { const tiles = board.children; for (let i = 0; i < TOTAL; i++) { const val = values[i]; tiles[i].textContent = val || ''; tiles[i].dataset.value = val || ''; } scoreEl.textContent = 'Очки: ' + score; } function addTile() { const empty = []; for (let i = 0; i < TOTAL; i++) if (values[i] === 0) empty.push(i); if (empty.length > 0) { const pos = empty[Math.floor(Math.random() * empty.length)]; values[pos] = Math.random() < 0.9 ? 2 : 4; } } function slide(line) { let arr = line.filter(v => v); for (let i = 0; i < arr.length - 1; i++) { if (arr[i] === arr[i + 1]) { arr[i] *= 2; score += arr[i]; arr[i + 1] = 0; } } arr = arr.filter(v => v); while (arr.length < SIZE) arr.push(0); return arr; } function move(dir) { let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let idx = (dir === 'left') ? i*SIZE + j : (dir === 'right') ? i*SIZE + (SIZE-1-j) : (dir === 'up') ? j*SIZE + i : (SIZE-1-j)*SIZE + i; line.push(values[idx]); } let newLine = slide(line); for (let j = 0; j < SIZE; j++) { let idx = (dir === 'left') ? i*SIZE + j : (dir === 'right') ? i*SIZE + (SIZE-1-j) : (dir === 'up') ? j*SIZE + i : (SIZE-1-j)*SIZE + i; if (values[idx] !== newLine[j]) { values[idx] = newLine[j]; moved = true; } } } if (moved) { addTile(); updateBoard(); } } function restart() { values = new Array(TOTAL).fill(0); score = 0; addTile(); addTile(); updateBoard(); } createBoard(); restart(); document.addEventListener('keydown', e => { if (["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)) { e.preventDefault(); if (e.key === "ArrowLeft") move("left"); if (e.key === "ArrowRight") move("right"); if (e.key === "ArrowUp") move("up"); if (e.key === "ArrowDown") move("down"); } }); document.getElementById('restart').onclick = restart; </script> http://margo.mozello.shop/blog3/params/post/5198958/4 Fri, 23 Jan 2026 16:40:00 +0000 Початок 23 лютого 2026<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>