La IA como herramienta para crear juegos web: Enseñando a escolares
Los escolares ya habían dominado HTML y CSS básicos. Antes de usar IA, necesitaban desarrollar la habilidad de leer código de otros. La tarea: abrir un archivo con comentarios, cambiar el valor de background-color en una línea específica, guardar y actualizar la página en el navegador. Este enfoque vincula rápidamente los cambios de código con resultados visuales, reduciendo el miedo a fuentes desconocidas.
Luego, pasaron a la creación de prototipos en papel. Eligieron una mecánica de juego al estilo Whac-A-Mole con personalización: en lugar de objetos estándar, fotos de estudiantes en estado normal y con las mejillas hinchadas cuando se activan.
Lógica del juego y selección de tecnologías
Elementos clave de la mecánica:
Google AdInline article slot
- Una cuadrícula de 3×3 celdas (agujeros).
- Aparición aleatoria de una imagen activa cada 5 segundos.
- La velocidad aumenta con cada ciclo.
- Hacer clic en una celda activa la devuelve a su estado normal.
- Condición de pérdida: las 9 celdas activas simultáneamente—entrada bloqueada durante 5 segundos, parpadeo, ventana modal para reiniciar.
Tecnologías usadas: HTML, CSS y JavaScript puros en un solo archivo. Ventajas de aprendizaje:
- Sin configuración de entorno—solo se necesita un navegador.
- Retroalimentación instantánea con F5.
- Portabilidad completa: un archivo HTML funciona en todas partes.
Para el prototipo, usaron imágenes de gatitos: base y reacción (generadas por IA mediante prompt).
Creando un prompt efectivo
La IA se percibe como una herramienta de ejecución que requiere descripción detallada. Junto con los niños, compusieron un prompt para Gemini:
Google AdInline article slot
Detalles:
- Rol: desarrollador frontend experimentado.
- Juego: análogo a Whac-A-Mole con fotos (normales y con mejillas hinchadas).
- Estilo: fondo claro, centrado.
- Campo: panel blanco 3×3 con esquinas redondeadas y sombra.
- Celdas: 9 imágenes con efecto de presión, responsivas en móviles.
- 18 archivos: photo1_normal.jpg ... photo9_highlighted.jpg.
- Lógica: temporizadores, aceleración, fin del juego, modal con desenfoque.
- Requisitos: archivo único, JS moderno, comentarios, sin resaltados en móviles.
Resultado: Código del juego listo
La IA entregó un prototipo funcional en segundos. Después de ajustes mínimos, la versión final estuvo lista. El código usa variables CSS, Flexbox/Grid, backdrop-filter, transiciones modernas y media queries.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¡Gatitos!</title>
<style>
/* Variables para ajustar fácilmente tamaños y colores en un solo lugar */
:root {
--bg-color: #f0f2f5;
--grid-gap: 15px;
--cell-size: 180px;
--text-color: #333;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--bg-color);
font-family: 'Segoe UI', Tahoma, sans-serif;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.main-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.instructions {
text-align: center;
color: var(--text-color);
font-size: 1.8rem;
line-height: 1.4;
margin-bottom: 25px;
font-weight: 500;
}
.game-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: var(--grid-gap);
padding: 20px;
background: white;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
position: relative;
}
.game-container.disabled {
pointer-events: none;
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
overflow: hidden;
border-radius: 16px;
cursor: pointer;
transition: transform 0.1s ease;
background: #f9f9f9;
}
.cell:active {
transform: scale(0.96);
}
.cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-content {
background: white;
padding: 50px;
border-radius: 30px;
text-align: center;
box-shadow: 0 15px 60px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.3);
}
.modal-content h2 {
margin: 0 0 30px 0;
font-size: 28px;
color: #222;
}
.modal-content button {
background: #222;
color: white;
border: none;
padding: 16px 50px;
font-size: 18px;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-content button:hover {
background: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (max-width: 650px) {
:root {
--cell-size: 28vw;
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="instructions">¡Haz clic en los gatitos con las mejillas hinchadas!</div>
<div class="game-container" id="gameContainer">
<!-- 9 celdas serán generadas por JS -->
</div>
</div>
<div id="modal">
<div class="modal-content">
<h2>😿 ¡Todos los gatitos tienen las mejillas hinchadas!</h2>
<p>¿Intentar de nuevo?</p>
<button onclick="resetGame()">¡Sí!</button>
</div>
</div>
<script>
let gameActive = true;
let activeCell = null;
let intervalId = null;
let speed = 5000;
let highlightedCount = 0;
const cells = [];
const totalCells = 9;
const images = {
1: { normal: 'photo1_normal.jpg', highlighted: 'photo1_highlighted.jpg' },
2: { normal: 'photo2_normal.jpg', highlighted: 'photo2_highlighted.jpg' },
// ... hasta 9
};
function initGame() {
const container = document.getElementById('gameContainer');
container.innerHTML = '';
cells.length = 0;
highlightedCount = 0;
for (let i = 1; i <= totalCells; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
const img = document.createElement('img');
img.src = images[i].normal;
img.alt = `Gatito ${i}`;
cell.appendChild(img);
cell.addEventListener('click', handleClick);
container.appendChild(cell);
cells.push(cell);
}
startGameLoop();
}
function startGameLoop() {
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (!gameActive || highlightedCount >= totalCells) return;
const availableCells = cells.filter(cell => !cell.classList.contains('highlighted'));
if (availableCells.length === 0) return;
const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
activateCell(randomCell);
}, speed);
}
function activateCell(cell) {
cell.classList.add('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].highlighted;
highlightedCount++;
if (highlightedCount >= totalCells) {
gameOver();
}
}
function handleClick(e) {
const cell = e.currentTarget;
if (!cell.classList.contains('highlighted') || !gameActive) return;
cell.classList.remove('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].normal;
highlightedCount--;
}
function gameOver() {
gameActive = false;
clearInterval(intervalId);
const container = document.getElementById('gameContainer');
container.classList.add('disabled');
const blinkInterval = setInterval(() => {
cells.forEach(cell => {
const img = cell.querySelector('img');
const index = parseInt(cell.dataset.index);
img.src = cell.classList.contains('blinking') ?
images[index].normal : images[index].highlighted;
cell.classList.toggle('blinking');
});
}, 500);
setTimeout(() => {
clearInterval(blinkInterval);
document.getElementById('modal').style.display = 'flex';
}, 5000);
}
function resetGame() {
document.getElementById('modal').style.display = 'none';
document.getElementById('gameContainer').classList.remove('disabled');
speed = Math.max(1000, speed - 500);
gameActive = true;
initGame();
}
window.addEventListener('load', initGame);
</script>
</body>
</html>Conclusiones clave
- Los prompts detallados aceleran la generación: Especificar rol, estilo, mecánicas y requisitos de código produce un prototipo funcional en segundos.
- Leer código antes de usar IA: Las habilidades básicas de análisis reducen la barrera para experimentar.
- Prototipado en papel: Visualizar la lógica antes de codificar simplifica la tarea para la IA.
- Archivo único para todo: Ideal para aprendizaje y distribución.
- Responsividad y efectos: CSS Grid, variables y backdrop-filter garantizan una UX moderna.
— Editorial Team
Google AdInline article slot
Aún no hay comentarios.