.da-wordle { font-family: Arial, sans-serif; text-align: center; padding: 20px 10px; max-width: 500px; margin: 0 auto; } .da-wordle h3 { margin: 0 0 4px; font-size: 28px; font-weight: 500; } .da-wordle-subtitle { margin: 0 0 18px; font-size: 16px; } .da-wordle-grid { display: flex; flex-direction: column; align-items: center; gap: 5px; } .da-wordle-row { display: flex; gap: 5px; } .da-wordle-tile { width: 42px; height: 42px; border: 2px solid #d3d6da; display: flex; align-items: center; justify-content: center; } розмір-фону: 22px; вага-фону: жирний; трансформація-тексту: верхній регістр; розмір-боксу: border-box; фон: #fff; } .da-wordle-tile.correct { фон: #6aaa64; колір-бордера: #6aaa64; колір: білий; } .da-wordle-tile.present { фон: #c9b458; колір-бордера: #c9b458; колір: білий; } .da-wordle-tile.absent { фон: #787c7e; колір-бордера: #787c7e; колір: білий; } .da-wordle-input-row { дисплей: flex; вирівнювання-контенту: центр; проміжок: 5px; маргін-топ: 18px; } .da-wordle-input { ширина: 42px; висота: 42px; border: 2px solid #ccc; вирівнювання-тексту: центр; розмір шрифту: 22px; ширина шрифту: жирний; трансформація тексту: верхній регістр; розмір поля: border-box; outline: none; } .da-wordle-input:focus { border-color: #777; } .da-wordle-button { margin-top: 12px; padding: 9px 18px; border: none; background: #f1f1f1; розмір шрифту: 16px; cursor: pointer; } .da-wordle-button:hover { background: #e5e5e5; } .da-wordle-message { min-height: 24px; margin-top: 12px; font-size: 15px; } .da-wordle-result { font-weight: жирний; } @media (max-width: 480px) { .da-wordle-tile, .da-wordle-input { ширина: 36px; висота: 36px; розмір шрифту: 19px; } .da-wordle-row, .da-wordle-input-row { проміжок: 3px; } .da-wordle h3 { розмір шрифту: 24px; } } (функція () { /* ========================================== ТУТ ВИ МОЖЕТЕ ВВЕСТИ СЛОВА ВАЖЛИВО: Усі слова мають містити рівно 6 букв! =========================================== */ const words = [ "HEINER", "LILIEN", "BEMBEL", "HESSEN", "WOOGEN", "LOUISE", "MERCKS", "ENTEGA", "CAMPUS", "KULTUR", "GARTEN", "SCHWAN", "BERGIG" ]; /* ======================================= НАЛАШТУВАННЯ ========================================== */ const maxTries = 6; /* =============================================== ВИЗНАЧТЕ СЛОВО ДНЯ =========================================== */ function getDayNumber() { const today = new Date(); const start = new Date( today.getFullYear(), 0, 0 ); const diff = today - start; const oneDay = 1000 * 60 * 60 * 24; return Math.floor(diff / oneDay); } const dayNumber = getDayNumber(); const solution = words[dayNumber % words.length].toUpperCase(); const wordLength = solution.length; /* =============================================== ЕЛЕМЕНТИ =========================================== */ const grid = document.getElementById("да-слово-грід"); const inputRow = document.getElementById("да-слово-вхідний-рядок"); const button = document.getElementById("да-слово-кнопка"); const message = document.getElementById("да-слово-повідомлення"); const lengthDisplay = document.getElementById("да-слово-довжина"); lengthDisplay.textContent = wordLength; let tries = 0; let gameOver = false; const rows = []; const inputFields = []; /* =============================================== СТВОРИТИ ІГРОВЕ ПОЛЕ =========================================== */ for (let i = 0; i < maxTries; i++) { const row = document.createElement("div"); row.className = "да-слове-рядок"; for (let j = 0; j < wordLength; j++) { const tile = document.createElement("div"); tile.className = "да-слове-тиле"; row.appendChild(tile); } grid.appendChild(row); rows.push(row); } /* =========================================== ПОЛЯ ВВЕДЕННЯ =========================================== */ for (let i = 0; i < wordLength; i++) { const input = document.createElement("input"); input.type = "text"; input.maxLength = 1; input.className = "da-wordle-input"; input.autocomplete = "off"; input.autocapitalize = "characters"; input.addEventListener("input", function () { this.value = this.value .replace(/[^a-zA-ZÄÖÜäöü]/g, "") .toUpperCase(); if ( this.value && i 0 ) { inputFields[i - 1].focus(); } if (event.key === "Enter") { submitGuess(); } }); inputRow.appendChild(input); inputFields.push(input); } /* =============================================== ОЦІНКА ЛІТЕР ========================================== */ function evaluateGuess(guess) { const result = new Array(wordLength).fill("absent"); const remaining = solution.split(""); /* Спочатку вказуються точно правильні літери */ for (let i = 0; i < wordLength; i++) { if (guess[i] === solution[i]) { result[i] = "correct"; remaining[i] = null; } } /* Потім виправити літери в неправильній позиції */ for (let i = 0; i input.value) .join("") .toUpperCase(); if (guess.length !== wordLength) { message.textContent = "Будь ласка, заповніть усі " + wordLength + " літери."; return; } const row = rows[tries]; const result = evaluateGuess(guess); for (let i = 0; i < wordLength; i++) { const tile = row.children[i]; tile.textContent = guess[i]; tile.classList.add( result[i] ); } tries++; /* =============================================== ВИГРАНО ============================================ */ якщо (здогадка === рішення) { gameOver = true; message.innerHTML = '' + ' 🎉 Вітаємо! Вгадали за ' + спроб + (спроб === 1 ? " Спроба." : " Спроб.") + ''; disableInputs(); return; } /* ============================================== ПРОГРАНО ========================================= */ якщо (спроб >= maxСпроб) { gameOver = true; message.innerHTML = '' + 'На жаль, у мене це не вийшло! Слово було: ' + рішення + ''; disableInputs(); return; } message.textContent = "Спроб: " + tries + " / " + maxTries; /* Очищення вхідних даних */ inputFields.forEach(function (input) { input.value = ""; }); inputFields[0].focus(); } /* ============================================ КІНЕЦЬ ГРИ ========================================== */ function disableInputs() { inputFields.forEach(function (input) { input.disabled = true }); button.disabled = true; } /* ============================================ КНОПКА ============================================== */ button.addEventListener("click", submitGuess ); /* Активація першого поля */ inputFields[0].focus(); })();