NeuroMente - ¿Qué sigue?

by GoldenGlider46
354 lines5.9 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroMente - ¿Qué sigue?</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background: #dff6ff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
}

.game {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

h1 {
    color: #263b70;
    font-size: 40px;
    margin: 0 0 8px;
}

.level {
    color: #263b70;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 8px;
}

.instructions {
    color: #34445c;
    font-size: 18px;
    margin-bottom: 25px;
}

.sequence {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.cube {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.red {
    background: #ef6b6b;
}

.green {
    background: #76c893;
}

.yellow {
    background: #f5d76e;
}

.blue {
    background: #73b7e8;
}

.question {
    background: white;
    border: 4px dashed #263b70;
    color: #263b70;
}

.options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.option {
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 40px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.option:hover {
    transform: scale(1.08);
}

.message {
    min-height: 50px;
    margin-top: 25px;
    color: #263b70;
    font-size: 21px;
    font-weight: bold;
}

button.restart,
button.next {
    margin-top: 12px;
    padding: 12px 28px;
    border: none;
    border-radius: 25px;
    background: #263b70;
    color: white;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}

button.next {
    display: none;
}

button.restart:hover,
button.next:hover {
    transform: scale(1.05);
}

@media (max-width: 500px) {
    h1 {
        font-size: 30px;
    }

    .cube {
        width: 55px;
        height: 55px;
        font-size: 30px;
    }

    .option {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }
}
</style>
</head>

<body>

<div class="game">

<h1>🔢 ¿Qué sigue?</h1>

<div class="level">
Nivel <span id="level">1</span> / 5
</div>

<div class="instructions">
Observa el patrón y elige qué elemento debe continuar.
</div>

<div class="sequence" id="sequence"></div>

<div class="options" id="options"></div>

<div class="message" id="message"></div>

<button class="next" id="nextButton" onclick="nextLevel()">
⭐ Siguiente nivel
</button>

<br>

<button class="restart" onclick="restartGame()">
🔄 Reiniciar juego
</button>

</div>

<script>

const levels = [

{
    sequence: ["🟥","🟦","🟥","🟦","❓"],
    answer: "🟥",
    options: ["🟥","🟦","🟩"]
},

{
    sequence: ["🟩","🟨","🟩","🟨","🟩","❓"],
    answer: "🟨",
    options: ["🟥","🟨","🟦"]
},

{
    sequence: ["🔴","🟢","🟡","🔴","🟢","❓"],
    answer: "🟡",
    options: ["🟡","🔵","🔴","🟢"]
},

{
    sequence: ["🟥","🟦","🟨","🟥","🟦","🟨","❓"],
    answer: "🟥",
    options: ["🟥","🟩","🟦","🟨"]
},

{
    sequence: ["🔴","🟢","🟡","🔵","🔴","🟢","🟡","❓"],
    answer: "🔵",
    options: ["🟡","🔵","🟢","🔴"]
}

];

let currentLevel = 0;
let answered = false;

function startLevel() {

    answered = false;

    const level = levels[currentLevel];

    document.getElementById("level").textContent =
        currentLevel + 1;

    document.getElementById("message").textContent = "";

    document.getElementById("nextButton").style.display =
        "none";

    const sequence =
        document.getElementById("sequence");

    sequence.innerHTML = "";

    level.sequence.forEach(item => {

        const cube = document.createElement("div");

        cube.className = "cube";

        if (item === "❓") {
            cube.classList.add("question");
        }

        cube.textContent = item;

        sequence.appendChild(cube);

    });

    const options =
        document.getElementById("options");

    options.innerHTML = "";

    level.options.forEach(option => {

        const button =
            document.createElement("button");

        button.className = "option";

        button.textContent = option;

        button.onclick = () =>
            checkAnswer(option);

        options.appendChild(button);

    });
}

function checkAnswer(answer) {

    if (answered) return;

    answered = true;

    const correct =
        levels[currentLevel].answer;

    const message =
        document.getElementById("message");

    if (answer === correct) {

        message.textContent =
            "🎉 ¡Correcto! Muy bien.";

        if (currentLevel < 4) {

            document.getElementById(
                "nextButton"
            ).style.display = "inline-block";

        } else {

            message.textContent =
                "🏆 ¡Excelente! Completaste los 5 niveles.";

        }

    } else {

        message.textContent =
            "❌ Casi. Observa el patrón otra vez.";

        answered = false;

    }
}

function nextLevel() {

    if (currentLevel < 4) {

        currentLevel++;

        startLevel();

    }
}

function restartGame() {

    currentLevel = 0;

    startLevel();

}

startLevel();

</script>

</body>
</html>
Game Source: NeuroMente - ¿Qué sigue?

Creator: GoldenGlider46
Libraries: none
Complexity: complex (354 lines, 5.9 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: neuromente-qu-sigue-goldenglider46" to link back to the original. Then publish at arcadelab.ai/publish.