http://margo.mozello.shop/gry/ Маргарита - Ігри http://margo.mozello.shop/gry/params/post/5246769/4 Thu, 30 Apr 2026 12:29:00 +0000 написання слова через частини слова<hr class="moze-more-divider"><p>4</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MorphoPlay — Кольорові Морфеми</title> <style> :root{ --prefix:#ef4444; --root:#22c55e; --suffix:#3b82f6; --ending:#f59e0b; --primary:#4f46e5; } body{ margin:0; font-family:Arial,sans-serif; background:#eef2ff; padding:15px; } .container{ max-width:1000px; margin:auto; } .card{ background:white; border-radius:20px; padding:20px; margin-bottom:20px; box-shadow:0 8px 20px rgba(0,0,0,0.08); } h1,h2,h3{ text-align:center; } h1{ color:var(--primary); } label{ display:block; margin-top:10px; font-weight:bold; } input,textarea{ width:100%; padding:14px; margin-top:6px; font-size:18px; border-radius:12px; border:2px solid #cbd5e1; box-sizing:border-box; } textarea{ min-height:120px; } button{ width:100%; padding:14px; margin-top:12px; border:none; border-radius:14px; font-size:20px; font-weight:bold; cursor:pointer; } .main-btn{ background:var(--primary); color:white; } .sound-btn{ background:#f59e0b; color:white; } .reset-btn{ background:#ef4444; color:white; } #taskWord{ text-align:center; font-size:clamp(2rem,8vw,4rem); font-weight:bold; color:var(--primary); margin:15px 0; } .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:15px; } .slot,.tile{ min-width:80px; min-height:80px; padding:10px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; text-align:center; } .slot{ background:#f8fafc; border:3px dashed #cbd5e1; } .tile{ color:white; border:none; } .tile.used{ opacity:0.35; pointer-events:none; } .prefix{background:var(--prefix);} .root{background:var(--root);} .suffix{background:var(--suffix);} .ending{background:var(--ending);} .legend{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; } .legend div{ color:white; padding:8px; border-radius:10px; text-align:center; font-weight:bold; } #status,#stars{ text-align:center; font-size:28px; margin-top:15px; } </style> <div class="container"> <div class="card"> <h1>🧠 MorphoPlay</h1> <label>Слово:</label> <input id="wordInput" placeholder="переписка" fdprocessedid="5tjroc"> <label>Морфеми (кожен рядок: частина|тип)</label> <textarea id="morphemeInput">пере|prefix пис|root к|suffix а|ending</textarea> <button class="main-btn" onclick="createGame()" fdprocessedid="fr1t7d">Створити гру</button> <div class="legend"> <div style="background:#ef4444;">🔴 Префікс</div> <div style="background:#22c55e;">🟢 Корінь</div> <div style="background:#3b82f6;">🔵 Суфікс</div> <div style="background:#f59e0b;">🟠 Закінчення</div> </div> </div> <div class="card"> <h2>Збери слово</h2> <div id="taskWord">—</div> <div class="row" id="answerArea"></div> <div class="row" id="tileArea"></div> <button class="sound-btn" onclick="speakWord()" fdprocessedid="jhg6of">🔊 Озвучити</button> <button class="reset-btn" onclick="resetGame()" fdprocessedid="9c44xk">🔄 Очистити</button> <div id="status"></div> <div id="stars"></div> </div> </div> <script> let targetWord=""; let morphemes=[]; let selected=[]; // ---------- CREATE ---------- function createGame(){ targetWord=document.getElementById("wordInput").value.trim().toLowerCase(); const raw=document.getElementById("morphemeInput").value.trim(); if(!targetWord){ alert("Введіть слово"); return; } if(!raw){ alert("Введіть морфеми"); return; } morphemes=[]; const lines=raw.split("\n"); for(let i=0;i<lines.length;i++){ let line=lines[i].trim(); if(!line) continue; let parts=line.split("|"); let text=(parts[0] || "").trim().toLowerCase(); let type=(parts[1] || "root").trim().toLowerCase(); if(text){ morphemes.push({ text:text, type:type }); } } if(morphemes.length===0){ alert("Помилка морфем"); return; } selected=[]; document.getElementById("taskWord").textContent=targetWord.toUpperCase(); document.getElementById("status").textContent=""; document.getElementById("stars").textContent=""; renderAnswer(); renderTiles(); } // ---------- ANSWER ---------- function renderAnswer(){ const area=document.getElementById("answerArea"); area.innerHTML=""; for(let i=0;i<morphemes.length;i++){ let slot=document.createElement("div"); slot.className="slot"; if(selected[i]){ slot.textContent=selected[i].text; } area.appendChild(slot); } } // ---------- SHUFFLE ---------- function shuffle(array){ let arr=[...array]; for(let i=arr.length-1;i>0;i--){ let j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]]; } if(arr.length>1){ let original=array.map(x=>x.text).join(""); let shuffled=arr.map(x=>x.text).join(""); if(original===shuffled){ [arr[0],arr[1]]=[arr[1],arr[0]]; } } return arr; } // ---------- TILES ---------- function renderTiles(){ const area=document.getElementById("tileArea"); area.innerHTML=""; let shuffled=shuffle(morphemes); shuffled.forEach(item=>{ let tile=document.createElement("button"); tile.className="tile " + item.type; tile.textContent=item.text; tile.onclick=function(){ if(selected.length>=morphemes.length) return; selected.push(item); tile.classList.add("used"); speak(item.text); renderAnswer(); checkAnswer(); }; area.appendChild(tile); }); } // ---------- CHECK ---------- function checkAnswer(){ if(selected.length!==morphemes.length) return; let result=selected.map(x=>x.text).join(""); if(result===targetWord){ document.getElementById("status").textContent="🎉 Молодець!"; document.getElementById("stars").textContent="⭐ ⭐ ⭐"; speakWord(); }else{ document.getElementById("status").textContent="🙂 Спробуй ще раз"; } } // ---------- RESET ---------- function resetGame(){ selected=[]; document.getElementById("status").textContent=""; document.getElementById("stars").textContent=""; renderAnswer(); renderTiles(); } // ---------- SOUND ---------- function getVoice(){ if(!window.speechSynthesis) return null; let voices=speechSynthesis.getVoices(); return ( voices.find(v=>v.lang==="uk-UA") || voices.find(v=>v.lang.startsWith("uk")) || voices[0] || null ); } function speak(text){ if(!window.speechSynthesis) return; speechSynthesis.cancel(); let utterance=new SpeechSynthesisUtterance(text); let voice=getVoice(); if(voice){ utterance.voice=voice; utterance.lang=voice.lang; }else{ utterance.lang="uk-UA"; } utterance.rate=0.65; utterance.pitch=1; speechSynthesis.speak(utterance); } function speakWord(){ if(targetWord){ speak(targetWord); } } document.addEventListener("click", ()=>{ if(window.speechSynthesis){ speechSynthesis.resume(); } },{once:true}); document.addEventListener("touchstart", ()=>{ if(window.speechSynthesis){ speechSynthesis.resume(); } },{once:true}); </script> http://margo.mozello.shop/gry/params/post/5246122/skladogra3 Wed, 29 Apr 2026 10:58:00 +0000 оооооооооооооооооооооо<hr class="moze-more-divider"><p>3</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="theme-color" content="#4f46e5"> <title>СкладоГра — Навчання читанню</title> <style> :root { --primary: #4f46e5; --accent: #f59e0b; --danger: #ef4444; --text: #1e293b; --radius: 20px; --shadow: 0 10px 25px rgba(0,0,0,0.08); --button-size: clamp(64px, 18vw, 110px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(180deg, #eef2ff, #f8fafc); color: var(--text); overflow-x: hidden; } .app { max-width: 900px; margin: 0 auto; padding: 16px; } .card { background: white; border-radius: var(--radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow); } h1, h2 { text-align: center; margin-top: 0; } h1 { color: var(--primary); } .mom-controls { display: flex; flex-direction: column; gap: 12px; } input { width: 100%; padding: 16px; font-size: 1.2rem; border-radius: 14px; border: 2px solid #cbd5e1; } button { border: none; border-radius: 16px; padding: 14px; font-size: 1.1rem; font-weight: bold; cursor: pointer; min-height: 56px; } .primary-btn { background: var(--primary); color: white; } .accent-btn { background: var(--accent); color: white; } .danger-btn { background: var(--danger); color: white; } .emoji { text-align: center; font-size: clamp(3rem, 12vw, 6rem); } #taskWord { text-align: center; font-size: clamp(2rem, 8vw, 4rem); font-weight: bold; color: var(--primary); margin: 10px 0 18px; word-break: break-word; } .syllables, .answer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } .tile, .slot { min-width: var(--button-size); min-height: var(--button-size); padding: 10px; border-radius: 18px; display: flex; justify-content: center; align-items: center; font-size: clamp(1rem, 3vw, 1.4rem); font-weight: bold; text-align: center; user-select: none; } .tile { background: #dbeafe; border: 3px solid #93c5fd; } .tile.used { opacity: 0.35; pointer-events: none; } .slot { background: #f1f5f9; border: 3px dashed #cbd5e1; } .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; } .status, .stars { text-align: center; margin-top: 14px; font-weight: bold; min-height: 28px; } .description { line-height: 1.7; font-size: 1rem; } ul { padding-left: 20px; } </style> <div class="app"> <!-- МАМА --> <div class="card"> <h1>🎓 СкладоГра</h1> <div class="mom-controls"> <label><b>Введіть слово:</b></label> <input id="wordInput" type="text" placeholder="Наприклад: машина"> <label><b>Склади (можна вручну):</b></label> <input id="manualSyllables" type="text" placeholder="ма-ши-на"> <button class="primary-btn" onclick="createGame()">Створити гру</button> </div> </div> <!-- ДИТИНА --> <div class="card"> <div class="emoji" id="emojiDisplay">🧩</div> <h2>Склади слово</h2> <div id="taskWord">—</div> <div class="answer" id="answerArea"></div> <div class="syllables" id="syllableArea"></div> <div class="controls"> <button class="accent-btn" onclick="speakWord()">🔊 Озвучити</button> <button class="danger-btn" onclick="resetAnswer()">🔄 Очистити</button> </div> <div class="status" id="status"></div> <div class="stars" id="stars"></div> </div> <!-- ІНСТРУКЦІЯ --> <div class="card description"> <h2>📘 Опис гри</h2> <p> Мама вводить слово, а дитина складає його з переплутаних складів. Гра працює на смартфонах, планшетах і ПК. </p> <h2>👩 Інструкція для мами</h2> <ul> <li>Введіть слово.</li> <li>За потреби виправте поділ на склади вручну.</li> <li>Натисніть “Створити гру”.</li> <li>Дитина бачить слово-завдання та обирає склади в правильному порядку.</li> <li>Кнопка “Озвучити” читає слово або склади.</li> </ul> </div> </div> <script> let targetWord = ""; let syllables = []; let selected = []; let voicesReady = false; const emojiMap = { "мама": "👩", "тато": "👨", "кіт": "🐱", "собака": "🐶", "машина": "🚗", "яблуко": "🍎", "сонце": "☀️" }; // -------- ПОДІЛ НА СКЛАДИ -------- function splitIntoSyllables(word) { word = word.toLowerCase().replace(/\s+/g, ""); const vowels = "аеєиіїоуюя"; if (word.length <= 2) return [word]; let vowelPositions = []; for (let i = 0; i < word.length; i++) { if (vowels.includes(word[i])) vowelPositions.push(i); } if (vowelPositions.length <= 1) return [word]; let result = []; let start = 0; for (let i = 0; i < vowelPositions.length - 1; i++) { const current = vowelPositions[i]; const next = vowelPositions[i + 1]; const between = next - current - 1; let splitPos = between <= 1 ? current + 1 : current + 2; result.push(word.slice(start, splitPos)); start = splitPos; } result.push(word.slice(start)); return result.filter(Boolean); } // -------- СТВОРЕННЯ ГРИ -------- function createGame() { targetWord = document.getElementById("wordInput").value.trim().toLowerCase(); if (!targetWord) return; const manual = document.getElementById("manualSyllables").value.trim(); if (manual) { syllables = manual.split("-").map(s => s.trim().toLowerCase()).filter(Boolean); } else { syllables = splitIntoSyllables(targetWord); document.getElementById("manualSyllables").value = syllables.join("-"); } selected = []; document.getElementById("taskWord").textContent = targetWord.toUpperCase(); renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; document.getElementById("emojiDisplay").textContent = emojiMap[targetWord] || "🧩"; unlockSpeech(); speakWord(); } // -------- СЛОТИ -------- function renderAnswerSlots() { const area = document.getElementById("answerArea"); area.innerHTML = ""; for (let i = 0; i < syllables.length; i++) { const slot = document.createElement("div"); slot.className = "slot"; slot.textContent = selected[i] || ""; area.appendChild(slot); } } // -------- ПЕРЕМІШАНІ СКЛАДИ -------- function renderSyllables() { const area = document.getElementById("syllableArea"); area.innerHTML = ""; let shuffled = [...syllables]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } if (shuffled.length > 1 && shuffled.join("") === syllables.join("")) { [shuffled[0], shuffled[1]] = [shuffled[1], shuffled[0]]; } shuffled.forEach(syllable => { const btn = document.createElement("button"); btn.className = "tile"; btn.textContent = syllable; btn.onclick = () => { if (selected.length >= syllables.length) return; selected.push(syllable); btn.classList.add("used"); speakSyllable(syllable); renderAnswerSlots(); checkAnswer(); }; area.appendChild(btn); }); } // -------- ПЕРЕВІРКА -------- function checkAnswer() { if (selected.length !== syllables.length) return; const formed = selected.join(""); if (formed === targetWord) { document.getElementById("status").textContent = "🎉 Молодець!"; document.getElementById("stars").textContent = "⭐ ⭐ ⭐"; speakWord(); if (navigator.vibrate) navigator.vibrate([150, 70, 150]); } else { document.getElementById("status").textContent = "🙂 Спробуй ще раз"; } } // -------- RESET -------- function resetAnswer() { selected = []; renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; } // -------- ОЗВУЧЕННЯ -------- function loadVoices() { return new Promise((resolve) => { let voices = speechSynthesis.getVoices(); if (voices.length) { voicesReady = true; resolve(voices); return; } speechSynthesis.onvoiceschanged = () => { voices = speechSynthesis.getVoices(); voicesReady = true; resolve(voices); }; setTimeout(() => { resolve(speechSynthesis.getVoices()); }, 1200); }); } function getBestVoice() { const voices = speechSynthesis.getVoices(); return ( voices.find(v => v.lang === "uk-UA") || voices.find(v => v.lang.toLowerCase().startsWith("uk")) || voices.find(v => v.lang.toLowerCase().startsWith("ru")) || voices.find(v => v.name.toLowerCase().includes("google")) || voices[0] || null ); } function fallbackSpeakWord() { if (!syllables.length) return; let delay = 0; syllables.forEach(part => { setTimeout(() => { const u = new SpeechSynthesisUtterance(part); u.lang = "uk-UA"; u.rate = 0.55; u.pitch = 1; speechSynthesis.speak(u); }, delay); delay += 900; }); } async function speakText(text, isWord = false) { if (!("speechSynthesis" in window)) return; await loadVoices(); speechSynthesis.cancel(); const voice = getBestVoice(); if (!voice) { if (isWord) fallbackSpeakWord(); return; } speechSynthesis.resume(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; utterance.lang = voice.lang || "uk-UA"; utterance.rate = isWord ? 0.65 : 0.55; utterance.pitch = 1; utterance.volume = 1; utterance.onerror = () => { if (isWord) fallbackSpeakWord(); }; speechSynthesis.speak(utterance); } function speakSyllable(syllable) { speakText(syllable, false); } function speakWord() { if (!targetWord) return; if (!voicesReady || !getBestVoice()) { fallbackSpeakWord(); } else { speakText(targetWord, true); } } function unlockSpeech() { if (!("speechSynthesis" in window)) return; speechSynthesis.resume(); const unlock = new SpeechSynthesisUtterance(" "); unlock.volume = 0; speechSynthesis.speak(unlock); loadVoices(); } document.addEventListener("touchstart", unlockSpeech, { once: true }); document.addEventListener("click", unlockSpeech, { once: true }); window.addEventListener("load", () => { loadVoices(); }); </script> http://margo.mozello.shop/gry/params/post/5246106/skladogra-2 Wed, 29 Apr 2026 10:40: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="theme-color" content="#4f46e5"> <title>СкладоГра — Навчання читанню</title> <style> :root { --primary: #4f46e5; --accent: #f59e0b; --danger: #ef4444; --text: #1e293b; --radius: 20px; --shadow: 0 10px 25px rgba(0,0,0,0.08); --button-size: clamp(64px, 18vw, 110px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(180deg, #eef2ff, #f8fafc); color: var(--text); } .app { max-width: 900px; margin: 0 auto; padding: 16px; } .card { background: white; border-radius: var(--radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow); } h1, h2 { text-align: center; } h1 { color: var(--primary); } .mom-controls { display: flex; flex-direction: column; gap: 12px; } input { width: 100%; padding: 16px; font-size: 1.2rem; border-radius: 14px; border: 2px solid #cbd5e1; } button { border: none; border-radius: 16px; padding: 14px; font-size: 1.1rem; font-weight: bold; cursor: pointer; min-height: 56px; } .primary-btn { background: var(--primary); color: white; } .accent-btn { background: var(--accent); color: white; } .danger-btn { background: var(--danger); color: white; } .emoji { text-align: center; font-size: clamp(3rem, 12vw, 6rem); } #taskWord { text-align: center; font-size: clamp(2rem, 8vw, 4rem); font-weight: bold; color: var(--primary); margin: 10px 0; word-break: break-word; } #taskSyllables { text-align: center; font-size: clamp(1rem, 4vw, 1.6rem); color: #64748b; margin-bottom: 14px; } .syllables, .answer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } .tile, .slot { min-width: var(--button-size); min-height: var(--button-size); padding: 10px; border-radius: 18px; display: flex; justify-content: center; align-items: center; font-size: clamp(1rem, 3vw, 1.4rem); font-weight: bold; text-align: center; } .tile { background: #dbeafe; border: 3px solid #93c5fd; } .tile.used { opacity: 0.35; pointer-events: none; } .slot { background: #f1f5f9; border: 3px dashed #cbd5e1; } .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; } .status, .stars { text-align: center; margin-top: 14px; font-weight: bold; } </style> <div class="app"> <div class="card"> <h1>🎓 СкладоГра</h1> <div class="mom-controls"> <label><b>Введіть слово:</b></label> <input id="wordInput" type="text" placeholder="Наприклад: машина"> <label><b>Склади (можна вручну):</b></label> <input id="manualSyllables" type="text" placeholder="ма-ши-на"> <button class="primary-btn" onclick="createGame()">Створити гру</button> </div> </div> <div class="card"> <div class="emoji" id="emojiDisplay">🧩</div> <h2>Склади слово</h2> <div id="taskWord">—</div> <div id="taskSyllables"></div> <div class="answer" id="answerArea"></div> <div class="syllables" id="syllableArea"></div> <div class="controls"> <button class="accent-btn" onclick="speakWord()">🔊 Озвучити</button> <button class="danger-btn" onclick="resetAnswer()">🔄 Очистити</button> </div> <div class="status" id="status"></div> <div class="stars" id="stars"></div> </div> </div> <script> let targetWord = ""; let syllables = []; let selected = []; const emojiMap = { "мама": "👩", "тато": "👨", "кіт": "🐱", "собака": "🐶", "машина": "🚗", "яблуко": "🍎", "сонце": "☀️" }; // КРАЩИЙ ПОДІЛ НА СКЛАДИ function splitIntoSyllables(word) { word = word.toLowerCase().replace(/\s+/g, ""); const vowels = "аеєиіїоуюя"; if (word.length <= 2) return [word]; let vowelPositions = []; for (let i = 0; i < word.length; i++) { if (vowels.includes(word[i])) vowelPositions.push(i); } if (vowelPositions.length <= 1) return [word]; let result = []; let start = 0; for (let i = 0; i < vowelPositions.length - 1; i++) { const current = vowelPositions[i]; const next = vowelPositions[i + 1]; const between = next - current - 1; let splitPos; if (between <= 1) splitPos = current + 1; else splitPos = current + 2; result.push(word.slice(start, splitPos)); start = splitPos; } result.push(word.slice(start)); return result.filter(Boolean); } function shuffleArray(arr) { return [...arr].sort(() => Math.random() - 0.5); } function createGame() { targetWord = document.getElementById("wordInput").value.trim().toLowerCase(); if (!targetWord) return; const manual = document.getElementById("manualSyllables").value.trim(); if (manual) { syllables = manual.split("-").map(s => s.trim().toLowerCase()).filter(Boolean); } else { syllables = splitIntoSyllables(targetWord); document.getElementById("manualSyllables").value = syllables.join("-"); } selected = []; document.getElementById("taskWord").textContent = targetWord.toUpperCase(); document.getElementById("taskSyllables").textContent = syllables.join(" • ").toUpperCase(); renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; document.getElementById("emojiDisplay").textContent = emojiMap[targetWord] || "🧩"; unlockSpeech(); speakWord(); } function renderAnswerSlots() { const area = document.getElementById("answerArea"); area.innerHTML = ""; for (let i = 0; i < syllables.length; i++) { const slot = document.createElement("div"); slot.className = "slot"; slot.textContent = selected[i] || ""; area.appendChild(slot); } } function renderSyllables() { const area = document.getElementById("syllableArea"); area.innerHTML = ""; shuffleArray(syllables).forEach(syllable => { const btn = document.createElement("button"); btn.className = "tile"; btn.textContent = syllable; btn.onclick = () => { selected.push(syllable); btn.classList.add("used"); speakText(syllable); renderAnswerSlots(); checkAnswer(); }; area.appendChild(btn); }); } function checkAnswer() { if (selected.length !== syllables.length) return; const formed = selected.join(""); if (formed === targetWord) { document.getElementById("status").textContent = "🎉 Молодець!"; document.getElementById("stars").textContent = "⭐ ⭐ ⭐"; speakWord(); if (navigator.vibrate) navigator.vibrate([150, 70, 150]); } else { document.getElementById("status").textContent = "🙂 Спробуй ще раз"; } } function resetAnswer() { selected = []; renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; } // ---------- НАДІЙНА УКРАЇНСЬКА ОЗВУЧКА ---------- function getBestVoice() { const voices = speechSynthesis.getVoices(); return ( voices.find(v => v.lang === "uk-UA") || voices.find(v => v.lang.toLowerCase().startsWith("uk")) || voices.find(v => v.name.toLowerCase().includes("ukrain")) || voices.find(v => v.name.toLowerCase().includes("google")) || null ); } function speakText(text) { if (!("speechSynthesis" in window)) return; speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); const voice = getBestVoice(); if (voice) { utterance.voice = voice; utterance.lang = voice.lang; } else { utterance.lang = "uk-UA"; } utterance.rate = 0.7; utterance.pitch = 1; utterance.volume = 1; speechSynthesis.speak(utterance); } function speakWord() { if (!targetWord) return; if (!getBestVoice()) { // fallback складами speakText(syllables.join(" ... ")); } else { speakText(targetWord); } } function unlockSpeech() { speechSynthesis.resume(); speechSynthesis.getVoices(); } window.speechSynthesis.onvoiceschanged = () => { speechSynthesis.getVoices(); }; document.addEventListener("click", unlockSpeech, { once: true }); document.addEventListener("touchstart", unlockSpeech, { once: true }); </script> http://margo.mozello.shop/gry/params/post/5245820/skladogra Tue, 28 Apr 2026 21:47:00 +0000 лллллллллллллллллл<hr class="moze-more-divider"><p>1&nbsp;&nbsp;</p><p> </p><h2 style="font-style: normal;" class="moze-center">📘 Опис гри</h2><p style="font-weight: 400; font-style: normal;" class="moze-start">“СкладоГра” — це мобільна навчальна гра для дітей 3–6 років, які ще не читають або лише починають вивчати склади. Дитина бачить частини слова (склади) та натискає їх у правильному порядку, щоб скласти слово.</p><h2 style="font-style: normal;" class="moze-center">👩 Інструкція для мами</h2><ul style="text-align: start; font-weight: 400; font-style: normal"><li>Введіть просте слово українською мовою (наприклад: мама, кіт, машина).</li><li>Натисніть “Створити гру”.</li><li>Дайте дитині телефон або планшет.</li><li>Дитина натискає склади по черзі.</li><li>Після правильно складеного слова гра покаже успіх ⭐</li><li>Використовуйте кнопку “Озвучити”, щоб дитина чула слово.</li></ul><p style="font-weight: 400; font-style: normal;" class="moze-start"><b>Поради:&nbsp;</b></p><p style="font-weight: 400; font-style: normal;" class="moze-start">&nbsp;1.</p><p style="font-weight: 400; font-style: normal;" class="moze-start">Починайте з коротких слів із 2 складів.</p><p style="font-weight: 400; font-style: normal;" class="moze-start">&nbsp;2</p><p style="font-weight: 400; font-style: normal;" class="moze-start">Якщо поділ на склади видався Вам некоректним -- напишіть правильний варіант вручну</p> <br><p></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="theme-color" content="#4f46e5"> <title>СкладоГра — Навчання читанню</title> <style> :root { --bg: #f8fafc; --card: #ffffff; --primary: #4f46e5; --accent: #f59e0b; --danger: #ef4444; --text: #1e293b; --radius: 20px; --shadow: 0 10px 25px rgba(0,0,0,0.08); --font-big: clamp(1.2rem, 4vw, 2rem); --font-medium: clamp(1rem, 3vw, 1.4rem); --button-size: clamp(64px, 18vw, 110px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(180deg, #eef2ff, #f8fafc); color: var(--text); overflow-x: hidden; } .app { max-width: 900px; margin: 0 auto; padding: 16px; } .card { background: white; border-radius: var(--radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow); } h1, h2 { text-align: center; } h1 { color: var(--primary); } .mom-controls { display: flex; flex-direction: column; gap: 12px; } input { width: 100%; padding: 16px; font-size: 1.2rem; border-radius: 14px; border: 2px solid #cbd5e1; } button { border: none; border-radius: 16px; padding: 14px; font-size: 1.1rem; font-weight: bold; cursor: pointer; min-height: 56px; } .primary-btn { background: var(--primary); color: white; } .accent-btn { background: var(--accent); color: white; } .danger-btn { background: var(--danger); color: white; } .syllables, .answer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } .tile, .slot { min-width: var(--button-size); min-height: var(--button-size); padding: 10px; border-radius: 18px; display: flex; justify-content: center; align-items: center; font-size: var(--font-medium); font-weight: bold; text-align: center; } .tile { background: #dbeafe; border: 3px solid #93c5fd; } .tile.used { opacity: 0.35; pointer-events: none; } .slot { background: #f1f5f9; border: 3px dashed #cbd5e1; } .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; } .status, .stars { text-align: center; margin-top: 14px; font-weight: bold; } .emoji { text-align: center; font-size: clamp(3rem, 12vw, 6rem); } .manual-syllables { margin-top: 10px; } .hint { font-size: 0.9rem; color: #475569; } </style> <div class="app"> <div class="card"> <h1>🎓 СкладоГра</h1> <div class="mom-controls"> <label><b>Введіть слово:</b></label> <input id="wordInput" type="text" placeholder="Наприклад: машина" fdprocessedid="mfgjqk"> <label><b>Склади (можна вручну):</b></label> <input id="manualSyllables" class="manual-syllables" type="text" placeholder="ма-ши-на" fdprocessedid="r3dibi"> <div class="hint">Наприклад: ма-ши-на</div> <button class="primary-btn" onclick="createGame()" fdprocessedid="y7ykhi">Створити гру</button> </div> </div> <div class="card"> <div class="emoji" id="emojiDisplay">🧩</div> <h2>Склади слово</h2> <div class="answer" id="answerArea"></div> <div class="syllables" id="syllableArea"></div> <div class="controls"> <button class="accent-btn" onclick="speakWord()" fdprocessedid="3m9yl9">🔊 Озвучити</button> <button class="danger-btn" onclick="resetAnswer()" fdprocessedid="h4kdf">🔄 Очистити</button> </div> <div class="status" id="status"></div> <div class="stars" id="stars"></div> </div> </div> <script> let targetWord = ""; let syllables = []; let selected = []; const emojiMap = { "мама": "👩", "тато": "👨", "кіт": "🐱", "собака": "🐶", "машина": "🚗", "яблуко": "🍎", "сонце": "☀️" }; // Поділ на склади function splitIntoSyllables(word) { const vowels = "аеєиіїоуюя"; let result = []; let current = ""; for (let i = 0; i < word.length; i++) { current += word[i]; if (vowels.includes(word[i].toLowerCase())) { let nextVowel = false; for (let j = i + 1; j < word.length; j++) { if (vowels.includes(word[j].toLowerCase())) { nextVowel = true; break; } } if (nextVowel) { result.push(current); current = ""; } } } if (current) result.push(current); return result.length ? result : [word]; } function shuffleArray(arr) { return [...arr].sort(() => Math.random() - 0.5); } function createGame() { targetWord = document.getElementById("wordInput").value.trim().toLowerCase(); if (!targetWord) return; const manual = document.getElementById("manualSyllables").value.trim(); if (manual) { syllables = manual.split("-").map(s => s.trim().toLowerCase()).filter(Boolean); } else { syllables = splitIntoSyllables(targetWord); document.getElementById("manualSyllables").value = syllables.join("-"); } selected = []; renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; document.getElementById("emojiDisplay").textContent = emojiMap[targetWord] || "🧩"; preloadVoices(); } function renderAnswerSlots() { const area = document.getElementById("answerArea"); area.innerHTML = ""; for (let i = 0; i < syllables.length; i++) { const slot = document.createElement("div"); slot.className = "slot"; slot.textContent = selected[i] || ""; area.appendChild(slot); } } function renderSyllables() { const area = document.getElementById("syllableArea"); area.innerHTML = ""; shuffleArray(syllables).forEach(syllable => { const btn = document.createElement("button"); btn.className = "tile"; btn.textContent = syllable; btn.onclick = () => { selected.push(syllable); btn.classList.add("used"); speakSyllable(syllable); renderAnswerSlots(); checkAnswer(); }; area.appendChild(btn); }); } function checkAnswer() { if (selected.length !== syllables.length) return; const formed = selected.join("").toLowerCase(); if (formed === targetWord) { document.getElementById("status").textContent = "🎉 Молодець!"; document.getElementById("stars").textContent = "⭐ ⭐ ⭐"; speakWord(); if (navigator.vibrate) { navigator.vibrate([150, 70, 150]); } } else { document.getElementById("status").textContent = "🙂 Спробуй ще раз"; } } function resetAnswer() { selected = []; renderAnswerSlots(); renderSyllables(); document.getElementById("status").textContent = ""; document.getElementById("stars").textContent = ""; } // ---------- УКРАЇНСЬКА ОЗВУЧКА ---------- function preloadVoices() { speechSynthesis.getVoices(); } function getBestUkrainianVoice() { const voices = speechSynthesis.getVoices(); return ( voices.find(v => v.lang === "uk-UA") || voices.find(v => v.lang.toLowerCase().startsWith("uk")) || voices.find(v => v.name.toLowerCase().includes("ukrain") || v.name.toLowerCase().includes("укра") ) || null ); } function normalizeUkrainianText(text) { return text.toLowerCase().trim(); } function spellBySyllables(text) { if (!syllables.length) return text.split("").join(" ... "); return syllables.join(" ... "); } function speakText(text, isWord = false) { speechSynthesis.cancel(); const voice = getBestUkrainianVoice(); let spokenText = normalizeUkrainianText(text); if (!voice || !voice.lang.toLowerCase().startsWith("uk")) { spokenText = isWord ? spellBySyllables(text) : text; } const utterance = new SpeechSynthesisUtterance(spokenText); if (voice) { utterance.voice = voice; utterance.lang = voice.lang; } else { utterance.lang = "uk-UA"; } utterance.rate = isWord ? 0.65 : 0.55; utterance.pitch = 1.0; utterance.volume = 1; speechSynthesis.speak(utterance); } function speakSyllable(syllable) { speakText(syllable, false); } function speakWord() { if (!targetWord) return; speakText(targetWord, true); } window.speechSynthesis.onvoiceschanged = () => { preloadVoices(); }; document.addEventListener("click", function initSpeech() { speechSynthesis.resume(); preloadVoices(); document.removeEventListener("click", initSpeech); }); </script> http://margo.mozello.shop/gry/params/post/5199027/2048-6-6 Fri, 23 Jan 2026 22:22:00 +0000 Темна тема<hr class="moze-more-divider"><p>4</p><p><br></p><meta charset="UTF-8"> <style> /* ===== ОБГОРТКА З ТЕМАМИ ===== */ .game-theme-wrapper { padding: 25px 20px; border-radius: 14px; font-family: sans-serif; text-align: center; transition: background-color .3s, color .3s; } /* Світла тема */ .game-theme-wrapper.light { background: #faf8ef; color: #333; } /* Темна ЗЕЛЕНА тема */ .game-theme-wrapper.dark { background: #0f1f1a; color: #e0f2ea; } /* Кнопка теми */ .theme-toggle { display: inline-block; margin-bottom: 15px; padding: 8px 16px; background: #2d6a4f; color: #fff; border-radius: 20px; cursor: pointer; font-size: 14px; } .theme-toggle:hover { background: #40916c; } /* Заголовки */ .game-theme-wrapper.dark h1, .game-theme-wrapper.dark .info { color: #b7e4c7; } /* Кнопка нової гри */ #restart { margin: 10px 0; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; } /* ===== ДОШКА ГРИ ===== */ #game-board { display: grid; grid-template-columns: repeat(6, 80px); gap: 8px; justify-content: center; margin: 20px auto; padding: 10px; border-radius: 10px; } /* Темна тема — фон дошки */ .game-theme-wrapper.dark #game-board { background: #1b3a2f; } /* Клітинки */ .tile { width: 110px; height: 40px; background: #cdc1b4; font-size: 24px; color: #776e65; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 5px; } /* Кольори плиток */ .tile[data-value="2"] { background: #eee4da; } .tile[data-value="4"] { background: #ede0c8; } .tile[data-value="8"] { background: #f2b179; color: #fff; } .tile[data-value="16"] { background: #f59563; color: #fff; } .tile[data-value="32"] { background: #f67c5f; color: #fff; } .tile[data-value="64"] { background: #f65e3b; color: #fff; } .tile[data-value="128"] { background: #edcf72; color: #fff; } .tile[data-value="256"] { background: #edcc61; color: #fff; } .tile[data-value="512"] { background: #edc850; color: #fff; } .tile[data-value="1024"] { background: #edc53f; color: #fff; } .tile[data-value="2048"] { background: #edc22e; color: #fff; } /* Повідомлення */ #message { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #ffffffee; padding: 25px; border-radius: 10px; display: none; z-index: 10; } </style> <div class="game-theme-wrapper light" id="gameTheme"> <div class="theme-toggle" id="themeToggle">🌙 Темна тема</div> <h1>2048 (6×6)</h1> <div class="info" id="score">Очки: 0</div> <div class="info" id="best">Рекорд: 0</div> <button id="restart" fdprocessedid="3y1n4">Нова гра</button> <div id="game-board"></div> <div id="message"> <div id="message-text"></div> <button id="continue">Продовжити</button> </div> </div> <script> /* ===== ПЕРЕМИКАЧ ТЕМИ ===== */ (function () { const w = document.getElementById("gameTheme"); const t = document.getElementById("themeToggle"); const saved = localStorage.getItem("theme2048"); if (saved === "dark") { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; } t.onclick = () => { if (w.classList.contains("dark")) { w.classList.replace("dark", "light"); t.textContent = "🌙 Темна тема"; localStorage.setItem("theme2048", "light"); } else { w.classList.replace("light", "dark"); t.textContent = "☀️ Світла тема"; localStorage.setItem("theme2048", "dark"); } }; })(); </script> <script> /* ===== ГРА 2048 (6x6) ===== */ const board = document.getElementById('game-board'), scoreD = document.getElementById('score'), bestD = document.getElementById('best'), msg = document.getElementById('message'), msgT = document.getElementById('message-text'), cont = document.getElementById('continue'); const SIZE = 6; let values = [], tiles = [], score = 0, best = 0; let gameOver = false, allow = false; best = +localStorage.getItem('best2048_6x6') || 0; bestD.textContent = 'Рекорд: ' + best; function save() { localStorage.setItem('g2048v', JSON.stringify(values)); localStorage.setItem('g2048s', score); } function add() { const e = values.map((v, i) => v ? null : i).filter(v => v !== null); if (e.length) values[e[Math.random() * e.length | 0]] = Math.random() < .9 ? 2 : 4; } function draw() { tiles.forEach((t, i) => { t.textContent = values[i] || ''; t.dataset.value = values[i]; }); scoreD.textContent = 'Очки: ' + score; if (score > best) { best = score; bestD.textContent = 'Рекорд: ' + best; localStorage.setItem('best2048_6x6', best); } save(); } function slide(r) { r = r.filter(v => v); for (let i = 0; i < r.length - 1; i++) { if (r[i] === r[i + 1]) { r[i] *= 2; score += r[i]; r[i + 1] = 0; } } r = r.filter(v => v); while (r.length < SIZE) r.push(0); return r; } function move(d) { if (gameOver) return; let moved = false; for (let i = 0; i < SIZE; i++) { let line = []; for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; line.push(values[x]); } let newLine = slide(line); for (let j = 0; j < SIZE; j++) { let x = d === 'l' ? i * SIZE + j : d === 'r' ? i * SIZE + (SIZE - 1 - j) : d === 'u' ? j * SIZE + i : (SIZE - 1 - j) * SIZE + i; if (values[x] !== newLine[j]) { values[x] = newLine[j]; moved = true; } } } if (moved) { add(); draw(); check(); } } function check() { if (!allow && values.includes(2048)) { msgT.textContent = 'Ви виграли 🎉'; msg.style.display = 'block'; gameOver = true; } else if (!values.includes(0)) { msgT.textContent = 'Гру завершено'; msg.style.display = 'block'; gameOver = true; } } function init() { board.innerHTML = ''; tiles = []; values = JSON.parse(localStorage.getItem('g2048v')) || Array(36).fill(0); score = +localStorage.getItem('g2048s') || 0; for (let i = 0; i < 36; i++) { let d = document.createElement('div'); d.className = 'tile'; board.appendChild(d); tiles.push(d); } if (!values.some(v => v)) { add(); add(); } draw(); } /* ⬇️ ВИПРАВЛЕННЯ: сторінка більше НЕ скролиться */ document.addEventListener('keydown', function (e) { const keys = { ArrowLeft: 'l', ArrowRight: 'r', ArrowUp: 'u', ArrowDown: 'd' }; if (keys[e.key]) { e.preventDefault(); move(keys[e.key]); } }); document.getElementById('restart').onclick = () => { values = Array(36).fill(0); score = 0; gameOver = false; allow = false; add(); add(); msg.style.display = 'none'; draw(); }; cont.onclick = () => { gameOver = false; allow = true; msg.style.display = 'none'; }; init(); </script> http://margo.mozello.shop/gry/params/post/5144256/revers Sat, 04 Oct 2025 19:55:00 +0000 <img src="https://site-2669532.mozfiles.com/files/2669532/medium/gra_revers.jpg" style="width: 189px;">У світі настільних ігор є одна, яка поєднує простоту правил і глибину стратегії — це Реверсі. Вона не потребує складного обладнання, але здатна захопити на години. У цій бесіді ми розглянемо, чому Реверсі варта вашої уваги, як у неї грати, і що вона дає гравцеві. <hr class="moze-more-divider"><p>1</p><p><br></p><p><br></p> <meta charset="UTF-8"> <title>Реверсі: Гравець vs Комп'ютер</title> <style> canvas { background: #0a0; display: block; margin: 20px auto; } body { text-align: center; font-family: sans-serif; } details { margin: 20px auto; width: 80%; text-align: left; } summary { font-weight: bold; cursor: pointer; } </style> <h1>Гра Реверсі</h1> <canvas id="board" width="320" height="320"></canvas> <p>Поточний гравець: <span id="player">Гравець (Чорний)</span></p> <details> <summary>📘 Правила гри та інструкція</summary> <p><b>Мета гри:</b> захопити більше клітинок, ніж суперник, перетворюючи його фішки на свої.</p> <p><b>Початок:</b> гра починається з 4 фішками в центрі дошки. Гравець — чорний, комп’ютер — білий.</p> <p><b>Хід:</b> фішка ставиться так, щоб між новою фішкою і вже наявною була хоча б одна фішка суперника. Всі такі фішки перевертаються.</p> <p><b>Коли немає ходів:</b> якщо гравець не має допустимих ходів — хід переходить супернику.</p> <p><b>Завершення гри:</b> коли дошка заповнена або жоден гравець не має ходів. Перемагає той, у кого більше фішок.</p> </details> <script> const canvas = document.getElementById("board"); const ctx = canvas.getContext("2d"); const size = 8; const cell = canvas.width / size; let board = Array(size).fill().map(() => Array(size).fill(null)); board[3][3] = board[4][4] = "W"; board[3][4] = board[4][3] = "B"; let current = "B"; function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { ctx.strokeRect(x * cell, y * cell, cell, cell); if (board[x][y]) { ctx.beginPath(); ctx.arc(x * cell + cell / 2, y * cell + cell / 2, cell / 2 - 4, 0, Math.PI * 2); ctx.fillStyle = board[x][y] === "B" ? "black" : "white"; ctx.fill(); } } } } function isValid(x, y, player) { if (board[x][y]) return false; const opp = player === "B" ? "W" : "B"; const dirs = [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]]; for (let [dx, dy] of dirs) { let nx = x + dx, ny = y + dy, found = false; while (nx >= 0 && ny >= 0 && nx < size && ny < size) { if (board[nx][ny] === opp) found = true; else if (board[nx][ny] === player && found) return true; else break; nx += dx; ny += dy; } } return false; } function flip(x, y, player) { board[x][y] = player; const opp = player === "B" ? "W" : "B"; const dirs = [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]]; for (let [dx, dy] of dirs) { let nx = x + dx, ny = y + dy, path = []; while (nx >= 0 && ny >= 0 && nx < size && ny < size) { if (board[nx][ny] === opp) path.push([nx, ny]); else if (board[nx][ny] === player) { for (let [px, py] of path) board[px][py] = player; break; } else break; nx += dx; ny += dy; } } } function getValidMoves(player) { let moves = []; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { if (isValid(x, y, player)) moves.push([x, y]); } } return moves; } function countDiscs() { let black = 0, white = 0; for (let row of board) { for (let cell of row) { if (cell === "B") black++; if (cell === "W") white++; } } return { black, white }; } function checkEndGame() { const movesB = getValidMoves("B"); const movesW = getValidMoves("W"); const full = board.flat().every(cell => cell !== null); if ((movesB.length === 0 && movesW.length === 0) || full) { const { black, white } = countDiscs(); let result = ""; if (black > white) result = "Ви перемогли!"; else if (white > black) result = "Комп’ютер переміг!"; else result = "Нічия!"; alert(`${result}\nЧорних: ${black}\nБілих: ${white}`); } } function checkTurn() { let moves = getValidMoves(current); if (moves.length === 0) { alert("Ходів немає. Хід переходить супернику."); current = current === "B" ? "W" : "B"; document.getElementById("player").textContent = current === "B" ? "Гравець (Чорний)" : "Комп'ютер (Білий)"; drawBoard(); if (current === "W") { setTimeout(computerMove, 500); } } } function computerMove() { let moves = getValidMoves("W"); if (moves.length > 0) { let [x, y] = moves[0]; flip(x, y, "W"); current = "B"; document.getElementById("player").textContent = "Гравець (Чорний)"; drawBoard(); checkEndGame(); checkTurn(); } else { alert("Комп'ютер не має ходів. Хід переходить гравцю."); current = "B"; document.getElementById("player").textContent = "Гравець (Чорний)"; drawBoard(); checkEndGame(); checkTurn(); } } canvas.addEventListener("click", e => { if (current !== "B") return; const x = Math.floor(e.offsetX / cell); const y = Math.floor(e.offsetY / cell); if (isValid(x, y, "B")) { flip(x, y, "B"); current = "W"; document.getElementById("player").textContent = "Комп'ютер (Білий)"; drawBoard(); checkEndGame(); setTimeout(computerMove, 500); } else { checkTurn(); } }); drawBoard(); </script> http://margo.mozello.shop/gry/params/post/5141570/mozaka-majstrv-7 Thu, 02 Oct 2025 14:15:00 +0000 <span style="text-align: start; font-weight: 400; font-style: normal">Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу<br>на телефоні поворот блоку інший. Гра поводитися трохи дивно і треба призвичаїтись., але кмітлива дитина розбереться<br></span> <hr class="moze-more-divider"><p>2 жовтня 2025</p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #8A2BE2; /* Фіолетовий фон сторінки */ font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #98FF98; /* Салатовий фон гри */ max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="rcbg5m">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші або довге натискання (300мс).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Двохпальцевий тап.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('active')); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } const shapes = { single: [[1]], l: [[1, 1], [1, 0]], t: [[1, 1, 1], [0, 1, 0]], i4: [[1, 1, 1, 1]], square: [[1, 1], [1, 1]], z: [[1, 1, 0], [0, 1, 1]], i5: [[1, 1, 1, 1, 1]], i3: [[1, 1, 1]], i2: [[1, 1]], diagonal2: [[1, 0], [0, 1]], diagonal3: [[1, 0, 0], [0, 1, 0], [0, 0, 1]] }; const colors = ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#00CED1', '#0000FF', '#800080']; // Веселка: червоний, оранжевий, жовтий, зелений, блакитний, синій, фіолетовий const cellSize = 30; const gridSize = 10; let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let currentBlocks = []; let selectedBlock = null; let score = 0; let highScore = localStorage.getItem('blockLegendHighScore') || 0; let gameActive = true; let gamePaused = false; let lastMove = null; const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); highScoreElement.textContent = `Рекорд: ${highScore}`; function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#ddd'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? 'rgba(0, 255, 0, 0.5)' : 'rgba(255, 0, 0, 0.5)'; ctx.fillRect((x + sx) * cellSize, (y + sy) * cellSize, cellSize, cellSize); } } } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { if (x + sx < 0 || x + sx >= gridSize || y + sy < 0 || y + sy >= gridSize || grid[y + sy][x + sx]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } drawGrid(); checkLines(); } function rotateShape(shape) { return shape[0].map((_, col) => shape.map(row => row[col]).reverse()); } function flipShape(shape) { return shape.map(row => row.reverse()); } function generateBlock() { const shapeKeys = Object.keys(shapes); const randomShapeKey = shapeKeys[Math.floor(Math.random() * shapeKeys.length)]; const shape = shapes[randomShapeKey]; const color = colors[Math.floor(Math.random() * colors.length)]; return { shape, color }; } function generateBlocks() { while (currentBlocks.length < 3) { currentBlocks.push(generateBlock()); } for (let i = 0; i < 3; i++) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } function drawBlock(index, shape, color) { const blockCanvas = document.getElementById(`block${index + 1}`); const bctx = blockCanvas.getContext('2d'); bctx.clearRect(0, 0, blockCanvas.width, blockCanvas.height); const blockSize = 20; const offsetX = (blockCanvas.width - shape[0].length * blockSize) / 2; const offsetY = (blockCanvas.height - shape.length * blockSize) / 2; const gradient = bctx.createLinearGradient(0, 0, 0, blockSize * shape.length); gradient.addColorStop(0, color); gradient.addColorStop(1, lightenColor(color, 0.3)); // Світлий градієнт для огранки for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { bctx.fillStyle = gradient; bctx.fillRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); bctx.strokeStyle = lightenColor(color, 0.6); // Світлий контур bctx.lineWidth = 2; bctx.strokeRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); } } } } // Функція для освітлення кольору function lightenColor(color, percent) { const num = parseInt(color.replace("#", ""), 16); const r = Math.min(255, Math.floor((num >> 16) * (1 + percent))); const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) * (1 + percent))); const b = Math.min(255, Math.floor((num & 0x0000FF) * (1 + percent))); return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`; } function drawShapePreview(id, shape, color) { const canvas = document.getElementById(id); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const blockSize = 15; const offsetX = (canvas.width - shape[0].length * blockSize) / 2; const offsetY = (canvas.height - shape.length * blockSize) / 2; const gradient = ctx.createLinearGradient(0, 0, 0, blockSize * shape.length); gradient.addColorStop(0, color); gradient.addColorStop(1, lightenColor(color, 0.3)); for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = gradient; ctx.fillRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); ctx.strokeStyle = lightenColor(color, 0.6); ctx.lineWidth = 1; ctx.strokeRect(offsetX + sx * blockSize, offsetY + sy * blockSize, blockSize, blockSize); } } } } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => { bonusMessageElement.style.display = 'none'; }, 2000); } function checkLines() { let linesCleared = 0; for (let i = 0; i < gridSize; i++) { if (grid[i].every(cell => cell)) { grid[i] = Array(gridSize).fill(null); linesCleared++; } let colFull = true; for (let j = 0; j < gridSize; j++) { if (!grid[j][i]) { colFull = false; break; } } if (colFull) { for (let j = 0; j < gridSize; j++) { grid[j][i] = null; } linesCleared++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; } } drawGrid(); checkGameOver(); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); let touchStartX = 0; let touchStartY = 0; const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); // Record initial touch position for movement tolerance const touch = e.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; // Two-finger tap detection for flipping if (e.touches.length === 2) { const touch1 = e.touches[0]; const touch2 = e.touches[1]; const moveTolerance = 10; // Pixels of movement allowed const dx1 = Math.abs(touch1.clientX - touchStartX); const dy1 = Math.abs(touch1.clientY - touchStartY); const dx2 = Math.abs(touch2.clientX - touchStartX); const dy2 = Math.abs(touch2.clientY - touchStartY); if (dx1 < moveTolerance && dy1 < moveTolerance && dx2 < moveTolerance && dy2 < moveTolerance) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (двохпальцевий тап):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); e.preventDefault(); // Prevent default behavior (e.g., zoom) } return; // Exit early to avoid long-press interference } // Long-press detection for rotation let touchStartTime = Date.now(); const touchHoldTimeout = setTimeout(() => { if (Date.now() - touchStartTime >= 300 && e.touches.length === 1) { // Reduced to 300ms currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто (довге натискання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }, 300); // Cancel timeout on touchend or touchmove const touchEndOrMove = (event) => { const currentTouch = event.touches[0] || event.changedTouches[0]; const dx = Math.abs(currentTouch.clientX - touchStartX); const dy = Math.abs(currentTouch.clientY - touchStartY); if (dx > 10 || dy > 10) { // Cancel if significant movement clearTimeout(touchHoldTimeout); } }; canvas.addEventListener('touchend', touchEndOrMove, { once: true }); canvas.addEventListener('touchmove', touchEndOrMove, { once: true }); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } drawGrid(); }); // Ініціалізація попередніх зображень блоків drawShapePreview('shapeSingle', shapes.single, colors[0]); drawShapePreview('shapeL', shapes.l, colors[1]); drawShapePreview('shapeT', shapes.t, colors[2]); drawShapePreview('shapeI4', shapes.i4, colors[3]); drawShapePreview('shapeSquare', shapes.square, colors[4]); drawShapePreview('shapeZ', shapes.z, colors[5]); drawShapePreview('shapeI5', shapes.i5, colors[0]); drawShapePreview('shapeI3', shapes.i3, colors[1]); drawShapePreview('shapeI2', shapes.i2, colors[2]); drawShapePreview('shapeDiagonal2', shapes.diagonal2, colors[3]); drawShapePreview('shapeDiagonal3', shapes.diagonal3, colors[4]); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5141394/mm6 Thu, 02 Oct 2025 10:30:00 +0000 рррррррррррррррррррррр<hr class="moze-more-divider"><p>6</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="62619d">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші або довге натискання (300мс).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Двохпальцевий тап.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[10], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[11], colors[11]); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const shape = blockShapes[shapeIndex]; const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: shape, color: colors[colorIndex] }); drawBlock(i, shape, colors[colorIndex]); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - (shape[0].length * blockCellSize)) / 2; const offsetY = (canvas.height - (shape.length * blockCellSize)) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const rotated = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { rotated[x][rows - 1 - y] = shape[y][x]; } } return rotated; } function flipShape(shape) { return shape.map(row => [...row].reverse()); } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); let touchStartX = 0; let touchStartY = 0; const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); // Record initial touch position for movement tolerance const touch = e.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; // Two-finger tap detection for flipping if (e.touches.length === 2) { const touch1 = e.touches[0]; const touch2 = e.touches[1]; const moveTolerance = 10; // Pixels of movement allowed const dx1 = Math.abs(touch1.clientX - touchStartX); const dy1 = Math.abs(touch1.clientY - touchStartY); const dx2 = Math.abs(touch2.clientX - touchStartX); const dy2 = Math.abs(touch2.clientY - touchStartY); if (dx1 < moveTolerance && dy1 < moveTolerance && dx2 < moveTolerance && dy2 < moveTolerance) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (двохпальцевий тап):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); e.preventDefault(); // Prevent default behavior (e.g., zoom) } return; // Exit early to avoid long-press interference } // Long-press detection for rotation let touchStartTime = Date.now(); const touchHoldTimeout = setTimeout(() => { if (Date.now() - touchStartTime >= 300 && e.touches.length === 1) { // Reduced to 300ms currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто (довге натискання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }, 300); // Cancel timeout on touchend or touchmove const touchEndOrMove = (event) => { const currentTouch = event.touches[0] || event.changedTouches[0]; const dx = Math.abs(currentTouch.clientX - touchStartX); const dy = Math.abs(currentTouch.clientY - touchStartY); if (dx > 10 || dy > 10) { // Cancel if significant movement clearTimeout(touchHoldTimeout); } }; canvas.addEventListener('touchend', touchEndOrMove, { once: true }); canvas.addEventListener('touchmove', touchEndOrMove, { once: true }); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5141333/mozaka-majstrv Thu, 02 Oct 2025 09:25:00 +0000 ооооооооооооооооооооооооо<hr class="moze-more-divider"><p>15</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #mainGameContainer { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-top: 20px; } #gridContainer { display: flex; flex-direction: column; align-items: center; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; } #nextBlocks { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; flex-wrap: nowrap; width: auto; max-width: 100px; gap: 10px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 0; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9</h2> <p>Права кнопка миші — поворот блоку, Середня кнопка/подвійне торкання — перевертання, Кнопка "Скасувати" — скасування ходу</p> <div id="mainGameContainer" style="display: flex; align-items: flex-start; justify-content: center; gap: 20px;"> <div id="gridContainer"> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> </div> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> </div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються справа для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Права кнопка миші (90°).</li> <li><b>Перевертання</b>: <ul> <li>ПК: Середня кнопка миші або подвійне клацання.</li> <li>Сенсорні пристрої: Подвійне торкання.</li> </ul> </li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний (1x1) [[1]], // Одинарний (збільшена ймовірність) [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[2], colors[1]); drawTableBlock('shapeT', blockShapes[3], colors[2]); drawTableBlock('shapeI4', blockShapes[4], colors[3]); drawTableBlock('shapeSquare', blockShapes[5], colors[4]); drawTableBlock('shapeZ', blockShapes[6], colors[0]); drawTableBlock('shapeI5', blockShapes[7], colors[5]); drawTableBlock('shapeI3', blockShapes[8], colors[6]); drawTableBlock('shapeI2', blockShapes[9], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[10], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[11], colors[11]); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const shape = blockShapes[shapeIndex]; const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: shape, color: colors[colorIndex] }); drawBlock(i, shape, colors[colorIndex]); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - (shape[0].length * blockCellSize)) / 2; const offsetY = (canvas.height - (shape.length * blockCellSize)) / 2; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } function rotateShape(shape) { const rows = shape.length; const cols = shape[0].length; const rotated = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { rotated[x][rows - 1 - y] = shape[y][x]; } } return rotated; } function flipShape(shape) { return shape.map(row => [...row].reverse()); } function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function undoMove() { if (!lastMove || !gameActive || gamePaused) return; grid = lastMove.grid.map(row => [...row]); score = lastMove.score; currentBlocks.splice(lastMove.blockIndex, 0, lastMove.block); scoreElement.textContent = `Очки: ${score}`; undoButton.disabled = true; lastMove = null; for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } drawGrid(); console.log('Хід скасовано. Поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = rotateShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('dblclick', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (подвійне клацання):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; if (index >= 0 && index < currentBlocks.length) { selectedBlock = currentBlocks[index]; canvas.classList.add('dragging'); console.log('Початок сенсорного перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); } else { console.error('Помилка: невалідний індекс блоку на touchstart', index); } }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.touches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); const index = parseInt(canvas.id.replace('block', '')) - 1; console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на touchend', index); } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script> http://margo.mozello.shop/gry/params/post/5140019/mm3 Tue, 30 Sep 2025 14:12:00 +0000 оооооооооооооооооооооооооооо<hr class="moze-more-divider"><p>3</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мозаїка Майстрів — Версія 1.9 (Виправлена)</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 10px; background-color: #f0f0f0; font-family: Arial, sans-serif; overflow: auto; } #gameCanvas { border: 2px solid #333; background-color: #e3f1c6; max-width: 100%; height: auto; margin-top: 20px; } #nextBlocks { display: flex; justify-content: center; margin-top: 10px; flex-wrap: wrap; width: 100%; max-width: 260px; gap: 1px; } .blockCanvas { border: 1px solid #ccc; cursor: grab; width: 80px; height: 80px; margin: 2px; } .blockCanvas.dragging { opacity: 0.5; cursor: grabbing; } #score, #highScore { font-size: 20px; margin-top: 10px; } #bonusMessage { display: none; position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 128, 0, 0.8); color: white; padding: 10px 20px; border-radius: 5px; z-index: 1000; font-size: 18px; } #gameOver, #pauseOverlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border-radius: 10px; text-align: center; z-index: 1000; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } #rotateButtons { margin-top: 10px; display: flex; gap: 5px; } h2 { margin: 10px 0; } p { margin: 5px 0; } .accordion { width: 100%; max-width: 500px; margin-top: 20px; } .accordion-item { border: 1px solid #333; margin-bottom: 5px; border-radius: 5px; } .accordion-header { background-color: #ddd; padding: 10px; cursor: pointer; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 14px; } .accordion-header.active::after { content: '▲'; } .accordion-content { display: none; padding: 10px; background-color: #fff; } .accordion-content.active { display: block; } .accordion-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; } .accordion-content th, .accordion-content td { border: 1px solid #333; padding: 8px; text-align: center; } .accordion-content th { background-color: #ddd; } .accordion-content pre { margin: 0; font-size: 12px; } .accordion-content canvas { border: 1px solid #ccc; } </style> <h2>Мозаїка Майстрів — Версія 1.9 (Виправлена)</h2> <p>Права кнопка миші — поворот блоку на 90°, Жест двома пальцями — поворот на кут, Кнопка "Скасувати" — скасування ходу</p> <canvas id="gameCanvas" width="300" height="300"></canvas> <button id="pauseButton" fdprocessedid="imgj4r">Пауза</button> <button id="undoButton" disabled="">Скасувати</button> <div id="nextBlocks"> <canvas id="block1" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block2" class="blockCanvas" width="80" height="80" draggable="true"></canvas> <canvas id="block3" class="blockCanvas" width="80" height="80" draggable="true"></canvas> </div> <div id="score">Очки: 0</div> <div id="highScore">Рекорд: 0</div> <div id="bonusMessage"></div> <div id="gameOver"> <h2>Гра закінчена!</h2> <p id="finalScore"></p> <button onclick="restartGame()">Грати знову</button> </div> <div id="pauseOverlay"> <h2>Гра на паузі</h2> <button onclick="togglePause()">Відновити</button> </div> <div id="rotateButtons"> <button onclick="rotateSelectedBlock(90)">90°</button> <button onclick="rotateSelectedBlock(180)">180°</button> <button onclick="rotateSelectedBlock(270)">270°</button> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Таблиця блоків</div> <div class="accordion-content"> <table> <thead> <tr> <th>Назва</th> <th>Зображення</th> <th>Структура</th> <th>Використання</th> </tr> </thead> <tbody> <tr> <td>Одинарний</td> <td><canvas id="shapeSingle" width="60" height="60"></canvas></td> <td><pre>[[1]]</pre></td> <td>Для заповнення окремих клітинок</td> </tr> <tr> <td>L-форма</td> <td><canvas id="shapeL" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 0]]</pre></td> <td>Для кутів або вузьких просторів</td> </tr> <tr> <td>T-форма</td> <td><canvas id="shapeT" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1],<br>[0, 1, 0]]</pre></td> <td>Для горизонтальних ліній з виступом</td> </tr> <tr> <td>I-форма (4)</td> <td><canvas id="shapeI4" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1]]</pre></td> <td>Для заповнення рядків/стовпців</td> </tr> <tr> <td>Квадрат</td> <td><canvas id="shapeSquare" width="60" height="60"></canvas></td> <td><pre>[[1, 1],<br>[1, 1]]</pre></td> <td>Для компактних квадратних просторів</td> </tr> <tr> <td>Z-форма</td> <td><canvas id="shapeZ" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 0],<br>[0, 1, 1]]</pre></td> <td>Для зміщених "змійок"</td> </tr> <tr> <td>I-форма (5)</td> <td><canvas id="shapeI5" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1, 1, 1]]</pre></td> <td>Для довгих рядків/стовпців</td> </tr> <tr> <td>I-форма (3)</td> <td><canvas id="shapeI3" width="60" height="60"></canvas></td> <td><pre>[[1, 1, 1]]</pre></td> <td>Для середніх рядків/стовпців</td> </tr> <tr> <td>I-форма (2)</td> <td><canvas id="shapeI2" width="60" height="60"></canvas></td> <td><pre>[[1, 1]]</pre></td> <td>Для коротких рядків/стовпців</td> </tr> <tr> <td>Діагональ 2x2</td> <td><canvas id="shapeDiagonal2" width="60" height="60"></canvas></td> <td><pre>[[1, 0],<br>[0, 1]]</pre></td> <td>Для заповнення діагональних просторів</td> </tr> <tr> <td>Діагональ 3x3</td> <td><canvas id="shapeDiagonal3" width="60" height="60"></canvas></td> <td><pre>[[1, 0, 0],<br>[0, 1, 0],<br>[0, 0, 1]]</pre></td> <td>Для довгих діагональних ліній</td> </tr> </tbody> </table> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(this)">Інструкція</div> <div class="accordion-content"> <h3>Мета гри</h3> <p>"Мозаїка Майстрів" — це головоломка, де гравець розміщує блоки на сітці 10x10, щоб очищати цілі рядки або стовпці. Мета — набрати якомога більше очок і встановити рекорд. Гра закінчується, коли жоден блок не можна розмістити.</p> <h3>Правила гри</h3> <ul> <li><b>Ігрове поле</b>: Сітка 10x10, де клітинки можуть бути порожніми або заповненими.</li> <li><b>Черга блоків</b>: До трьох блоків відображаються знизу для розміщення.</li> <li><b>Розміщення</b>: Перетягуйте блоки на сітку. Розміщення можливе лише у вільних місцях.</li> <li><b>Очищення ліній</b>: <ul> <li>Повний рядок або стовпець очищається.</li> <li>1 лінія: 100 очок.</li> <li>2+ ліній: 100 + 50 за кожну додаткову (наприклад, 2 лінії = 150 очок).</li> </ul> </li> <li><b>Бонус за очищення поля</b>: 25% від суми очок, якщо поле порожнє.</li> <li><b>Рекорд</b>: Зберігається у браузері, відображається під час гри та після завершення.</li> <li><b>Кінець гри</b>: Гра закінчується, якщо блоки неможливо розмістити.</li> </ul> <h3>Дії гравця</h3> <ul> <li><b>Перетягування</b>: <ul> <li>ПК: Лівою кнопкою миші.</li> <li>Сенсорні пристрої: Торкніться та перетягніть.</li> </ul> </li> <li><b>Поворот</b>: Кнопки 90°/180°/270° або жест двома пальцями.</li> <li><b>Скасування ходу</b>: Кнопка "Скасувати" для останнього ходу.</li> <li><b>Пауза</b>: Кнопка "Пауза"/"Відновити".</li> <li><b>Перезапуск</b>: Кнопка "Грати знову" на екрані "Гра закінчена".</li> </ul> <h3>Поради</h3> <ul> <li>Плануйте ходи, щоб створювати повні лінії.</li> <li>Використовуйте одинарний блок для прогалин.</li> <li>Скасовуйте невдалі ходи.</li> <li>Намагайтеся очищати кілька ліній для бонусів.</li> <li>Експериментуйте з діагональними блоками для унікальних комбінацій.</li> </ul> </div> </div> </div> <script> // Акордеон-меню function toggleAccordion(header) { const content = header.nextElementSibling; const isActive = content.classList.contains('active'); document.querySelectorAll('.accordion-content').forEach(item => { item.classList.remove('active'); item.previousElementSibling.classList.remove('active'); }); if (!isActive) { content.classList.add('active'); header.classList.add('active'); } } // Ігрова логіка const gameCanvas = document.getElementById('gameCanvas'); const ctx = gameCanvas.getContext('2d'); const gridSize = 10; const cellSize = gameCanvas.width / gridSize; // 30px const scoreElement = document.getElementById('score'); const highScoreElement = document.getElementById('highScore'); const bonusMessageElement = document.getElementById('bonusMessage'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const pauseButton = document.getElementById('pauseButton'); const undoButton = document.getElementById('undoButton'); const pauseOverlay = document.getElementById('pauseOverlay'); let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); let score = 0; let highScore = parseInt(localStorage.getItem('blockLegendHighScore')) || 0; let currentBlocks = []; let selectedBlock = null; let selectedBlockIndex = -1; let gameActive = true; let gamePaused = false; let lastMove = null; highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Завантажено рекорд:', highScore); const blockShapes = [ [[1]], // Одинарний [[1, 1], [1, 0]], // L-форма [[1, 1, 1], [0, 1, 0]], // T-форма [[1, 1, 1, 1]], // I-форма (4) [[1, 1], [1, 1]], // Квадрат [[1, 1, 0], [0, 1, 1]], // Z-форма [[1, 1, 1, 1, 1]], // I-форма (5) [[1, 1, 1]], // I-форма (3) [[1, 1]], // I-форма (2) [[1, 0], [0, 1]], // Діагональ 2x2 [[1, 0, 0], [0, 1, 0], [0, 0, 1]] // Діагональ 3x3 ]; const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#FFA500', '#800080', '#00FFFF', '#FF4500', '#2E8B57', '#DAA520', '#8A2BE2']; // Малювання блоків у таблиці function drawTableBlock(canvasId, shape, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; shape.forEach((row, y) => { row.forEach((cell, x) => { if (cell) { ctx.fillStyle = color; ctx.fillRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect(x * blockCellSize + 2, y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } }); }); } // Ініціалізація малюнків у таблиці drawTableBlock('shapeSingle', blockShapes[0], colors[0]); drawTableBlock('shapeL', blockShapes[1], colors[1]); drawTableBlock('shapeT', blockShapes[2], colors[2]); drawTableBlock('shapeI4', blockShapes[3], colors[3]); drawTableBlock('shapeSquare', blockShapes[4], colors[4]); drawTableBlock('shapeZ', blockShapes[5], colors[0]); drawTableBlock('shapeI5', blockShapes[6], colors[5]); drawTableBlock('shapeI3', blockShapes[7], colors[6]); drawTableBlock('shapeI2', blockShapes[8], colors[1]); drawTableBlock('shapeDiagonal2', blockShapes[9], colors[10]); drawTableBlock('shapeDiagonal3', blockShapes[10], colors[11]); function showBonusMessage(message) { bonusMessageElement.textContent = message; bonusMessageElement.style.display = 'block'; setTimeout(() => bonusMessageElement.style.display = 'none', 2000); } function drawGrid() { ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.strokeStyle = '#000'; ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize); if (grid[y][x]) { ctx.fillStyle = grid[y][x]; ctx.fillRect(x * cellSize + 2, y * cellSize + 2, cellSize - 4, cellSize - 4); } } } } function drawPreview(shape, x, y, valid) { drawGrid(); if (shape && x >= 0 && y >= 0) { ctx.globalAlpha = 0.5; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { ctx.fillStyle = valid ? selectedBlock.color : '#FF0000'; ctx.fillRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); ctx.strokeStyle = '#000'; ctx.strokeRect((x + sx) * cellSize + 2, (y + sy) * cellSize + 2, cellSize - 4, cellSize - 4); } } } ctx.globalAlpha = 1.0; } } function canPlaceBlock(shape, x, y) { for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { const gridX = x + sx; const gridY = y + sy; if (gridX < 0 || gridX >= gridSize || gridY < 0 || gridY >= gridSize || grid[gridY][gridX]) { return false; } } } } return true; } function placeBlock(shape, color, x, y, blockIndex) { console.log(`Розміщення блоку на позиції (${x}, ${y}), індекс: ${blockIndex}, форма:`, JSON.stringify(shape)); lastMove = { grid: grid.map(row => [...row]), score, block: { shape, color }, blockIndex }; undoButton.disabled = false; for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[sy].length; sx++) { if (shape[sy][sx]) { grid[y + sy][x + sx] = color; } } } console.log('Блок розміщено, викликаємо checkLines'); checkLines(); console.log('checkLines завершено, викликаємо checkGameOver'); checkGameOver(); drawGrid(); console.log('Розміщення завершено, поточна черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); } function checkLines() { let linesCleared = 0; for (let y = gridSize - 1; y >= 0; y--) { if (grid[y].every(cell => cell)) { grid.splice(y, 1); grid.unshift(Array(gridSize).fill(null)); linesCleared++; y++; } } for (let x = gridSize - 1; x >= 0; x--) { let isFull = true; for (let y = 0; y < gridSize; y++) { if (!grid[y][x]) { isFull = false; break; } } if (isFull) { for (let y = 0; y < gridSize; y++) { grid[y].splice(x, 1); grid[y].push(null); } linesCleared++; x++; } } if (linesCleared > 0) { let lineBonus = linesCleared === 1 ? 100 : 100 + (linesCleared - 1) * 50; score += lineBonus; if (linesCleared > 1) { showBonusMessage(`Бонус за ${linesCleared} лінії: +${lineBonus} очок`); console.log(`Бонус за очищення ${linesCleared} ліній: +${lineBonus} очок`); } const isGridEmpty = grid.every(row => row.every(cell => !cell)); if (isGridEmpty && score > 0) { const clearBonus = Math.floor(score * 0.25); score += clearBonus; showBonusMessage(`Бонус за повне очищення поля: +${clearBonus} очок`); console.log(`Бонус за повне очищення поля: +${clearBonus} очок`); } scoreElement.textContent = `Очки: ${score}`; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); highScoreElement.textContent = `Рекорд: ${highScore}`; console.log('Новий рекорд:', highScore); } } console.log('Очищено ліній:', linesCleared, 'Очки:', score, 'Рекорд:', highScore); } function checkGameOver() { console.log('Перевірка стану гри. Кількість блоків:', currentBlocks.length, 'Блоки:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); if (currentBlocks.length === 0) { console.log('Черга порожня, генеруємо нові блоки'); setTimeout(() => { generateBlocks(); console.log('Нові блоки згенеровано, нова черга:', JSON.stringify(currentBlocks.map(b => ({ shape: b.shape, color: b.color })))); }, 0); return; } let canPlaceAny = false; for (let block of currentBlocks) { for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (canPlaceBlock(block.shape, x, y)) { canPlaceAny = true; break; } } if (canPlaceAny) break; } if (canPlaceAny) break; } console.log('Чи можна розмістити блок:', canPlaceAny); if (!canPlaceAny) { gameActive = false; if (score > highScore) { highScore = score; localStorage.setItem('blockLegendHighScore', highScore); console.log('Новий рекорд на кінці гри:', highScore); } finalScoreElement.textContent = `Ваш рахунок: ${score}\nРекорд: ${highScore}`; gameOverElement.style.display = 'block'; console.log('Гра закінчена. Рахунок:', score, 'Рекорд:', highScore); } } function restartGame() { grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); score = 0; scoreElement.textContent = `Очки: ${score}`; highScoreElement.textContent = `Рекорд: ${highScore}`; gameOverElement.style.display = 'none'; gamePaused = false; pauseButton.textContent = 'Пауза'; pauseOverlay.style.display = 'none'; undoButton.disabled = true; lastMove = null; gameActive = true; currentBlocks = []; generateBlocks(); drawGrid(); console.log('Гра перезапущена. Рахунок:', score, 'Рекорд:', highScore); } function togglePause() { if (!gameActive) return; gamePaused = !gamePaused; pauseButton.textContent = gamePaused ? 'Відновити' : 'Пауза'; pauseOverlay.style.display = gamePaused ? 'block' : 'none'; console.log('Гра на паузі:', gamePaused); } pauseButton.addEventListener('click', togglePause); undoButton.addEventListener('click', undoMove); const blockCanvases = document.querySelectorAll('.blockCanvas'); let touchStart = { x1: 0, y1: 0, x2: 0, y2: 0, time: 0 }; blockCanvases.forEach(canvas => { canvas.addEventListener('dragstart', (e) => { if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; selectedBlockIndex = index; canvas.classList.add('dragging'); e.dataTransfer.setData('text/plain', index); console.log('Початок перетягування блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('dragend', (e) => { canvas.classList.remove('dragging'); selectedBlock = null; selectedBlockIndex = -1; drawGrid(); console.log('Кінець перетягування'); }); canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; rotateSelectedBlock(90, index); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок повернуто на 90°:', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); }); canvas.addEventListener('touchstart', (e) => { if (!gameActive || gamePaused || e.touches.length < 1) return; const index = parseInt(canvas.id.replace('block', '')) - 1; selectedBlock = currentBlocks[index]; selectedBlockIndex = index; canvas.classList.add('dragging'); if (e.touches.length === 1) { touchStart = { x1: e.touches[0].clientX, y1: e.touches[0].clientY, time: Date.now() }; } else if (e.touches.length === 2) { touchStart = { x1: e.touches[0].clientX, y1: e.touches[0].clientY, x2: e.touches[1].clientX, y2: e.touches[1].clientY, time: Date.now() }; } console.log('Початок сенсорного перетягування/ротації блоку:', index, 'Блок:', JSON.stringify(selectedBlock)); }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!gameActive || gamePaused || e.touches.length !== 2 || selectedBlockIndex === -1) return; const touch1 = e.touches[0]; const touch2 = e.touches[1]; const dx = touch2.clientX - touch1.clientX; const dy = touch2.clientY - touch1.clientY; const startDx = touchStart.x2 - touchStart.x1; const startDy = touchStart.y2 - touchStart.y1; let angle = Math.atan2(dy, dx) - Math.atan2(startDy, startDx); angle = Math.round(degrees(angle) / 90) * 90; // Округлення до найближчих 90° rotateSelectedBlock(angle, selectedBlockIndex); drawBlock(selectedBlockIndex, currentBlocks[selectedBlockIndex].shape, currentBlocks[selectedBlockIndex].color); touchStart = { x1: touch1.clientX, y1: touch1.clientY, x2: touch2.clientX, y2: touch2.clientY, time: Date.now() }; }); canvas.addEventListener('touchend', (e) => { if (!gameActive || !selectedBlock || gamePaused) return; const touch = e.changedTouches[0]; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((touch.clientX - rect.left) / cellSize); const y = Math.floor((touch.clientY - rect.top) / cellSize); console.log(`Сенсорне розміщення: координати (${x}, ${y}), індекс: ${selectedBlockIndex}, блок:`, JSON.stringify(selectedBlock)); if (selectedBlockIndex >= 0 && selectedBlockIndex < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, selectedBlockIndex); currentBlocks.splice(selectedBlockIndex, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; selectedBlockIndex = -1; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } canvas.classList.remove('dragging'); drawGrid(); console.log('Сенсорне розміщення завершено'); touchStart = null; }); canvas.addEventListener('mousedown', (e) => { if (e.button === 1) { e.preventDefault(); if (!gameActive || gamePaused) return; const index = parseInt(canvas.id.replace('block', '')) - 1; currentBlocks[index].shape = flipShape(currentBlocks[index].shape); drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log('Блок перевернуто (середня кнопка):', index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } }); }); gameCanvas.addEventListener('dragover', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const valid = canPlaceBlock(selectedBlock.shape, x, y); drawPreview(selectedBlock.shape, x, y, valid); }); gameCanvas.addEventListener('drop', (e) => { e.preventDefault(); if (!gameActive || !selectedBlock || gamePaused) return; const rect = gameCanvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / cellSize); const y = Math.floor((e.clientY - rect.top) / cellSize); const index = parseInt(e.dataTransfer.getData('text/plain')); console.log(`Розміщення через drag: координати (${x}, ${y}), індекс: ${index}, блок:`, JSON.stringify(selectedBlock)); if (index >= 0 && index < currentBlocks.length) { if (canPlaceBlock(selectedBlock.shape, x, y)) { placeBlock(selectedBlock.shape, selectedBlock.color, x, y, index); currentBlocks.splice(index, 1); console.log('Блок видалено з черги. Залишилося:', currentBlocks.length); for (let i = 0; i < 3; i++) { const blockCanvas = document.getElementById(`block${i + 1}`); blockCanvas.getContext('2d').clearRect(0, 0, blockCanvas.width, blockCanvas.height); if (i < currentBlocks.length) { drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } checkGameOver(); selectedBlock = null; selectedBlockIndex = -1; } else { console.log('Неможливо розмістити блок на позиції:', x, y); } } else { console.error('Помилка: невалідний індекс блоку на drop', index); } }); function generateBlocks() { currentBlocks = []; for (let i = 0; i < 3; i++) { const shapeIndex = Math.floor(Math.random() * blockShapes.length); const colorIndex = Math.floor(Math.random() * colors.length); currentBlocks.push({ shape: blockShapes[shapeIndex], color: colors[colorIndex] }); drawBlock(i, currentBlocks[i].shape, currentBlocks[i].color); } } function drawBlock(index, shape, color) { const canvas = document.getElementById(`block${index + 1}`); const blockCtx = canvas.getContext('2d'); blockCtx.clearRect(0, 0, canvas.width, canvas.height); const maxSize = Math.max(shape.length, shape[0].length); const blockCellSize = canvas.width / maxSize; const offsetX = (canvas.width - maxSize * blockCellSize) / 2; const offsetY = (canvas.height - maxSize * blockCellSize) / 2; for (let y = 0; y < shape.length; y++) { for (let x = 0; x < shape[y].length; x++) { if (shape[y][x]) { blockCtx.fillStyle = color; blockCtx.fillRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); blockCtx.strokeStyle = '#000'; blockCtx.strokeRect(offsetX + x * blockCellSize + 2, offsetY + y * blockCellSize + 2, blockCellSize - 4, blockCellSize - 4); } } } } function rotateSelectedBlock(angle, index) { if (index === undefined || index < 0 || index >= currentBlocks.length) { console.error('Невірний індекс блоку для ротації:', index); return; } let shape = currentBlocks[index].shape; let newShape = Array(shape[0].length).fill().map(() => Array(shape.length).fill(0)); for (let y = 0; y < shape.length; y++) { for (let x = 0; x < shape[y].length; x++) { let newX, newY; if (angle === 90) { newX = shape.length - 1 - y; newY = x; } else if (angle === 180) { newX = shape[y].length - 1 - x; newY = shape.length - 1 - y; } else if (angle === 270) { newX = y; newY = shape[0].length - 1 - x; } else { return; // Нічого не робимо для інших кутів } newShape[newY][newX] = shape[y][x]; } } currentBlocks[index].shape = newShape; drawBlock(index, currentBlocks[index].shape, currentBlocks[index].color); console.log(`Блок повернуто на ${angle}°:`, index, 'Нова форма:', JSON.stringify(currentBlocks[index].shape)); } function flipShape(shape) { return shape[0].map((_, col) => shape.map(row => row[col]).reverse()); } function undoMove() { if (lastMove) { grid = lastMove.grid; score = lastMove.score; currentBlocks[lastMove.blockIndex] = lastMove.block; scoreElement.textContent = `Очки: ${score}`; drawGrid(); drawBlock(lastMove.blockIndex, currentBlocks[lastMove.blockIndex].shape, currentBlocks[lastMove.blockIndex].color); lastMove = null; undoButton.disabled = true; console.log('Хід скасовано'); } } generateBlocks(); drawGrid(); console.log('Гра ініціалізована — Мозаїка Майстрів Версія 1.9'); </script>