NeuroMente - ¡Ojo al detalle!
by GoldenGlider46620 lines7.8 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroMente - ¡Ojo al detalle!</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: 20px;
}
.game {
width: 100%;
max-width: 800px;
text-align: center;
}
h1 {
margin: 0 0 5px;
font-size: 40px;
color: #263b70;
}
.level {
font-size: 23px;
font-weight: bold;
color: #263b70;
margin-bottom: 8px;
}
.instructions {
font-size: 18px;
color: #34445c;
margin-bottom: 22px;
}
.grid {
display: grid;
gap: 10px;
width: min(90vw, 600px);
margin: auto;
}
.item {
aspect-ratio: 1 / 1;
border: none;
border-radius: 12px;
background: white;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow:
0 4px 9px rgba(0,0,0,0.12);
transition: transform 0.15s;
}
.item:hover {
transform: scale(1.04);
}
.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.next {
display: none;
}
button.restart:hover,
button.next:hover {
transform: scale(1.05);
}
/* ESTRELLAS */
.star {
width: 65%;
height: 65%;
background: #f5d76e;
clip-path: polygon(
50% 0%,
61% 34%,
98% 34%,
68% 55%,
79% 91%,
50% 70%,
21% 91%,
32% 55%,
2% 34%,
39% 34%
);
}
/* ESTRELLA DE 7 PUNTAS */
.star7 {
width: 65%;
height: 65%;
background: #f5d76e;
clip-path: polygon(
50% 0%,
58% 31%,
82% 10%,
72% 40%,
100% 38%,
75% 55%,
94% 78%,
65% 66%,
63% 100%,
50% 70%,
37% 100%,
35% 66%,
6% 78%,
25% 55%,
0% 38%,
28% 40%,
18% 10%,
42% 31%
);
}
/* FORMAS */
.circle {
width: 60%;
height: 60%;
border-radius: 50%;
background: #73b7e8;
}
.square {
width: 55%;
height: 55%;
background: #76c893;
border-radius: 8px;
}
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 60px solid #ef6b6b;
}
.diamond {
width: 55%;
height: 55%;
background: #f5d76e;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="game">
<h1>👀 ¡Ojo al detalle!</h1>
<div class="level">
Nivel <span id="level">1</span> / 5
</div>
<div class="instructions">
Observa cuidadosamente y encuentra el elemento diferente.
</div>
<div
class="grid"
id="grid">
</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 */
{
rows: 3,
cols: 3,
normal: "circle",
different: "square"
},
/* NIVEL 2 */
{
rows: 4,
cols: 4,
normal: "square",
different: "diamond"
},
/* NIVEL 3 */
{
rows: 4,
cols: 4,
normal: "triangle",
different: "triangleRotated"
},
/* NIVEL 4 */
{
rows: 4,
cols: 5,
normal: "star",
different: "starSmall"
},
/* NIVEL 5 */
{
rows: 4,
cols: 4,
normal: "star",
different: "star7"
}
];
let currentLevel = 0;
let correctIndex = 0;
let answered = false;
function createShape(type) {
const shape =
document.createElement("div");
if (type === "circle") {
shape.className =
"circle";
}
else if (type === "square") {
shape.className =
"square";
}
else if (type === "triangle") {
shape.className =
"triangle";
}
else if (type === "triangleRotated") {
shape.className =
"triangle";
shape.style.transform =
"rotate(180deg)";
}
else if (type === "diamond") {
shape.className =
"diamond";
}
else if (type === "star") {
shape.className =
"star";
}
else if (type === "starSmall") {
shape.className =
"star";
shape.style.transform =
"scale(0.90)";
}
else if (type === "star7") {
shape.className =
"star7";
}
return shape;
}
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 grid =
document.getElementById(
"grid"
);
grid.innerHTML = "";
grid.style.gridTemplateColumns =
`repeat(${level.cols}, 1fr)`;
const total =
level.rows *
level.cols;
correctIndex =
Math.floor(
Math.random() * total
);
for (
let i = 0;
i < total;
i++
) {
const button =
document.createElement(
"button"
);
button.className =
"item";
if (i === correctIndex) {
button.appendChild(
createShape(
level.different
)
);
}
else {
button.appendChild(
createShape(
level.normal
)
);
}
button.onclick = () =>
checkAnswer(i);
grid.appendChild(
button
);
}
}
function checkAnswer(index) {
if (answered)
return;
const message =
document.getElementById(
"message"
);
if (index === correctIndex) {
answered = true;
if (currentLevel < 4) {
message.textContent =
"🎉 ¡Muy bien! Encontraste el detalle.";
document.getElementById(
"nextButton"
).style.display =
"inline-block";
}
else {
message.textContent =
"🏆 ¡INCREÍBLE! Encontraste la estrella diferente y completaste los 5 niveles.";
}
}
else {
message.textContent =
"❌ No es esa. Observa con más atención.";
}
}
function nextLevel() {
if (currentLevel < 4) {
currentLevel++;
startLevel();
}
}
function restartGame() {
currentLevel = 0;
startLevel();
}
startLevel();
</script>
</body>
</html>Game Source: NeuroMente - ¡Ojo al detalle!
Creator: GoldenGlider46
Libraries: none
Complexity: complex (620 lines, 7.8 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-ojo-al-detalle-goldenglider46" to link back to the original. Then publish at arcadelab.ai/publish.