350 lines
11 KiB
JavaScript
350 lines
11 KiB
JavaScript
// Данные для игр
|
||
const cardData = {
|
||
animals: [
|
||
{ 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: 'Вишня' }
|
||
],
|
||
transport: [
|
||
{ 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: 'Белый' }
|
||
]
|
||
};
|
||
|
||
const sounds = ['А', 'О', 'У', 'Ы', 'Э', 'М', 'П', 'Б', 'Т', 'Д'];
|
||
|
||
const animalSounds = [
|
||
{ 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: ['🌙', '🌅', '☀️']
|
||
}
|
||
];
|
||
|
||
// Состояние игры
|
||
let currentCategory = 'animals';
|
||
let currentCardIndex = 0;
|
||
let currentSoundIndex = 0;
|
||
let currentQuestion = null;
|
||
let currentStory = null;
|
||
let selectedPiece = null;
|
||
let storyState = [];
|
||
|
||
// Навигация
|
||
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();
|
||
}
|
||
|
||
// Клик по карточкам игр
|
||
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('Попробуй ещё раз');
|
||
}
|
||
}
|
||
|
||
// ===== Утилита: Синтез речи =====
|
||
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();
|