.da-wordle { czcionka-rodzina: Arial, sans-serif; wyrównanie tekstu: środek; wypełnienie: 20px 10px; maksymalna szerokość: 500px; margines: 0 auto; } .da-wordle h3 { margines: 0 0 4px; rozmiar czcionki: 28px; grubość czcionki: 500; } .da-wordle-subtitle { margines: 0 0 18px; rozmiar czcionki: 16px; } .da-wordle-grid { wyświetlacz: flex; kierunek flex: kolumna; wyrównanie elementów: środek; przerwa: 5px; } .da-wordle-row { wyświetlacz: flex; przerwa: 5px; } .da-wordle-tile { szerokość: 42px; wysokość: 42px; obramowanie: 2px solid #d3d6da; wyświetlacz: flex; wyrównanie elementów: środek; justify-content: center; font-size: 22px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; background: #fff; } .da-wordle-tile.correct { background: #6aaa64; border-color: #6aaa64; color: white; } .da-wordle-tile.present { background: #c9b458; border-color: #c9b458; color: white; } .da-wordle-tile.absent { background: #787c7e; border-color: #787c7e; color: white; } .da-wordle-input-row { display: flex; justify-content: center; gap: 5px; margin-top: 18px; } .da-wordle-input { width: 42px; height: 42px; border: 2px solid #ccc; wyrównanie tekstu: środek; rozmiar czcionki: 22px; grubość czcionki: pogrubienie; przekształcenie tekstu: wielkie litery; rozmiar pola: pole obramowania; obrys: brak; } .da-wordle-input:focus { kolor obramowania: #777; } .da-wordle-button { margines-górny: 12px; wypełnienie: 9px 18px; obramowanie: brak; tło: #f1f1f1; rozmiar czcionki: 16px; kursor: wskaźnik; } .da-wordle-button:hover { tło: #e5e5e5; } .da-wordle-message { min. wysokość: 24px; margines-górny: 12px; rozmiar czcionki: 15px; } .da-wordle-result { grubość czcionki: pogrubienie; } @media (maksymalna szerokość: 480px) { .da-wordle-tile, .da-wordle-input { szerokość: 36px; wysokość: 36px; rozmiar czcionki: 19px; } .da-wordle-row, .da-wordle-input-row { odstęp: 3px; } .da-wordle h3 { rozmiar czcionki: 24px; } } (funkcja () { /* ========================================= TUTAJ MOŻESZ WPISAĆ SŁOWA WAŻNE: Wszystkie słowa muszą mieć dokładnie 6 liter! ========================================== */ const słowa = [ "HEINER", "LILIEN", "BEMBEL", "HESSEN", "WOOGEN", "LOUISE", "MERCKS", "ENTEGA", "CAMPUS", "KULTUR", "GARTEN", "SCHWAN", "BERGIG" ] /* ======================================== USTAWIENIA ========================================== */ const maxTries = 6; /* ============================================= OKREŚL SŁOWO DNIA ============================================ */ 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; /* ============================================= ELEMENTY ============================================ */ const grid = document.getElementById("da-wordle-grid"); const inputRow = document.getElementById("da-wordle-input-row"); const button = document.getElementById("da-wordle-button"); const message = document.getElementById("da-wordle-message"); const lengthDisplay = document.getElementById("da-wordle-length"); lengthDisplay.textContent = wordLength; let tries = 0; let gameOver = false; const rows = []; const inputFields = []; /* ============================================== UTWÓRZ POLE GRY =========================================== */ for (let i = 0; i < maxTries; i++) { const row = document.createElement("div"); row.className = "da-wordle-row"; for (let j = 0; j < wordLength; j++) { const tile = document.createElement("div"); tile.className = "da-wordle-tile"; row.appendChild(tile); } grid.appendChild(row); rows.push(row); } /* ============================================= POLA WEJŚCIOWE ========================================== */ 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); } /* ============================================== OCEŃ LITERY =========================================== */ function evaluateGuess(guess) { const result = new Array(wordLength).fill("absent"); const remainder = solution.split(""); /* Najpierw dokładnie poprawne litery */ for (let i = 0; i < wordLength; i++) { if (guess[i] === solution[i]) { result[i] = "correct"; remainder[i] = null; } } /* Następnie popraw litery w złej pozycji */ for (let i = 0; i input.value) .join("") .toUpperCase(); if (guess.length !== wordLength) { message.textContent = "Wypełnij wszystkie litery " + wordLength + "."; return; } const row = rows[tries]; const result = evaluateGuess(guess); for (let i = 0; i < wordLength; i++) { const tile = wiersz.dzieci[i]; kafelka.zawartośćtekstowa = zgadnij[i]; kafelka.listaklas.dodaj( wynik[i] ); } próbuje++; /* ============================================= WYGRANO ======================================== */ jeśli (zgadnij === rozwiązanie) { koniec gry = prawda; wiadomość.wewnętrznyHTML = '' + ' 🎉 Gratulacje! Zgadłeś w ' + próbach + (prób === 1 ? " Próba." : " Próby.") + ''; disableInputs(); return; } /* ============================================== UTRACONE ========================================= */ if (tries >= maxTries) { gameOver = true; message.innerHTML = '' + 'Niestety, nie udało mi się! Słowo brzmiało: ' + rozwiązanie + ''; disableInputs(); return; } message.textContent = "Próby: " + próby + " / " + maxTries; /* Wyczyść dane wejściowe */ inputFields.forEach(function (input) { input.value = ""; }); inputFields[0].focus(); } /* =============================================== KONIEC GRY =========================================== */ function disableInputs() { inputFields.forEach(function (input) { input.disabled = true }); button.disabled = true; } /* ========================================== PRZYCISK ============================================= */ button.addEventListener( "click", submitGuess ); /* Aktywuj pierwsze pole */ inputFields[0].focus(); })();