Snake Game crea tu propio juego

Libera a tu desarrollador interior: El tutorial definitivo para crear un juego de Snake personalizado

¿Estás listo para dar rienda suelta al desarrollador que llevas dentro? Si siempre has querido crear tu propio juego, estás de suerte. En este tutorial, te llevaremos paso a paso por el proceso de creación de un juego de Snake personalizado. Este juego clásico es un buen punto de partida para los principiantes, pero también ofrece mucho espacio para que los desarrolladores más experimentados flexionen sus músculos de codificación. Cubriremos todos los aspectos, desde la configuración del entorno de desarrollo hasta la definición de la mecánica del juego y la creación de los gráficos. Y, por supuesto, nos aseguraremos de que tu juego esté optimizado para dispositivos móviles y de sobremesa. Al final de este tutorial, tendrás un juego de Snake totalmente funcional que podrás personalizar y compartir con tus amigos. Sumérgete y descubre el placer de desarrollar juegos.

Historia del juego Snake

El juego de Snake es uno de los juegos más antiguos y populares de la historia de los videojuegos. Fue creado en la década de 1970 por el programador finlandés Taneli Armanto para el teléfono móvil Nokia 6110. En el juego, los jugadores controlan una serpiente que se mueve alrededor de la pantalla, comiendo pequeñas piezas de comida mientras evita chocar con las paredes o su propia cola. Con cada pieza de comida que come, la serpiente crece más larga y el juego se vuelve más difícil.

Aunque el juego de Snake fue diseñado originalmente para ser jugado en un teléfono móvil, rápidamente se popularizó en otros dispositivos y plataformas, incluyendo computadoras personales y consolas de videojuegos. Su jugabilidad simple pero adictiva lo convirtió en un favorito de muchos jugadores, y el juego de Snake se convirtió en un elemento básico de la cultura de los videojuegos.

A lo largo de los años, se han desarrollado muchas versiones diferentes del juego de Snake, cada una con sus propias características y mejoras. Algunas versiones incluso han agregado elementos multijugador o de realidad virtual para llevar el juego a un nivel completamente nuevo.

Y en esté tutorial crearás tu propia versión de esté increíble juego, una vez lo termines compártenos tu juego en los comentarios de esté artículo. 

Código y explicación del desarrollo del juego SNAKE

Este es un código que pertenece a un juego de serpiente (también conocido como Snake en inglés), donde el usuario controla a una serpiente que va creciendo a medida que consume alimentos en el campo de juego.

El código comienza definiendo algunas variables iniciales, tales como el tamaño de los cuadros en los que se dibuja el juego (variable step), la dirección en la que se mueve la serpiente (variable dir), y las posiciones del alimento (posXfood y posYfood).

Luego, se inicializan algunos arrays vacíos para almacenar las posiciones y colores de la serpiente, y se definen algunos colores para cada parte del cuerpo de la serpiente.

La función setup() se utiliza para crear el canvas del juego y definir la tasa de refresco de la pantalla (frameRate). Además, se agrega la posición inicial de la cabeza de la serpiente al array de posiciones (posX y posY) y se le asigna un color inicial.

La función draw() es la que se encarga de dibujar el juego en la pantalla. En primer lugar, se verifica si el juego sigue en marcha (gameOn), y si se ha comido un alimento recientemente (eated). Si no se ha comido un alimento, se genera una nueva posición aleatoria para el alimento.

Luego, se dibuja el fondo del juego (en color negro), se recorre el array de posiciones de la serpiente y se dibuja cada cuadro de la serpiente en su posición correspondiente, utilizando el color asignado en el array de colores.

Finalmente, se dibuja el alimento en su posición correspondiente.

En la segunda parte de la función draw(), se verifica si se ha presionado alguna tecla de dirección para mover la serpiente en esa dirección, y se actualiza la variable dir. Luego, se actualizan las posiciones de cada parte del cuerpo de la serpiente (excepto la cabeza) para que ocupen la posición de la parte que está justo delante de ella.

Después, se actualiza la posición de la cabeza de la serpiente según la dirección en la que se está moviendo. Si la cabeza llega al borde del campo de juego, se hace reaparecer en el otro extremo.

Luego, se verifica si la cabeza de la serpiente se superpone con alguna parte de su cuerpo, lo que indicaría que se ha perdido el juego. En caso de que esto ocurra, se detiene el juego y se muestra un mensaje de «Perdiste» en la pantalla.

Por último, se verifica si la cabeza de la serpiente coincide con la posición del alimento. Si es así, se agrega una nueva posición al final del array de posiciones de la serpiente, se incrementa el tamaño de la serpiente en uno, y se indica que se ha comido un alimento. Si no coincide, se indica que no se ha comido un alimento en este ciclo de la función draw().

Código juego SNAKE

				
					var step = 20; 
var dir = "right";
var posXfood;
var posYfood;
let posX = [];
let posY = [];
let colors = [];
var size = 1;
var eated = 1;
var gameOn = 1;

function setup() {
  createCanvas(400, 400);
  frameRate(12);
  append(posX,0);
  append(posY,0);
  append(colors,[228,2,3]);
  append(colors,[255, 140, 0]);
  append(colors,[255, 237, 0]);
  append(colors,[0, 128, 38]);
  append(colors,[0, 77, 255]);
  append(colors,[117, 7, 135]);
}

function draw() {
  if(gameOn){
  if(eated){
    posXfood = ceil(random(19))
    posYfood = ceil(random(19));
  }
  background(0);
  for(i = 0; i < size; i++){
    let c = i % 6;
      fill(colors[c][0],colors[c][1],colors[c][2]);
      rect(posX[i] *20, posY[i] *20,step,step);
  }
  fill(255);
  rect(posXfood *20,posYfood *20,step,step);
  }
  
  if (keyIsDown(DOWN_ARROW) && dir != "up") {
    dir = "down";
  }
  if (keyIsDown(UP_ARROW) && dir != "down") {
    dir = "up";
  }
  if (keyIsDown(LEFT_ARROW) && dir != "right") {
    dir = "left";
  }
  if (keyIsDown(RIGHT_ARROW) && dir != "left") {
    dir = "right";
  }
  for(let i = size-1; i > 0; i--){
    posX[i] = posX[i-1];
    posY[i] = posY[i-1];
  }
  if(dir == "right"){
    if(posX[0] < 19){
      posX[0] ++; 
    } else {
       posX[0] = 0; 
    }
  }
  if(dir == "left"){
    if(posX[0] > 0){
       posX[0]--; 
    } else {
       posX[0] = 19; 
    }
  }
  if(dir == "down"){
    if(posY[0] < 19){
       posY[0]++; 
    } else {
       posY[0] = 0; 
    }
  }if(dir == "up"){
    if(posY[0] > 0){
       posY[0]--; 
    } else {
       posY[0] = 19; 
    }
  }
  
  for(i = 1; i < size;i++){
    if(posX[0] == posX[i] && posY[0] == posY[i]){
        gameOn = 0;
        fill(255);
        textSize(32);
        text('Perdiste', 150, 200);
    }
  }

  if(posX[0] == posXfood && posY[0] == posYfood){
    append(posX,posXfood);
    append(posY,posYfood);
    size++;
    eated = 1;
  } else {
    eated = 0;
  }
    
}
				
			

Proyectos adicionales para crecer como DEV

Esté es un buen comienzo, nada mejor que iniciar en el desarrollo de videojuegos recreando juegos clásicos como «Snake», para ayudarte en tu camino como desarrollador de juegos te dejo otros 3 proyecto que te ayudarán en tu crecimiento como programador aparte podrás agregar estos proyecto en tu portafolio (PONG, PAC-MAN, SCRABBLE). ¿Qué otro juego clásico te gustaría que desarrollemos?

En la creación de Snake no necesitas descargar programas en tu PC, todo se realizará desde el navegador usando la plataforma P5js, solo requieres conexión a internet y listo a crear juegos.

Game del código

Plataforma donde se puede ejecutar el juego

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *