Код:
<!--HTML-->
<style>
.game-container {
padding: 30px 20px;
border-radius: 24px;
width: 100%;
max-width: 450px;
margin: auto;
}
h2 {
text-align: center;
color: #eee;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
font-weight: 400;
border-bottom: 1px solid #2a3a5e;
padding-bottom: 12px;
}
.word-rows {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 8px;
max-height: 600px;
overflow-y: auto;
padding-right: 5px;
min-height: 100px;
}
.word-rows::-webkit-scrollbar {
width: 6px;
}
.word-rows::-webkit-scrollbar-track {
background: #0f1a2b;
border-radius: 10px;
}
.word-rows::-webkit-scrollbar-thumb {
background: #3a5277;
border-radius: 10px;
}
.word-row {
display: flex;
align-items: center;
gap: 12px;
/* background: #0f1a2b; */
padding: 8px 14px 8px 18px;
border-radius: 16px;
/* border: 1px solid #2a3f5e; */
transition: 0.2s;
min-height: 68px;
}
.row-name {
color: #2a3a52;
font-size: .8rem;
min-width: 80px;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px #00000055;
}
.letters {
display: flex;
gap: 10px;
flex: 1;
justify-content: flex-start;
}
.letter-square {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
font-weight: 700;
color: #f0f4ff;
text-transform: uppercase;
border: 1px solid #334d6e;
transition: 0.15s ease;
box-shadow: inset 0 2px 5px #00000033;
}
.letter-square.correct {
background: #2b8c5e;
border-color: #3bb87a;
box-shadow: 0 0 8px #2b8c5eaa;
}
.letter-square.present {
background: #b59a3b;
border-color: #dbbf4a;
box-shadow: 0 0 8px #b59a3baa;
}
.letter-square.absent {
border-color: #3a4d6a;
color: #6b85aa;
}
.letter-square.empty {
background: #14212f;
border-color: #2b3f58;
color: #3a5070;
}
.status {
color: #889fc9;
text-align: center;
font-size: 0.9rem;
margin: 16px 0 0;
opacity: 0.8;
padding-top: 12px;
border-top: 1px solid #2a3a5e;
}
.debug-info {
font-size: 0.8rem;
text-align: center;
margin-top: 10px;
padding: 8px;
border-radius: 8px;
}
@media (max-width: 500px) {
.word-row {
padding: 6px 8px 6px 12px;
gap: 6px;
flex-wrap: wrap;
}
.row-name {
min-width: 60px;
font-size: 0.95rem;
}
.letter-square {
width: 38px;
height: 38px;
font-size: 1.3rem;
}
.letters {
gap: 6px;
}
}
</style>
</head>
<body>
<div class="game-container">
<div id="wordRows" class="word-rows"></div>
<div id="statusMessage" class="status">Загрузка...</div>
<div id="debugInfo" class="debug-info"></div>
</div>
<script>
// ========== НАСТРОЙКА ==========
// Правильное слово
const CORRECT_WORD = "ТРАВА";
// Внутренний список: ['ID', 'ИМЯ', 'буква1', 'буква2', 'буква3', 'буква4', 'буква5']
const WORDS_DATA = [
['1', 'Анна', 'К', 'Р', 'А', 'С', 'Н'],
];
// =================================
// Получаем элементы
const rowsContainer = document.getElementById('wordRows');
const statusEl = document.getElementById('statusMessage');
const debugEl = document.getElementById('debugInfo');
// Нормализуем правильное слово
const correct = CORRECT_WORD.toUpperCase().trim();
// Функция подсветки
function getHighlight(letter, position, correctWord) {
if (!letter) return 'empty';
const upperLetter = letter.toUpperCase();
const correctLetters = correctWord.split('');
// Если буква на правильном месте
if (correctLetters[position] === upperLetter) {
return 'correct';
}
// Если буква есть в слове
if (correctLetters.includes(upperLetter)) {
return 'present';
}
return 'absent';
}
// Функция рендеринга
function renderGame() {
let html = '';
let hasData = false;
// Проходим по всем строкам
WORDS_DATA.forEach((row, index) => {
const id = row[0] || '';
const name = row[1] || 'Без имени';
// Получаем буквы (с индекса 2 по 6)
const letters = [];
for (let i = 2; i <= 6; i++) {
letters.push(row[i] || '');
}
// Проверяем, есть ли хоть одна буква
const hasAnyLetter = letters.some(l => l && l.trim().length > 0);
if (hasAnyLetter) {
hasData = true;
}
// Строим строку
html += `<div class="word-row">`;
html += `<span class="row-name">${name}</span>`;
html += `<div class="letters">`;
// Выводим 5 квадратов
for (let i = 0; i < 5; i++) {
const letter = letters[i] || '';
const status = getHighlight(letter, i, correct);
const displayLetter = letter.toUpperCase();
html += `<div class="letter-square ${status}">${displayLetter}</div>`;
}
html += `</div>`;
html += `</div>`;
});
// Если нет данных, показываем сообщение
if (!hasData) {
rowsContainer.innerHTML = `
<div style="color: #889fc9; text-align: center; padding: 40px 20px; background: #0f1a2b; border-radius: 16px; border: 1px dashed #2a3f5e;">
📝 Нет заполненных строк<br>
<span style="font-size: 0.9rem; opacity: 0.7;">Добавьте буквы в WORDS_DATA</span>
</div>
`;
statusEl.textContent = 'Добавьте слова в WORDS_DATA';
return;
}
// Вставляем HTML
rowsContainer.innerHTML = html;
// Подсчитываем статистику
let totalAttempts = 0;
let wins = 0;
let bestAttempt = Infinity;
let attemptCount = 0;
WORDS_DATA.forEach((row) => {
const letters = [];
for (let i = 2; i <= 6; i++) {
letters.push((row[i] || '').trim().toUpperCase());
}
const hasAny = letters.some(l => l.length > 0);
if (!hasAny) return;
attemptCount++;
totalAttempts++;
const allFilled = letters.every(l => l.length > 0);
if (!allFilled) return;
const isWin = letters.every((l, idx) => l === correct[idx]);
if (isWin) {
wins++;
if (attemptCount < bestAttempt) {
bestAttempt = attemptCount;
}
}
});
// Обновляем статус
let statusText = `Попыток: ${totalAttempts}`;
if (wins > 0) {
statusText += ` | Побед: ${wins}`;
if (bestAttempt > 0 && bestAttempt !== Infinity) {
statusText += ` | Лучшая: ${bestAttempt}`;
}
statusText += ' 🎉';
} else if (totalAttempts > 0) {
statusText += ' | Пока нет побед';
}
statusEl.textContent = statusText;
}
// Запускаем рендеринг
renderGame();
</script>
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
