NeuroMente - Memoria rápida
by GoldenGlider46645 lines8.6 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroMente - Memoria rápida</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: 850px;
text-align: center;
}
h1 {
margin: 0 0 5px;
font-size: 40px;
color: #263b70;
}
.level {
font-size: 23px;
font-weight: bold;
color: #263b70;
margin-bottom: 5px;
}
.instructions {
font-size: 18px;
color: #34445c;
margin-bottom: 18px;
}
.info {
display: flex;
justify-content: center;
gap: 35px;
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
}
.board {
display: grid;
gap: 12px;
width: min(90vw, 650px);
margin: auto;
}
.card {
border: none;
background: transparent;
cursor: pointer;
perspective: 800px;
padding: 0;
aspect-ratio: 1 / 1;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flipped .card-inner,
.card.matched .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 16px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}
.card-front {
background: #ffffff;
border: 4px solid #8ac9e8;
font-size: clamp(30px, 6vw, 55px);
transform: rotateY(180deg);
}
.card-back {
background: #9bd8ed;
border: 4px solid #ffffff;
color: #263b70;
font-size: clamp(12px, 2vw, 22px);
font-weight: bold;
padding: 5px;
}
.message {
min-height: 55px;
margin-top: 20px;
font-size: 21px;
font-weight: bold;
color: #263b70;
}
button.restart,
button.next {
margin-top: 10px;
padding: 12px 28px;
border: none;
border-radius: 25px;
background: #263b70;
color: white;
font-size: 17px;
font-weight: bold;
cursor: pointer;
}
button.restart:hover,
button.next:hover {
transform: scale(1.05);
}
button.next {
display: none;
}
@media (max-width: 600px) {
body {
padding: 15px;
}
h1 {
font-size: 31px;
}
.info {
gap: 18px;
font-size: 15px;
}
.board {
gap: 8px;
}
}
</style>
</head>
<body>
<div class="game">
<h1>🧠 Memoria rápida</h1>
<div class="level">
Nivel <span id="level">1</span> / 5
</div>
<div class="instructions">
Encuentra todas las parejas y demuestra tu memoria.
</div>
<div class="info">
<div>
Intentos:
<span id="moves">0</span>
</div>
<div>
Parejas:
<span id="pairs">0</span>/<span id="totalPairs">3</span>
</div>
</div>
<div class="board" id="board"></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 = [
/* NIVEL 1 */
[
"⭐",
"🌸",
"🦋"
],
/* NIVEL 2 */
[
"🧠",
"⭐",
"🌸",
"🦋"
],
/* NIVEL 3 */
[
"🧠",
"🧩",
"🐻",
"⭐",
"🌸"
],
/* NIVEL 4 */
[
"🧠",
"🧩",
"🔴",
"🟢",
"🟡",
"🐻"
],
/* NIVEL 5 */
[
"🧠",
"🧩",
"🔴",
"🟢",
"🟡",
"🐻",
"⭐",
"🦋"
]
];
let currentLevel = 0;
let firstCard = null;
let secondCard = null;
let lockBoard = false;
let moves = 0;
let pairs = 0;
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
function getColumns(pairCount) {
const cards = pairCount * 2;
if (cards <= 6) {
return 3;
}
if (cards <= 10) {
return 4;
}
return 4;
}
function startLevel() {
const board =
document.getElementById("board");
board.innerHTML = "";
document.getElementById("message")
.textContent = "";
document.getElementById("nextButton")
.style.display = "none";
moves = 0;
pairs = 0;
firstCard = null;
secondCard = null;
lockBoard = false;
const symbols = levels[currentLevel];
const cards = [
...symbols,
...symbols
];
const shuffledCards = shuffle(cards);
document.getElementById("level")
.textContent = currentLevel + 1;
document.getElementById("moves")
.textContent = moves;
document.getElementById("pairs")
.textContent = pairs;
document.getElementById("totalPairs")
.textContent = symbols.length;
const columns =
getColumns(symbols.length);
board.style.gridTemplateColumns =
`repeat(${columns}, 1fr)`;
shuffledCards.forEach(symbol => {
const card =
document.createElement("button");
card.className = "card";
card.dataset.symbol = symbol;
card.innerHTML = `
<div class="card-inner">
<div class="card-front">
${symbol}
</div>
<div class="card-back">
🧠 NeuroMente
</div>
</div>
`;
card.addEventListener(
"click",
flipCard
);
board.appendChild(card);
});
}
function flipCard() {
if (lockBoard)
return;
if (this === firstCard)
return;
if (
this.classList.contains("matched")
)
return;
this.classList.add("flipped");
if (!firstCard) {
firstCard = this;
return;
}
secondCard = this;
moves++;
document.getElementById("moves")
.textContent = moves;
checkMatch();
}
function checkMatch() {
const match =
firstCard.dataset.symbol ===
secondCard.dataset.symbol;
if (match) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
pairs++;
document.getElementById("pairs")
.textContent = pairs;
resetTurn();
if (
pairs ===
levels[currentLevel].length
) {
levelComplete();
}
}
else {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove(
"flipped"
);
secondCard.classList.remove(
"flipped"
);
resetTurn();
}, 900);
}
}
function resetTurn() {
firstCard = null;
secondCard = null;
lockBoard = false;
}
function levelComplete() {
const message =
document.getElementById("message");
if (currentLevel < 4) {
message.textContent =
"🎉 ¡Nivel superado! ¡Prepárate para el siguiente!";
document.getElementById(
"nextButton"
).style.display = "inline-block";
}
else {
message.textContent =
"🏆 ¡INCREÍBLE! Completaste los 5 niveles.";
document.getElementById(
"nextButton"
).style.display = "none";
}
}
function nextLevel() {
if (currentLevel < 4) {
currentLevel++;
startLevel();
}
}
function restartGame() {
currentLevel = 0;
startLevel();
}
startLevel();
</script>
</body>
</html>Game Source: NeuroMente - Memoria rápida
Creator: GoldenGlider46
Libraries: none
Complexity: complex (645 lines, 8.6 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-memoria-r-pida-goldenglider46" to link back to the original. Then publish at arcadelab.ai/publish.