«Serpiente» en JavaScript: tu primer proyecto de juego en el navegador

Pantalla de inicio y diseño de la interfaz

Aquí está el HTML mínimo que crea tres estados: inicio, juego y «juego terminado», además de la puntuación y el campo de juego.

<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>
    

¿Qué está pasando aquí?

• #startScreen — pantalla de bienvenida. El botón llama a la función startGame().

• #gameOverScreen — aparece después de la colisión de la serpiente consigo misma o con el borde.

• #score — muestra los puntos actuales.

• <canvas> — el campo de juego en el que se dibuja la serpiente y la comida.

  

Glosario rápido de términos 👇

• Canvas — Elemento HTML para dibujo 2D. A través de JavaScript, puedes dibujar manualmente cuadrados, líneas y figuras.

• Cuadrícula (grid) — el campo se divide en cuadrados iguales (por ejemplo, 16×16 píxeles). Todas las coordenadas de la serpiente y la comida se expresan a través de las celdas.

• Ciclo del juego (game loop) — función que actualiza regularmente el estado del juego y redibuja el campo.

• Colisiones (collisions) — comprobar si la serpiente se ha chocado contra sí misma o contra el borde, y si se ha comido la comida.

• Estado (state) - conjunto de variables: coordenadas, dirección del movimiento, puntuación, estado (el juego está en curso o ha terminado).

Cómo animar el juego: ¿lógica en JavaScript?

Añade un script que controle el movimiento de la serpiente, compruebe las colisiones y dibuje cada cuadro:

1. Inicialización: crea canvas y el contexto 2d, define el tamaño de la celda y la matriz de segmentos de la serpiente.

2. Control: realiza un seguimiento de las pulsaciones de teclas ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

3. Ciclo del juego: cada 150 ms mueve la serpiente, comprueba las colisiones, actualiza la puntuación.

4. Dibujo: limpia el campo y dibuja la comida y los segmentos de la serpiente de nuevo.

💡 Consejo: utilice requestAnimationFrame para suavizar y ajuste la frecuencia de movimiento a través del temporizador acumulado.

Ideas para mejorar.

• Añade aceleración: el juego será más difícil con cada nivel.

• Haz «teletransportadores» en los bordes del campo para que la serpiente salga por el otro lado.

• Guarda los registros en localStorage.

• Añade temas claros y oscuros.

• Implementa una pausa en la tecla P o Esc.

Crear el juego «Serpiente» es un excelente primer paso para aprender JavaScript. No solo aprenderás a trabajar con canvas y bucles, sino que también comprenderás los conceptos básicos de la lógica del juego: movimiento, colisiones, estado y actualización de la interfaz.

Proyecto «Serpiente» — parte de los miniproyectos de formación de la aplicación Kodik, creado específicamente para los principiantes. Te ayuda a entender los conceptos básicos de JavaScript, comprender cómo funciona la lógica de los juegos y ver cómo tu código cobra vida directamente en el navegador.

En Codice te esperan decenas de proyectos similares, desde juegos simples hasta pequeñas aplicaciones con interfaz y lógica. Cada uno de ellos es un paso adelante para aprender a escribir código con confianza e interés.

Y también tenemos un acogedor comunidad en Telegram, donde nos ayudamos mutuamente, compartimos ideas y simplemente hablamos de programación. ¡Únete, será genial! 🚀

👉 Nuestra comunidad: https://t.me/coursme