* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Comic Sans MS’, sans-serif, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.game-container {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
max-width: 600px;
width: 100%;
text-align: center;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.score-info {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
font-size: 1.2em;
font-weight: bold;
}
.score {
color: #4CAF50;
}
.question-counter {
color: #2196F3;
}
.question-container {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
margin-bottom: 20px;
border: 3px solid #e9ecef;
}
.question {
font-size: 1.5em;
margin-bottom: 25px;
color: #333;
}
.word {
font-weight: bold;
color: #e91e63;
font-size: 1.8em;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.option {
background: linear-gradient(45deg, #3f51b5, #5c6bc0);
color: white;
border: none;
border-radius: 12px;
padding: 15px 20px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
}
.option:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.option.correct {
background: linear-gradient(45deg, #4CAF50, #66BB6A);
animation: pulse 0.6s;
}
.option.incorrect {
background: linear-gradient(45deg, #f44336, #ef5350);
animation: shake 0.6s;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.next-button {
background: linear-gradient(45deg, #ff9800, #ffa726);
color: white;
border: none;
border-radius: 25px;
padding: 12px 30px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
margin-top: 15px;
}
.next-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255,152,0,0.4);
}
.restart-button {
background: linear-gradient(45deg, #9c27b0, #ba68c8);
color: white;
border: none;
border-radius: 25px;
padding: 15px 35px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
margin-top: 20px;
}
.restart-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(156,39,176,0.4);
}
.final-score {
font-size: 2em;
margin: 20px 0;
color: #333;
}
.feedback {
font-size: 1.3em;
margin: 15px 0;
font-weight: bold;
}
.feedback.correct {
color: #4CAF50;
}
.feedback.incorrect {
color: #f44336;
}
.hidden {
display: none;
}
@media (max-width: 600px) {
.options {
grid-template-columns: 1fr;
}
h1 {
font-size: 2em;
}
.question {
font-size: 1.3em;
}
}
🎯 Clasificación de Sustantivos
La palabra es:
🎉 ¡Juego Terminado!
// Base de datos de sustantivos organizados por categorías (50 palabras cada una)
const nouns = {
personas: [‘niño’, ‘doctor’, ‘maestra’, ‘enfermera’, ‘policía’, ‘bombero’, ‘dentista’, ‘veterinario’, ‘cocinero’, ‘artista’, ‘músico’, ‘escritor’, ‘bailarín’, ‘actor’, ‘cantante’, ‘pintor’, ‘científico’, ‘ingeniero’, ‘abogado’, ‘juez’, ‘presidente’, ‘alcalde’, ‘secretaria’, ‘cajero’, ‘mecánico’, ‘carpintero’, ‘electricista’, ‘plomero’, ‘jardinero’, ‘chofer’, ‘piloto’, ‘soldado’, ‘marinero’, ‘estudiante’, ‘profesor’, ‘director’, ‘bibliotecario’, ‘farmacéutico’, ‘psicólogo’, ‘terapeuta’, ‘masajista’, ‘estilista’, ‘barbero’, ‘sastre’, ‘zapatero’, ‘joyero’, ‘relojero’, ‘fotógrafo’, ‘periodista’],
animales: [‘pájaro’, ‘pez’, ‘perro’, ‘gato’, ‘caballo’, ‘vaca’, ‘cerdo’, ‘oveja’, ‘cabra’, ‘pollo’, ‘pato’, ‘ganso’, ‘pavo’, ‘conejo’, ‘ratón’, ‘rata’, ‘ardilla’, ‘zorro’, ‘lobo’, ‘oso’, ‘león’, ‘tigre’, ‘elefante’, ‘jirafa’, ‘cebra’, ‘hipopótamo’, ‘rinoceronte’, ‘mono’, ‘gorila’, ‘chimpancé’, ‘koala’, ‘canguro’, ‘pingüino’, ‘foca’, ‘ballena’, ‘delfín’, ‘tiburón’, ‘pulpo’, ‘medusa’, ‘cangrejo’, ‘langosta’, ‘mariposa’, ‘abeja’, ‘hormiga’, ‘araña’, ‘serpiente’, ‘lagarto’, ‘rana’, ‘tortuga’],
cosas: [‘mesa’, ‘juguete’, ‘silla’, ‘cama’, ‘sofá’, ‘televisor’, ‘computadora’, ‘teléfono’, ‘libro’, ‘cuaderno’, ‘lápiz’, ‘bolígrafo’, ‘regla’, ‘tijeras’, ‘martillo’, ‘destornillador’, ‘cuchillo’, ‘tenedor’, ‘cuchara’, ‘plato’, ‘vaso’, ‘taza’, ‘botella’, ‘caja’, ‘bolsa’, ‘maleta’, ‘reloj’, ‘collar’, ‘anillo’, ‘zapato’, ‘camisa’, ‘pantalón’, ‘sombrero’, ‘pelota’, ‘bicicleta’, ‘automóvil’, ‘avión’, ‘barco’, ‘tren’, ‘piano’, ‘guitarra’, ‘violín’, ‘tambor’, ‘cámara’, ‘espejo’, ‘lámpara’, ‘ventana’, ‘puerta’, ‘escalera’],
lugares: [‘ciudad’, ‘río’, ‘montaña’, ‘bosque’, ‘desierto’, ‘playa’, ‘océano’, ‘lago’, ‘parque’, ‘plaza’, ‘calle’, ‘avenida’, ‘casa’, ‘edificio’, ‘escuela’, ‘hospital’, ‘biblioteca’, ‘museo’, ‘teatro’, ‘cine’, ‘restaurante’, ‘cafetería’, ‘tienda’, ‘mercado’, ‘banco’, ‘iglesia’, ‘templo’, ‘estadio’, ‘gimnasio’, ‘piscina’, ‘jardín’, ‘granja’, ‘fábrica’, ‘oficina’, ‘aeropuerto’, ‘estación’, ‘puerto’, ‘puente’, ‘túnel’, ‘cueva’, ‘isla’, ‘península’, ‘valle’, ‘colina’, ‘pradera’, ‘selva’, ‘volcán’, ‘glaciar’, ‘cascada’]
};
const categories = [‘personas’, ‘animales’, ‘cosas’, ‘lugares’];
let currentQuestion = 0;
let score = 0;
let totalQuestions = 10;
let gameData = [];
let answered = false;
function initGame() {
currentQuestion = 0;
score = 0;
answered = false;
gameData = generateGameData();
updateDisplay();
showQuestion();
}
function generateGameData() {
let questions = [];
let usedWords = new Set(); // Para evitar repeticiones
// Crear un pool de todas las palabras disponibles con su categoría
let wordPool = [];
categories.forEach((category, categoryIndex) => {
nouns[category].forEach(word => {
wordPool.push({
word: word,
correctAnswer: categoryIndex,
category: category
});
});
});
// Mezclar el pool de palabras
wordPool = shuffleArray(wordPool);
// Seleccionar palabras únicas para las preguntas
for (let i = 0; i < totalQuestions && i 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
function updateDisplay() {
document.getElementById(‘score’).textContent = score;
document.getElementById(‘current’).textContent = currentQuestion + 1;
document.getElementById(‘total’).textContent = totalQuestions;
}
function showQuestion() {
if (currentQuestion >= totalQuestions) {
showFinalScreen();
return;
}
const question = gameData[currentQuestion];
document.getElementById(‘word’).textContent = question.word;
// Resetear botones
const buttons = document.querySelectorAll(‘.option’);
buttons.forEach(button => {
button.className = ‘option’;
button.disabled = false;
});
// Ocultar feedback y botón siguiente
document.getElementById(‘feedback’).classList.add(‘hidden’);
document.getElementById(‘next-btn’).classList.add(‘hidden’);
answered = false;
}
function selectAnswer(selectedIndex) {
if (answered) return;
answered = true;
const question = gameData[currentQuestion];
const buttons = document.querySelectorAll(‘.option’);
const feedbackElement = document.getElementById(‘feedback’);
// Deshabilitar todos los botones
buttons.forEach(button => button.disabled = true);
if (selectedIndex === question.correctAnswer) {
// Respuesta correcta
buttons[selectedIndex].classList.add(‘correct’);
score++;
feedbackElement.textContent = ‘¡Correcto! 🎉’;
feedbackElement.className = ‘feedback correct’;
} else {
// Respuesta incorrecta
buttons[selectedIndex].classList.add(‘incorrect’);
buttons[question.correctAnswer].classList.add(‘correct’);
feedbackElement.textContent = `Incorrecto. La respuesta correcta es: ${getCategoryName(question.correctAnswer)}`;
feedbackElement.className = ‘feedback incorrect’;
}
// Mostrar feedback y botón siguiente
feedbackElement.classList.remove(‘hidden’);
document.getElementById(‘next-btn’).classList.remove(‘hidden’);
updateDisplay();
}
function getCategoryName(index) {
const names = [‘Persona’, ‘Animal’, ‘Cosa’, ‘Lugar’];
return names[index];
}
function nextQuestion() {
currentQuestion++;
showQuestion();
}
function showFinalScreen() {
document.getElementById(‘game-area’).classList.add(‘hidden’);
document.getElementById(‘final-screen’).classList.remove(‘hidden’);
document.getElementById(‘final-score’).textContent = score;
let message = ”;
const percentage = (score / totalQuestions) * 100;
if (percentage === 100) {
message = ‘🏆 ¡Perfecto! Eres un experto en sustantivos.’;
} else if (percentage >= 80) {
message = ‘🌟 ¡Excelente trabajo! Dominas muy bien los sustantivos.’;
} else if (percentage >= 60) {
message = ‘👍 ¡Bien hecho! Sigue practicando para mejorar.’;
} else if (percentage >= 40) {
message = ‘📚 Necesitas practicar más. ¡No te rindas!’;
} else {
message = ‘💪 ¡Sigue intentando! La práctica hace al maestro.’;
}
document.getElementById(‘final-message’).textContent = message;
}
function restartGame() {
document.getElementById(‘game-area’).classList.remove(‘hidden’);
document.getElementById(‘final-screen’).classList.add(‘hidden’);
initGame();
}
// Inicializar el juego cuando la página se carga
window.onload = function() {
initGame();
};