770 lines
28 KiB
JavaScript
770 lines
28 KiB
JavaScript
// Данные для игр
|
||
const cardData = {
|
||
animals: [
|
||
{ emoji: '🐱', word: 'Кот' },
|
||
{ emoji: '🐶', word: 'Собака' },
|
||
{ emoji: '🐮', word: 'Корова' },
|
||
{ emoji: '🐷', word: 'Свинья' },
|
||
{ emoji: '🐸', word: 'Лягушка' },
|
||
{ emoji: '🐵', word: 'Обезьяна' },
|
||
{ emoji: '🦁', word: 'Лев' },
|
||
{ emoji: '🐘', word: 'Слон' },
|
||
{ emoji: '🐰', word: 'Заяц' },
|
||
{ emoji: '🦊', word: 'Лиса' },
|
||
{ emoji: '🐻', word: 'Медведь' },
|
||
{ emoji: '🐼', word: 'Панда' },
|
||
{ emoji: '🐨', word: 'Коала' },
|
||
{ emoji: '🐯', word: 'Тигр' },
|
||
{ emoji: '🦓', word: 'Зебра' },
|
||
{ emoji: '🦒', word: 'Жираф' }
|
||
],
|
||
fruits: [
|
||
{ emoji: '🍎', word: 'Яблоко' },
|
||
{ emoji: '🍌', word: 'Банан' },
|
||
{ emoji: '🍇', word: 'Виноград' },
|
||
{ emoji: '🍊', word: 'Апельсин' },
|
||
{ emoji: '🍓', word: 'Клубника' },
|
||
{ emoji: '🍉', word: 'Арбуз' },
|
||
{ emoji: '🍑', word: 'Персик' },
|
||
{ emoji: '🍒', word: 'Вишня' },
|
||
{ emoji: '🍐', word: 'Груша' },
|
||
{ emoji: '🍍', word: 'Ананас' },
|
||
{ emoji: '🥝', word: 'Киви' },
|
||
{ emoji: '🍋', word: 'Лимон' },
|
||
{ emoji: '🥭', word: 'Манго' },
|
||
{ emoji: '🍈', word: 'Дыня' }
|
||
],
|
||
transport: [
|
||
{ emoji: '🚗', word: 'Машина' },
|
||
{ emoji: '🚕', word: 'Такси' },
|
||
{ emoji: '🚌', word: 'Автобус' },
|
||
{ emoji: '🚎', word: 'Троллейбус' },
|
||
{ emoji: '🚂', word: 'Поезд' },
|
||
{ emoji: '✈️', word: 'Самолёт' },
|
||
{ emoji: '🚁', word: 'Вертолёт' },
|
||
{ emoji: '🚢', word: 'Корабль' },
|
||
{ emoji: '🚲', word: 'Велосипед' },
|
||
{ emoji: '🛴', word: 'Самокат' },
|
||
{ emoji: '🚑', word: 'Скорая' },
|
||
{ emoji: '🚒', word: 'Пожарная' },
|
||
{ emoji: '🚓', word: 'Полиция' },
|
||
{ emoji: '🚀', word: 'Ракета' }
|
||
],
|
||
colors: [
|
||
{ emoji: '🔴', word: 'Красный' },
|
||
{ emoji: '🔵', word: 'Синий' },
|
||
{ emoji: '🟢', word: 'Зелёный' },
|
||
{ emoji: '🟡', word: 'Жёлтый' },
|
||
{ emoji: '🟠', word: 'Оранжевый' },
|
||
{ emoji: '🟣', word: 'Фиолетовый' },
|
||
{ emoji: '⚫', word: 'Чёрный' },
|
||
{ emoji: '⚪', word: 'Белый' },
|
||
{ emoji: '🟤', word: 'Коричневый' },
|
||
{ emoji: '🩷', word: 'Розовый' },
|
||
{ emoji: '🩵', word: 'Голубой' },
|
||
{ emoji: '🩶', word: 'Серый' }
|
||
],
|
||
vegetables: [
|
||
{ emoji: '🥕', word: 'Морковь' },
|
||
{ emoji: '🥔', word: 'Картофель' },
|
||
{ emoji: '🥒', word: 'Огурец' },
|
||
{ emoji: '🍅', word: 'Помидор' },
|
||
{ emoji: '🥬', word: 'Капуста' },
|
||
{ emoji: '🍆', word: 'Баклажан' },
|
||
{ emoji: '🫑', word: 'Перец' },
|
||
{ emoji: '🧅', word: 'Лук' },
|
||
{ emoji: '🧄', word: 'Чеснок' },
|
||
{ emoji: '🥦', word: 'Брокколи' }
|
||
],
|
||
family: [
|
||
{ emoji: '👨', word: 'Папа' },
|
||
{ emoji: '👩', word: 'Мама' },
|
||
{ emoji: '👦', word: 'Сын' },
|
||
{ emoji: '👧', word: 'Дочка' },
|
||
{ emoji: '👴', word: 'Дедушка' },
|
||
{ emoji: '👵', word: 'Бабушка' },
|
||
{ emoji: '👶', word: 'Малыш' },
|
||
{ emoji: '🐕', word: 'Щенок' }
|
||
]
|
||
};
|
||
|
||
const sounds = ['А', 'О', 'У', 'Ы', 'Э', 'М', 'П', 'Б', 'Т', 'Д', 'К', 'Г', 'Х', 'В', 'Ф', 'С', 'З', 'Ш', 'Ж', 'Ч', 'Щ', 'Л', 'Р', 'Н', 'Й', 'Ц'];
|
||
|
||
const animalSounds = [
|
||
{ name: 'Кот', emoji: '🐱', sound: 'Мяу-мяу!' },
|
||
{ name: 'Собака', emoji: '🐶', sound: 'Гав-гав!' },
|
||
{ name: 'Корова', emoji: '🐮', sound: 'Му-у-у!' },
|
||
{ name: 'Лягушка', emoji: '🐸', sound: 'Ква-ква!' },
|
||
{ name: 'Овца', emoji: '🐑', sound: 'Бее-ее!' },
|
||
{ name: 'Петух', emoji: '🐓', sound: 'Ку-ка-ре-ку!' },
|
||
{ name: 'Свинья', emoji: '🐷', sound: 'Хрю-хрю!' },
|
||
{ name: 'Утка', emoji: '🦆', sound: 'Кря-кря!' },
|
||
{ name: 'Ворона', emoji: '🐦', sound: 'Кар-кар!' },
|
||
{ name: 'Комар', emoji: '🦟', sound: 'З-з-з!' },
|
||
{ name: 'Пчела', emoji: '🐝', sound: 'Ж-ж-ж!' },
|
||
{ name: 'Змея', emoji: '🐍', sound: 'Ш-ш-ш!' }
|
||
];
|
||
|
||
const stories = [
|
||
{
|
||
name: 'Колобок',
|
||
correctOrder: ['👵', '🥧', '🫓'],
|
||
pieces: ['🫓', '👵', '🥧']
|
||
},
|
||
{
|
||
name: 'Репка',
|
||
correctOrder: ['🌱', '👴', '👵'],
|
||
pieces: ['👵', '🌱', '👴']
|
||
},
|
||
{
|
||
name: 'День',
|
||
correctOrder: ['🌅', '☀️', '🌙'],
|
||
pieces: ['🌙', '🌅', '☀️']
|
||
},
|
||
{
|
||
name: 'Дождик',
|
||
correctOrder: ['☁️', '🌧️', '🌈'],
|
||
pieces: ['🌈', '☁️', '🌧️']
|
||
},
|
||
{
|
||
name: 'Дерево',
|
||
correctOrder: ['🌰', '🌱', '🌳'],
|
||
pieces: ['🌳', '🌰', '🌱']
|
||
},
|
||
{
|
||
name: 'Зима',
|
||
correctOrder: ['☁️', '❄️', '⛄'],
|
||
pieces: ['⛄', '☁️', '❄️']
|
||
},
|
||
{
|
||
name: 'Бабочка',
|
||
correctOrder: ['🥚', '🐛', '🦋'],
|
||
pieces: ['🦋', '🥚', '🐛']
|
||
},
|
||
{
|
||
name: 'Пирог',
|
||
correctOrder: ['🥚', '🥛', '🥧'],
|
||
pieces: ['🥧', '🥛', '🥚']
|
||
}
|
||
];
|
||
|
||
// Состояние игры
|
||
let currentCategory = 'animals';
|
||
let currentCardIndex = 0;
|
||
let currentSoundIndex = 0;
|
||
let currentQuestion = null;
|
||
let currentStory = null;
|
||
let selectedPiece = null;
|
||
let storyState = [];
|
||
let currentFindItem = null;
|
||
let matchCards = [];
|
||
let matchFlipped = [];
|
||
let matchPairs = 0;
|
||
let matchMoves = 0;
|
||
let currentFirstLetter = null;
|
||
let currentSyllable = null;
|
||
let syllableState = [];
|
||
|
||
// Навигация
|
||
function showMenu() {
|
||
document.querySelectorAll('.game-section').forEach(section => {
|
||
section.classList.add('hidden');
|
||
});
|
||
document.getElementById('menu').classList.remove('hidden');
|
||
}
|
||
|
||
function showGame(gameId) {
|
||
document.getElementById('menu').classList.add('hidden');
|
||
document.querySelectorAll('.game-section').forEach(section => {
|
||
section.classList.add('hidden');
|
||
});
|
||
document.getElementById('game-' + gameId).classList.remove('hidden');
|
||
|
||
if (gameId === 'cards') initCards();
|
||
if (gameId === 'sounds') initSounds();
|
||
if (gameId === 'animals') initAnimalQuiz();
|
||
if (gameId === 'story') initStory();
|
||
if (gameId === 'find') initFind();
|
||
if (gameId === 'match') initMatch();
|
||
if (gameId === 'firstletter') initFirstLetter();
|
||
if (gameId === 'syllables') initSyllable();
|
||
}
|
||
|
||
// Клик по карточкам игр
|
||
document.querySelectorAll('.game-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
const gameId = card.dataset.game;
|
||
showGame(gameId);
|
||
});
|
||
});
|
||
|
||
// ===== ИГРА 1: Карточки со словами =====
|
||
function initCards() {
|
||
currentCardIndex = 0;
|
||
showCard();
|
||
}
|
||
|
||
function showCard() {
|
||
const cards = cardData[currentCategory];
|
||
const card = cards[currentCardIndex];
|
||
document.getElementById('card-image').textContent = card.emoji;
|
||
document.getElementById('card-word').textContent = card.word;
|
||
}
|
||
|
||
document.querySelectorAll('.category-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
currentCategory = btn.dataset.category;
|
||
currentCardIndex = 0;
|
||
showCard();
|
||
});
|
||
});
|
||
|
||
function nextCard() {
|
||
const cards = cardData[currentCategory];
|
||
currentCardIndex = (currentCardIndex + 1) % cards.length;
|
||
showCard();
|
||
}
|
||
|
||
function prevCard() {
|
||
const cards = cardData[currentCategory];
|
||
currentCardIndex = (currentCardIndex - 1 + cards.length) % cards.length;
|
||
showCard();
|
||
}
|
||
|
||
function speakWord() {
|
||
const card = cardData[currentCategory][currentCardIndex];
|
||
speak(card.word);
|
||
}
|
||
|
||
// ===== ИГРА 2: Звуки и буквы =====
|
||
function initSounds() {
|
||
currentSoundIndex = 0;
|
||
showSound();
|
||
}
|
||
|
||
function showSound() {
|
||
const letter = sounds[currentSoundIndex];
|
||
document.getElementById('letter-display').textContent = letter;
|
||
document.getElementById('exercise-text').textContent = 'Повтори звук: "' + letter + '-а-а"';
|
||
}
|
||
|
||
function nextSound() {
|
||
currentSoundIndex = (currentSoundIndex + 1) % sounds.length;
|
||
showSound();
|
||
}
|
||
|
||
function playSoundExample() {
|
||
const letter = sounds[currentSoundIndex];
|
||
speak(letter + '-а-а');
|
||
}
|
||
|
||
// ===== ИГРА 3: Викторина с животными =====
|
||
function initAnimalQuiz() {
|
||
nextQuestion();
|
||
}
|
||
|
||
function nextQuestion() {
|
||
currentQuestion = animalSounds[Math.floor(Math.random() * animalSounds.length)];
|
||
document.getElementById('feedback').textContent = '';
|
||
document.getElementById('feedback').className = 'feedback';
|
||
document.getElementById('next-question-btn').classList.add('hidden');
|
||
|
||
const options = [currentQuestion];
|
||
while (options.length < 4) {
|
||
const random = animalSounds[Math.floor(Math.random() * animalSounds.length)];
|
||
if (!options.includes(random)) {
|
||
options.push(random);
|
||
}
|
||
}
|
||
|
||
options.sort(() => Math.random() - 0.5);
|
||
|
||
const container = document.getElementById('quiz-options');
|
||
container.innerHTML = '';
|
||
options.forEach(animal => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'quiz-option';
|
||
btn.textContent = animal.emoji + ' ' + animal.name;
|
||
btn.onclick = () => checkAnswer(animal, btn);
|
||
container.appendChild(btn);
|
||
});
|
||
}
|
||
|
||
function playAnimalSound() {
|
||
speak(currentQuestion.sound);
|
||
}
|
||
|
||
function checkAnswer(selected, button) {
|
||
const buttons = document.querySelectorAll('.quiz-option');
|
||
buttons.forEach(btn => {
|
||
btn.disabled = true;
|
||
if (btn.textContent.includes(selected.name) && selected.name === currentQuestion.name) {
|
||
btn.classList.add('correct');
|
||
}
|
||
});
|
||
|
||
if (selected.name === currentQuestion.name) {
|
||
document.getElementById('feedback').textContent = '🎉 Правильно! Молодец!';
|
||
document.getElementById('feedback').className = 'feedback success';
|
||
speak('Правильно! Это ' + currentQuestion.name);
|
||
document.getElementById('next-question-btn').classList.remove('hidden');
|
||
} else {
|
||
button.classList.add('wrong');
|
||
document.getElementById('feedback').textContent = 'Попробуй ещё раз!';
|
||
document.getElementById('feedback').className = 'feedback error';
|
||
speak('Попробуй ещё раз');
|
||
setTimeout(() => {
|
||
buttons.forEach(btn => {
|
||
btn.disabled = false;
|
||
btn.classList.remove('wrong');
|
||
});
|
||
document.getElementById('feedback').textContent = '';
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
// ===== ИГРА 4: Составь историю =====
|
||
function initStory() {
|
||
currentStory = stories[Math.floor(Math.random() * stories.length)];
|
||
storyState = [null, null, null];
|
||
selectedPiece = null;
|
||
|
||
document.getElementById('story-feedback').textContent = '';
|
||
document.getElementById('story-feedback').className = 'feedback';
|
||
|
||
const slots = document.querySelectorAll('.story-slot');
|
||
slots.forEach(slot => {
|
||
slot.innerHTML = slot.dataset.slot + 1;
|
||
slot.classList.remove('filled');
|
||
slot.onclick = () => selectSlot(parseInt(slot.dataset.slot));
|
||
});
|
||
|
||
const piecesContainer = document.getElementById('story-pieces');
|
||
piecesContainer.innerHTML = '';
|
||
currentStory.pieces.forEach((piece, index) => {
|
||
const pieceEl = document.createElement('div');
|
||
pieceEl.className = 'story-piece';
|
||
pieceEl.textContent = piece;
|
||
pieceEl.dataset.index = index;
|
||
pieceEl.onclick = () => selectPiece(index, pieceEl);
|
||
piecesContainer.appendChild(pieceEl);
|
||
});
|
||
}
|
||
|
||
function selectPiece(index, element) {
|
||
document.querySelectorAll('.story-piece').forEach(p => p.classList.remove('selected'));
|
||
element.classList.add('selected');
|
||
selectedPiece = { index, element, value: currentStory.pieces[index] };
|
||
}
|
||
|
||
function selectSlot(slotIndex) {
|
||
if (!selectedPiece) return;
|
||
|
||
const slots = document.querySelectorAll('.story-slot');
|
||
const slot = slots[slotIndex];
|
||
|
||
if (slot.classList.contains('filled')) {
|
||
const oldPiece = slot.querySelector('.piece');
|
||
if (oldPiece) {
|
||
const piecesContainer = document.getElementById('story-pieces');
|
||
const oldPieceEl = document.createElement('div');
|
||
oldPieceEl.className = 'story-piece';
|
||
oldPieceEl.textContent = oldPiece.textContent;
|
||
oldPieceEl.dataset.index = storyState[slotIndex];
|
||
oldPieceEl.onclick = () => selectPiece(storyState[slotIndex], oldPieceEl);
|
||
piecesContainer.appendChild(oldPieceEl);
|
||
}
|
||
}
|
||
|
||
slot.innerHTML = '';
|
||
const pieceEl = document.createElement('div');
|
||
pieceEl.className = 'piece';
|
||
pieceEl.textContent = selectedPiece.value;
|
||
slot.appendChild(pieceEl);
|
||
slot.classList.add('filled');
|
||
|
||
storyState[slotIndex] = selectedPiece.index;
|
||
|
||
if (selectedPiece.element.parentNode.id === 'story-pieces') {
|
||
selectedPiece.element.remove();
|
||
}
|
||
|
||
selectedPiece = null;
|
||
document.querySelectorAll('.story-piece').forEach(p => p.classList.remove('selected'));
|
||
}
|
||
|
||
function resetStory() {
|
||
initStory();
|
||
}
|
||
|
||
function checkStory() {
|
||
const filledSlots = storyState.filter(s => s !== null);
|
||
if (filledSlots.length < 3) {
|
||
document.getElementById('story-feedback').textContent = 'Заполни все ячейки!';
|
||
document.getElementById('story-feedback').className = 'feedback error';
|
||
speak('Заполни все ячейки');
|
||
return;
|
||
}
|
||
|
||
const isCorrect = JSON.stringify(storyState) === JSON.stringify(currentStory.correctOrder.map((emoji, i) =>
|
||
currentStory.pieces.indexOf(currentStory.correctOrder[i])
|
||
));
|
||
|
||
if (isCorrect) {
|
||
document.getElementById('story-feedback').textContent = '🌟 Отлично! История правильная!';
|
||
document.getElementById('story-feedback').className = 'feedback success';
|
||
speak('Молодец! Всё правильно!');
|
||
} else {
|
||
document.getElementById('story-feedback').textContent = 'Попробуй ещё раз!';
|
||
document.getElementById('story-feedback').className = 'feedback error';
|
||
speak('Попробуй ещё раз');
|
||
}
|
||
}
|
||
|
||
// ===== ИГРА 5: Найди лишнее =====
|
||
const findCategories = [
|
||
{ items: ['🍎', '🍌', '🍇', '🚗'], answer: 3, name: 'Транспорт среди фруктов' },
|
||
{ items: ['🐱', '🐶', '🐮', '🍎'], answer: 3, name: 'Фрукт среди животных' },
|
||
{ items: ['🔴', '🔵', '🟢', '🐱'], answer: 3, name: 'Животное среди цветов' },
|
||
{ items: ['🚗', '🚌', '🚂', '🍌'], answer: 3, name: 'Фрукт среди транспорта' },
|
||
{ items: ['👨', '👩', '👦', '🍎'], answer: 3, name: 'Фрукт среди людей' },
|
||
{ items: ['🥕', '🥔', '🥒', '🍌'], answer: 3, name: 'Фрукт среди овощей' },
|
||
{ items: ['✈️', '🚁', '🚂', '🐶'], answer: 3, name: 'Животное среди транспорта' },
|
||
{ items: ['🌅', '☀️', '🌙', '🍎'], answer: 3, name: 'Фрукт про времена суток' }
|
||
];
|
||
|
||
function initFind() {
|
||
nextFindQuestion();
|
||
}
|
||
|
||
function nextFindQuestion() {
|
||
currentFindItem = findCategories[Math.floor(Math.random() * findCategories.length)];
|
||
document.getElementById('find-feedback').textContent = '';
|
||
document.getElementById('find-feedback').className = 'feedback';
|
||
document.getElementById('next-find-btn').classList.add('hidden');
|
||
|
||
const container = document.getElementById('find-items');
|
||
container.innerHTML = '';
|
||
|
||
currentFindItem.items.forEach((emoji, index) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'find-item';
|
||
item.innerHTML = '<span class="emoji">' + emoji + '</span><span class="label">Предмет ' + (index + 1) + '</span>';
|
||
item.onclick = () => checkFind(index, item);
|
||
container.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function checkFind(selectedIndex, item) {
|
||
if (selectedIndex === currentFindItem.answer) {
|
||
item.classList.add('correct');
|
||
document.getElementById('find-feedback').textContent = '🎉 Правильно! Молодец!';
|
||
document.getElementById('find-feedback').className = 'feedback success';
|
||
speak('Правильно! Это лишнее!');
|
||
document.getElementById('next-find-btn').classList.remove('hidden');
|
||
|
||
document.querySelectorAll('.find-item').forEach(i => i.style.pointerEvents = 'none');
|
||
} else {
|
||
item.classList.add('wrong');
|
||
document.getElementById('find-feedback').textContent = 'Подумай ещё!';
|
||
document.getElementById('find-feedback').className = 'feedback error';
|
||
speak('Попробуй ещё раз');
|
||
|
||
setTimeout(() => {
|
||
item.classList.remove('wrong');
|
||
document.getElementById('find-feedback').textContent = '';
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// ===== ИГРА 6: Найди пару =====
|
||
const matchEmojis = ['🐱', '🐶', '🐮', '🐸', '🍎', '🍌', '🚗', '🚌', '🔴', '🔵', '🟢', '🟡'];
|
||
|
||
function initMatch() {
|
||
matchFlipped = [];
|
||
matchPairs = 0;
|
||
matchMoves = 0;
|
||
document.getElementById('match-moves').textContent = '0';
|
||
document.getElementById('match-pairs').textContent = '0/6';
|
||
document.getElementById('match-feedback').textContent = '';
|
||
document.getElementById('match-feedback').className = 'feedback';
|
||
|
||
const selected = matchEmojis.slice(0, 6);
|
||
const cards = [...selected, ...selected];
|
||
|
||
cards.sort(() => Math.random() - 0.5);
|
||
|
||
const grid = document.getElementById('match-grid');
|
||
grid.innerHTML = '';
|
||
|
||
cards.forEach((emoji, index) => {
|
||
const card = document.createElement('div');
|
||
card.className = 'match-card';
|
||
card.dataset.emoji = emoji;
|
||
card.dataset.index = index;
|
||
card.innerHTML = '<span style="visibility: hidden;">' + emoji + '</span>';
|
||
card.onclick = () => flipCard(card);
|
||
grid.appendChild(card);
|
||
});
|
||
}
|
||
|
||
function flipCard(card) {
|
||
if (matchFlipped.length >= 2 || card.classList.contains('flipped') || card.classList.contains('matched')) {
|
||
return;
|
||
}
|
||
|
||
card.classList.add('flipped');
|
||
card.querySelector('span').style.visibility = 'visible';
|
||
matchFlipped.push(card);
|
||
|
||
if (matchFlipped.length === 2) {
|
||
matchMoves++;
|
||
document.getElementById('match-moves').textContent = matchMoves;
|
||
|
||
const [card1, card2] = matchFlipped;
|
||
|
||
if (card1.dataset.emoji === card2.dataset.emoji) {
|
||
card1.classList.add('matched');
|
||
card2.classList.add('matched');
|
||
matchPairs++;
|
||
document.getElementById('match-pairs').textContent = matchPairs + '/6';
|
||
matchFlipped = [];
|
||
|
||
if (matchPairs === 6) {
|
||
document.getElementById('match-feedback').textContent = '🌟 Отлично! Все пары найдены!';
|
||
document.getElementById('match-feedback').className = 'feedback success';
|
||
speak('Молодец! Все пары найдены!');
|
||
}
|
||
} else {
|
||
setTimeout(() => {
|
||
card1.classList.remove('flipped');
|
||
card2.classList.remove('flipped');
|
||
card1.querySelector('span').style.visibility = 'hidden';
|
||
card2.querySelector('span').style.visibility = 'hidden';
|
||
matchFlipped = [];
|
||
}, 1000);
|
||
}
|
||
}
|
||
}
|
||
|
||
// ===== ИГРА 7: Первая буква =====
|
||
const firstLetterWords = [
|
||
{ word: 'Аист', emoji: '🦢', letter: 'А' },
|
||
{ word: 'Банан', emoji: '🍌', letter: 'Б' },
|
||
{ word: 'Виноград', emoji: '🍇', letter: 'В' },
|
||
{ word: 'Груша', emoji: '🍐', letter: 'Г' },
|
||
{ word: 'Дом', emoji: '🏠', letter: 'Д' },
|
||
{ word: 'Енот', emoji: '🦝', letter: 'Е' },
|
||
{ word: 'Жираф', emoji: '🦒', letter: 'Ж' },
|
||
{ word: 'Зонт', emoji: '☂️', letter: 'З' },
|
||
{ word: 'Игла', emoji: '🪡', letter: 'И' },
|
||
{ word: 'Йогурт', emoji: '🥛', letter: 'Й' },
|
||
{ word: 'Кот', emoji: '🐱', letter: 'К' },
|
||
{ word: 'Лев', emoji: '🦁', letter: 'Л' },
|
||
{ word: 'Машина', emoji: '🚗', letter: 'М' },
|
||
{ word: 'Ножницы', emoji: '✂️', letter: 'Н' },
|
||
{ word: 'Облако', emoji: '☁️', letter: 'О' },
|
||
{ word: 'Поезд', emoji: '🚂', letter: 'П' },
|
||
{ word: 'Рыба', emoji: '🐟', letter: 'Р' },
|
||
{ word: 'Солнце', emoji: '☀️', letter: 'С' },
|
||
{ word: 'Торт', emoji: '🎂', letter: 'Т' },
|
||
{ word: 'Утка', emoji: '🦆', letter: 'У' },
|
||
{ word: 'Флаг', emoji: '🚩', letter: 'Ф' },
|
||
{ word: 'Хлеб', emoji: '🍞', letter: 'Х' },
|
||
{ word: 'Цветок', emoji: '🌸', letter: 'Ц' },
|
||
{ word: 'Часы', emoji: '⏰', letter: 'Ч' },
|
||
{ word: 'Шар', emoji: '🎈', letter: 'Ш' },
|
||
{ word: 'Щётка', emoji: '🪥', letter: 'Щ' },
|
||
{ word: 'Экскаватор', emoji: '🚜', letter: 'Э' },
|
||
{ word: 'Юла', emoji: '🌀', letter: 'Ю' },
|
||
{ word: 'Яблоко', emoji: '🍎', letter: 'Я' }
|
||
];
|
||
|
||
function initFirstLetter() {
|
||
nextFirstLetterQuestion();
|
||
}
|
||
|
||
function nextFirstLetterQuestion() {
|
||
currentFirstLetter = firstLetterWords[Math.floor(Math.random() * firstLetterWords.length)];
|
||
document.getElementById('firstletter-feedback').textContent = '';
|
||
document.getElementById('firstletter-feedback').className = 'feedback';
|
||
document.getElementById('next-firstletter-btn').classList.add('hidden');
|
||
|
||
document.getElementById('word-display').innerHTML =
|
||
'<span class="emoji">' + currentFirstLetter.emoji + '</span><span>' + currentFirstLetter.word + '</span>';
|
||
|
||
const letters = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я'];
|
||
const options = [currentFirstLetter.letter];
|
||
|
||
while (options.length < 6) {
|
||
const random = letters[Math.floor(Math.random() * letters.length)];
|
||
if (!options.includes(random)) {
|
||
options.push(random);
|
||
}
|
||
}
|
||
|
||
options.sort(() => Math.random() - 0.5);
|
||
|
||
const container = document.getElementById('letter-options');
|
||
container.innerHTML = '';
|
||
|
||
options.forEach(letter => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'letter-option';
|
||
btn.textContent = letter;
|
||
btn.onclick = () => checkFirstLetter(letter, btn);
|
||
container.appendChild(btn);
|
||
});
|
||
}
|
||
|
||
function checkFirstLetter(selected, button) {
|
||
const buttons = document.querySelectorAll('.letter-option');
|
||
buttons.forEach(btn => btn.disabled = true);
|
||
|
||
if (selected === currentFirstLetter.letter) {
|
||
button.classList.add('correct');
|
||
document.getElementById('firstletter-feedback').textContent = '🎉 Правильно! Это буква ' + selected;
|
||
document.getElementById('firstletter-feedback').className = 'feedback success';
|
||
speak('Правильно! Первая буква ' + selected);
|
||
document.getElementById('next-firstletter-btn').classList.remove('hidden');
|
||
} else {
|
||
button.classList.add('wrong');
|
||
document.getElementById('firstletter-feedback').textContent = 'Попробуй ещё раз!';
|
||
document.getElementById('firstletter-feedback').className = 'feedback error';
|
||
speak('Попробуй ещё раз');
|
||
|
||
setTimeout(() => {
|
||
buttons.forEach(btn => {
|
||
btn.disabled = false;
|
||
btn.classList.remove('wrong');
|
||
});
|
||
document.getElementById('firstletter-feedback').textContent = '';
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
// ===== ИГРА 8: Слоги =====
|
||
const syllableWords = [
|
||
{ word: 'МА-ШИ-НА', syllables: ['МА', 'ШИ', 'НА'], scrambled: ['НА', 'МА', 'ШИ'] },
|
||
{ word: 'МО-ЛО-КО', syllables: ['МО', 'ЛО', 'КО'], scrambled: ['КО', 'МО', 'ЛО'] },
|
||
{ word: 'СО-БА-КА', syllables: ['СО', 'БА', 'КА'], scrambled: ['КА', 'СО', 'БА'] },
|
||
{ word: 'ЯБ-ЛО-КО', syllables: ['ЯБ', 'ЛО', 'КО'], scrambled: ['КО', 'ЯБ', 'ЛО'] },
|
||
{ word: 'ДЕ-РЕ-ВО', syllables: ['ДЕ', 'РЕ', 'ВО'], scrambled: ['ВО', 'ДЕ', 'РЕ'] },
|
||
{ word: 'МО-РО-ЖЕ-НОЕ', syllables: ['МО', 'РО', 'ЖЕ', 'НОЕ'], scrambled: ['НОЕ', 'МО', 'ЖЕ', 'РО'] },
|
||
{ word: 'ВЕ-ЛО-СИ-ПЕД', syllables: ['ВЕ', 'ЛО', 'СИ', 'ПЕД'], scrambled: ['ПЕД', 'ВЕ', 'СИ', 'ЛО'] },
|
||
{ word: 'ТЕ-ЛЕ-ФОН', syllables: ['ТЕ', 'ЛЕ', 'ФОН'], scrambled: ['ФОН', 'ТЕ', 'ЛЕ'] },
|
||
{ word: 'КА-РАН-ДАШ', syllables: ['КА', 'РАН', 'ДАШ'], scrambled: ['ДАШ', 'КА', 'РАН'] },
|
||
{ word: 'МО-ЛО-ТOK', syllables: ['МО', 'ЛО', 'ТОК'], scrambled: ['ТОК', 'МО', 'ЛО'] }
|
||
];
|
||
|
||
function initSyllable() {
|
||
resetSyllable();
|
||
}
|
||
|
||
function resetSyllable() {
|
||
currentSyllable = syllableWords[Math.floor(Math.random() * syllableWords.length)];
|
||
syllableState = [];
|
||
document.getElementById('syllable-feedback').textContent = '';
|
||
document.getElementById('syllable-feedback').className = 'feedback';
|
||
|
||
document.getElementById('syllable-target').textContent = currentSyllable.word;
|
||
|
||
const piecesContainer = document.getElementById('syllable-pieces');
|
||
piecesContainer.innerHTML = '';
|
||
|
||
currentSyllable.scrambled.forEach((syllable, index) => {
|
||
const piece = document.createElement('div');
|
||
piece.className = 'syllable-piece';
|
||
piece.textContent = syllable;
|
||
piece.dataset.index = index;
|
||
piece.onclick = () => selectSyllablePiece(index, piece);
|
||
piecesContainer.appendChild(piece);
|
||
});
|
||
|
||
const slotsContainer = document.getElementById('syllable-slots');
|
||
slotsContainer.innerHTML = '';
|
||
|
||
for (let i = 0; i < currentSyllable.syllables.length; i++) {
|
||
const slot = document.createElement('div');
|
||
slot.className = 'syllable-slot';
|
||
slot.dataset.slot = i;
|
||
slot.textContent = '...';
|
||
slot.onclick = () => placeSyllableInSlot(i);
|
||
slotsContainer.appendChild(slot);
|
||
}
|
||
}
|
||
|
||
let selectedSyllablePiece = null;
|
||
|
||
function selectSyllablePiece(index, element) {
|
||
document.querySelectorAll('.syllable-piece').forEach(p => p.classList.remove('selected'));
|
||
element.classList.add('selected');
|
||
selectedSyllablePiece = { index, element, value: currentSyllable.scrambled[index] };
|
||
}
|
||
|
||
function placeSyllableInSlot(slotIndex) {
|
||
if (!selectedSyllablePiece) return;
|
||
|
||
const slots = document.querySelectorAll('.syllable-slot');
|
||
const slot = slots[slotIndex];
|
||
|
||
if (slot.classList.contains('filled')) {
|
||
const oldSyllable = slot.textContent;
|
||
const piecesContainer = document.getElementById('syllable-pieces');
|
||
const oldPiece = document.createElement('div');
|
||
oldPiece.className = 'syllable-piece';
|
||
oldPiece.textContent = oldSyllable;
|
||
oldPiece.onclick = () => selectSyllablePiece(-1, oldPiece);
|
||
piecesContainer.appendChild(oldPiece);
|
||
}
|
||
|
||
slot.textContent = selectedSyllablePiece.value;
|
||
slot.classList.add('filled');
|
||
syllableState[slotIndex] = selectedSyllablePiece.value;
|
||
|
||
if (selectedSyllablePiece.element.parentNode.id === 'syllable-pieces') {
|
||
selectedSyllablePiece.element.remove();
|
||
}
|
||
|
||
selectedSyllablePiece = null;
|
||
document.querySelectorAll('.syllable-piece').forEach(p => p.classList.remove('selected'));
|
||
}
|
||
|
||
function checkSyllable() {
|
||
const filledSlots = syllableState.filter(s => s !== undefined);
|
||
if (filledSlots.length < currentSyllable.syllables.length) {
|
||
document.getElementById('syllable-feedback').textContent = 'Заполни все ячейки!';
|
||
document.getElementById('syllable-feedback').className = 'feedback error';
|
||
speak('Заполни все ячейки');
|
||
return;
|
||
}
|
||
|
||
const isCorrect = JSON.stringify(syllableState) === JSON.stringify(currentSyllable.syllables);
|
||
|
||
if (isCorrect) {
|
||
document.getElementById('syllable-feedback').textContent = '🌟 Отлично! Слово собрано правильно!';
|
||
document.getElementById('syllable-feedback').className = 'feedback success';
|
||
speak('Молодец! Всё правильно!');
|
||
} else {
|
||
document.getElementById('syllable-feedback').textContent = 'Попробуй ещё раз!';
|
||
document.getElementById('syllable-feedback').className = 'feedback error';
|
||
speak('Попробуй ещё раз');
|
||
}
|
||
}
|
||
|
||
// ===== Утилита: Синтез речи =====
|
||
function speak(text) {
|
||
if ('speechSynthesis' in window) {
|
||
const utterance = new SpeechSynthesisUtterance(text);
|
||
utterance.lang = 'ru-RU';
|
||
utterance.rate = 0.9;
|
||
utterance.pitch = 1.1;
|
||
speechSynthesis.speak(utterance);
|
||
}
|
||
}
|
||
|
||
// Инициализация
|
||
showMenu();
|