Descubre los secretos detrás del juego de la carretera ondulante: paso a paso para crearlo en casa

Una introducción al juego de la carretera ondulante

El juego de la carretera ondulante es un juego sencillo pero adictivo que ha sido popular desde hace varios años. El objetivo es mover un coche o una moto por una carretera en constante movimiento, evitando obstáculos y ganando puntos por la distancia recorrida. En este artículo te enseñaremos cómo puedes crear tu propio juego de la carretera ondulante.

Paso 1: Preparar el terreno

Lo primero que necesitas es crear un lienzo en HTML en el que puedas renderizar tu juego. Puedes hacerlo con un simple div:

<div id="lienzo"></div>

Luego, en tu archivo JavaScript, crea una referencia al elemento:

var lienzo = document.getElementById('lienzo');

Paso 2: Crear la carretera

La carretera será una serie de líneas paralelas que se moverán hacia abajo. Para hacerlo, necesitas especificar el ancho y la altura de tu lienzo:

var ancho = lienzo.offsetWidth;
var altura = lienzo.offsetHeight;

Luego, puedes crear la carretera utilizando un bucle for:

for (var i = 0; i < altura; i += 20) {
  var linea = document.createElement('div');
  linea.className = 'linea';
  linea.style.top = i + 'px';
  linea.style.width = ancho + 'px';
  lienzo.appendChild(linea);
}

Cómo funciona

Este código crea un bucle que se ejecuta hasta la altura especificada del lienzo. Dentro del bucle, se crea un nuevo elemento div con la clase «linea». Luego, se establece la posición vertical de cada línea y se le da el ancho del lienzo. Por último, se añade cada línea al lienzo.

Paso 3: Crear el coche

El coche será otro elemento que se moverá por la carretera. Puedes crearlo como un elemento div con una clase «coche». Luego, lo añades al lienzo y estableces su posición inicial:

var coche = document.createElement('div');
coche.className = 'coche';
lienzo.appendChild(coche);
coche.style.left = (ancho / 2) - (coche.offsetWidth / 2) + 'px';
coche.style.top = altura - coche.offsetHeight - 10 + 'px';

Paso 4: Crear los obstáculos

Los obstáculos serán otros elementos div que aparecerán aleatoriamente en la carretera. Puedes crearlos con una clase «obstáculo» y añadirlos al lienzo:

function crearObstaculo() {
  var obstaculo = document.createElement('div');
  obstaculo.className = 'obstaculo';
  lienzo.appendChild(obstaculo);
  obstaculo.style.left = Math.floor(Math.random() * (ancho - obstaculo.offsetWidth)) + 'px';
  obstaculo.style.top = '-50px';
}

Cómo funciona

Cada vez que creas un obstáculo, se generará en una posición horizontal aleatoria y se moverá hacia abajo. Para hacerlo, necesitas un intervalo de tiempo que llame a una función encargada de mover cada obstáculo. Por ejemplo:

var intervalo = setInterval(function() {
  // mueve el coche
  // crea obstáculos
  // mueve obstáculos
}, 30);

Paso 5: Mover los elementos

Para mover los elementos, necesitas actualizar sus posiciones en cada paso del intervalo de tiempo. Puedes hacerlo utilizando un bucle for:

function moverObstaculos() {
  var obstaculos = document.getElementsByClassName('obstaculo');
  for (var i = 0; i < obstaculos.length; i++) {
    var obstaculo = obstaculos[i];
    obstaculo.style.top = obstaculo.offsetTop + 1 + 'px';
  }
}

Este código, por ejemplo, mueve cada obstáculo hacia abajo en una unidad (px).

Paso 6: añadir controles

Para mover el coche, necesitas añadir controles. Puedes hacerlo en JavaScript utilizando el evento «keydown». Por ejemplo:

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    // mueve el coche a la izquierda
  } else if (event.key === 'ArrowRight') {
    // mueve el coche a la derecha
  }
});

Cómo funciona

Este código escucha los eventos de «keydown» en toda la página y los procesa. Cuando el usuario presiona la flecha izquierda o derecha, el juego mueve el coche a la izquierda o a la derecha en una unidad (px).

Paso 7: Detectar colisiones

Finalmente, necesitas detectar si el coche ha chocado con algún obstáculo. Puedes hacerlo utilizando un bucle similar al que hemos utilizado para mover los obstáculos:

function detectarColision() {
  var obstaculos = document.getElementsByClassName('obstaculo');
  for (var i = 0; i < obstaculos.length; i++) {
    var obstaculo = obstaculos[i];
    if (colision(coche, obstaculo)) {
      // el juego termina
    }
  }
}

Cómo funciona

Este código comprueba si cada obstáculo ha colisionado con el coche utilizando la función «colision». Si se detecta una colisión, el juego termina.

Conclusión

¡Felicidades! Ahora sabes cómo hacer un juego de la carretera ondulante utilizando HTML, CSS y JavaScript. No dudes en experimentar con diferentes variables para hacer que tu juego sea más desafiante y divertido. ¡Que te diviertas!