Cómo hacer un juego de serpientes usando HTML, CSS y JavaScript

Un juego de serpientes es un ejercicio de programación clásico que puede utilizar para mejorar sus habilidades de programación y resolución de problemas. Puede crear el juego en un navegador web utilizando HTML, CSS y JavaScript.

En el juego, controlas una serpiente que se mueve alrededor de un tablero. La serpiente crece en tamaño a medida que recolectas comida. El juego terminará si chocas con tu propia cola o con alguna de las paredes.

Cómo crear la interfaz de usuario para el lienzo

Use HTML y CSS para agregar el lienzo para que la serpiente se mueva. Hay muchos otros Proyectos HTML y CSS puedes practicar, si necesitas repasar algún concepto básico.

Puede hacer referencia a este proyecto repositorio GitHub para el código fuente completo.

1. Cree un nuevo archivo llamado "index.html".
2. Abra el archivo usando cualquier editor de texto como Código visual o átomo. Agregue la estructura básica del código HTML:

   html>
   <htmlidioma="en-US">
   <cabeza>
   <título>Juego de serpientestítulo>
   cabeza>
   <cuerpo>
   cuerpo>
   html>

3. Dentro de la etiqueta del cuerpo, agregue un lienzo para representar el tablero de juego de la serpiente.

   <h2>Juego de serpientesh2>
   <divisiónidentificación="juego">
   <lienzoidentificación="serpiente">lienzo>
   división>

4. En la misma carpeta que su archivo HTML, cree un nuevo archivo llamado "styles.css".
5. En el interior, agregue algo de CSS para la página web general. También puede diseñar su sitio web usando otros consejos y trucos esenciales de CSS.

   #juego {
   ancho:400px;
   altura:400px;
   margen:0auto;
   color de fondo:#eee;
   }
   h2 {
   texto alineado:centro;
   Familia tipográfica:Arial;
   tamaño de fuente:36 píxeles;
   } 
   

6. Dentro de su archivo HTML, agregue un enlace al CSS en la etiqueta principal:

   <enlacereal="hoja de estilo"tipo="texto/css"href="estilos.css">

7. Para ver el lienzo, abra su archivo "index.html" en un navegador web.

Cómo dibujar la serpiente

En el siguiente ejemplo, la línea negra representa la serpiente:

Múltiples cuadrados o "segmentos" forman la serpiente. A medida que crece la serpiente, también aumenta el número de cuadrados. Al comienzo del juego, la longitud de la serpiente es de una sola pieza.

1. Dentro de su archivo HTML, enlace a un nuevo archivo JavaScript en la parte inferior de la etiqueta del cuerpo:

   <cuerpo>
    Tu código aquí 
   <guionorigen="script.js">guion>
   cuerpo>

2. Cree script.js y comience obteniendo el elemento DOM del lienzo:

   variable lienzo = documento.getElementById("serpiente");

3. Establezca el contexto para el elemento HTML del lienzo. En este caso, desea que el juego represente un lienzo en 2D. Esto le permitirá dibujar múltiples formas o imágenes en el elemento HTML.

   variable lienzo2d = lienzo.getContext("2d");

4. Establezca otras variables en el juego, como si el juego ha terminado y la altura y el ancho del lienzo:

   variable juegoTerminado = FALSO;
   lienzo.ancho = 400;
   lienzo.altura = 400;

5. Declare una variable llamada "snakeSegments". Esto contendrá el número de "cuadrados" que ocupará la serpiente. También puede crear una variable para realizar un seguimiento de la longitud de la serpiente:

   variable segmentos de serpiente = [];
   variable longitud de serpiente = 1;
   

6. Declare la posición inicial X e Y de la serpiente:

   variable serpienteX = 0;
   variable serpienteY = 0;

7. Crear una nueva función. En el interior, agregue la pieza de serpiente inicial a la matriz de segmentos de serpiente, con sus coordenadas X e Y iniciales:

   funciónmoverSerpiente() {
    segmentos de serpiente.unshift({ X: serpienteX, y: serpiente Y });
   }

8. Crear una nueva función. En el interior, establezca el estilo de relleno en negro. Este es el color que usará para dibujar la serpiente:

   funcióndibujarserpiente() {
    canvas2d.fillStyle = "negro"; 
   }

9. Para cada segmento que conforma el tamaño de la serpiente, dibuja un cuadrado con un ancho y una altura de 10 píxeles:

   para (variable yo = 0; i < segmentos de serpiente.longitud; i++) {
    canvas2d.fillRect (segmentos de serpiente[i].x, segmentos de serpiente[i].y, 10, 10);
    }

10. Cree un bucle de juego que se ejecutará cada 100 milisegundos. Esto hará que el juego dibuje constantemente a la serpiente en su nueva posición, lo que será muy importante cuando la serpiente comience a moverse:

    funciónbucle de juego() {
     moverSerpiente();
     dibujarSerpiente();

11. Abra el archivo "index.html" en un navegador web para ver la serpiente en su tamaño más pequeño en su posición inicial.

Cómo hacer que la serpiente se mueva

Agregue algo de lógica para mover la serpiente en diferentes direcciones, según el botón que presione el jugador en el teclado.

1. En la parte superior del archivo, declare la dirección inicial de la serpiente:

   variable direcciónX = 10;
   variable dirección Y = 0;
   

2. Agregue un controlador de eventos que se activa cuando el jugador presiona una tecla:

   documento.onkeydown = función(evento) {
   };

3. Dentro del controlador de eventos, cambia la dirección en la que se mueve la serpiente, según la tecla presionada:

   cambiar (evento.keyCode) {
   caso37: // Flecha izquierda
    direcciónX = -10;
    dirección Y = 0;
   romper;
   caso38: // Flecha arriba
    direcciónX = 0;
    dirección Y = -10;
   romper;
   caso39: // Flecha correcta
    direcciónX = 10;
    dirección Y = 0;
   romper;
   caso40: // Flecha hacia abajo
    direcciónX = 0;
    dirección Y = 10;
   romper;
   }

4. En la función moveSnake(), usa la dirección para actualizar las coordenadas X e Y de la serpiente. Por ejemplo, si la serpiente necesita moverse hacia la izquierda, la dirección X será "-10". Esto actualizará la coordenada X para eliminar 10 píxeles por cada fotograma del juego:

   funciónmoverSerpiente() {
    segmentos de serpiente.unshift({ X: serpienteX, y: serpiente Y });
    serpienteX += direcciónX;
    serpienteY += direcciónY;
   }

5. Actualmente, el juego no elimina los segmentos anteriores mientras la serpiente se mueve. Esto hará que la serpiente se vea así:
6. Para solucionar esto, borre el lienzo antes de dibujar la nueva serpiente en cada cuadro, al comienzo de la función dibujarSerpiente():

   lienzo2d.clearRect(0, 0, lienzo.ancho, lienzo.alto);

7. También deberá eliminar el último elemento de la matriz de segmentos de serpientes, dentro de la función moveSnake():

   mientras (segmentosserpiente.longitud > longitudserpiente) {
    segmentos de serpiente.pop();
   }

8. Abra el archivo "index.html" y presione las teclas izquierda, derecha, arriba o abajo para mover la serpiente.

Cómo agregar alimentos en el lienzo

Agregue puntos al juego de mesa para representar piezas de comida para la serpiente.

1. Declare una nueva variable en la parte superior del archivo para almacenar una serie de piezas de alimentos:

   variable puntos = [];

2. Crear una nueva función. En el interior, genere coordenadas X e Y aleatorias para los puntos. También puede asegurarse de que solo haya 10 puntos en el tablero en cualquier momento:

   funciónPuntos de engendro() {
   si(puntos.longitud < 10) {
   variable puntoX = Matemáticas.piso(Matemáticas.random() * lienzo.ancho);
   variable puntoY = Matemáticas.piso(Matemáticas.random() * lienzo.altura);
    puntos.push({ X: dotX, y: punto Y });
    }
   }

3. Después de generar las coordenadas X e Y para la comida, dibújalas en el lienzo usando un color rojo:

   para (variable yo = 0; i  canvas2d.fillStyle = "rojo";
    canvas2d.fillRect (puntos[i].x, puntos[i].y, 10, 10);
   }

4. Llame a la nueva función spawnDots() dentro del ciclo del juego:

   funciónbucle de juego() {
    moverSerpiente();
    dibujarSerpiente();
    engendrar puntos();
   si(!juegoTerminado) {
    setTimeout (bucle de juego, 100);
    }
   }

5. Abra el archivo "index.html" para ver la comida en el tablero de juego.

Cómo hacer crecer la serpiente

Puedes hacer que la serpiente crezca aumentando su longitud cuando choca con un punto de comida.

1. Crear una nueva función. Dentro de él, recorra cada elemento en la matriz de puntos:

   funcióncomprobar colisión() {
   para (variable yo = 0; i 
    }
   }

2. Si la posición de la serpiente coincide con las coordenadas de cualquier punto, aumente la longitud de la serpiente y elimine el punto:

   si (serpienteX 10 && 
    serpienteX + 10 > puntos[i].x && 
    serpienteY < puntos[i].y + 10 && 
    serpienteY + 10 > puntos[i].y) {
    serpienteLongitud++;
    puntos.empalme (yo, 1);
   }

3. Llame a la nueva función checkCollision() en el bucle del juego:

   funciónbucle de juego() {
    moverSerpiente();
    dibujarSerpiente();
    engendrar puntos();
    verificarColisión();
   si(!juegoTerminado) {
    setTimeout (bucle de juego, 100);
    }
   }

4. Abra el archivo "index.html" en un navegador web. Mueve la serpiente usando el teclado para recolectar las piezas de comida y hacer crecer la serpiente.

Cómo terminar el juego

Para finalizar el juego, verifica si la serpiente chocó con su propia cola o con alguna de las paredes.

1. Cree una nueva función para imprimir una alerta de "Game Over".

   funciónjuego terminado() {
    establecerTiempo de espera(función() {
    alerta("¡Juego terminado!");
    }, 500); 
    juegoTerminado = verdadero
   }

2. Dentro de la función checkCollision(), verifica si la serpiente golpeó alguna de las paredes del lienzo. Si es así, llama a la función gameOver():

   si (serpienteX < -10 || 
    serpienteY < -10 || 
    serpienteX > lienzo.ancho+10 ||
    serpienteY > lienzo.altura+10) {
    juego terminado();
   }

3. Para verificar si la cabeza de la serpiente chocó con alguno de los segmentos de la cola, pase por cada pieza de la serpiente:

   para (variable yo = 1; i < segmentos de serpiente.longitud; i++) {
   }

4. Dentro del bucle for, comprueba si la ubicación de la cabeza de la serpiente coincide con alguno de los segmentos de la cola. Si es así, esto significa que la cabeza chocó con la cola, así que termina el juego:

   si (serpienteX segmentos de serpiente[i].x && serpienteY segmentos de serpiente[i].y) {
    juego terminado();
   }

5. Abra el archivo "index.html" en un navegador web. Intenta golpear una pared o tu propia cola para terminar el juego.

Aprender conceptos de JavaScript a través de juegos

Crear juegos puede ser una excelente manera de hacer que su experiencia de aprendizaje sea más agradable. Sigue creando más juegos para seguir mejorando tu conocimiento de JavaScript.