An exploration game where we control a red circle with eyes that can get points by defeating yellow squares and use the points to unlock skills in a skill tree in order to defeat the black rectangle and rescue the blue triangle princess.'s game

Click here for free DL of the app version that can save data.

No:1820

667

←

Prev Next

→

An exploration game where we control a red circle ..ALL
Developer User3408｜Date and time 23/6/19 3:46:34
Build time 96.391 sec｜Game capacity 8.504KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Juego de Exploración</title>
</head>
<body>

// Inicializamos variables del juego
    let puntos = 0;
    let habilidades = {
      salto: false,
      velocidad: false,
      ataque: false
    }

let personaje = {
      x: 200,
      y: 500,
      radio: 15,
      color: 'red',
      ojos: {
        color: 'white',
        radio: 5
      },
      velocidad: 3,
      saltando: false,
      velocidad_salto: 10,
      vidas: 3
    }

let cuadrados = [];

for (let i = 0; i < 10; i++) {
      let cuadrado = {
        x: Math.random() * 350 + 25,
        y: Math.random() * 250 + 50,
        lado: 20,
        color: 'yellow',
        puntos: 10,
        visible: true
      }
      cuadrados.push(cuadrado);
    }

let rectangulo = {
      x: 175,
      y: 50,
      ancho: 50,
      alto: 50,
      color: 'black',
      vidas: 5
    }

let triangulo = {
      x: 175,
      y: 0,
      tamano: 30,
      color: 'blue',
      rescatada: false
    }

// Dibujamos el personaje
    function dibujarPersonaje() {
      ctx.beginPath();
      ctx.arc(personaje.x, personaje.y, personaje.radio, 0, 2*Math.PI);
      ctx.fillStyle = personaje.color;
      ctx.fill();

ctx.beginPath();
      ctx.arc(personaje.x - 7, personaje.y - 5, personaje.ojos.radio, 0, 2*Math.PI);
      ctx.fillStyle = personaje.ojos.color;
      ctx.fill();

ctx.beginPath();
      ctx.arc(personaje.x + 7, personaje.y - 5, personaje.ojos.radio, 0, 2*Math.PI);
      ctx.fillStyle = personaje.ojos.color;
      ctx.fill();
    }

// Movemos al personaje
    function moverPersonaje() {
      if (keys.ArrowLeft && personaje.x - personaje.radio > 0) {
        personaje.x -= personaje.velocidad;
      }
      if (keys.ArrowRight && personaje.x + personaje.radio < canvas.width) {
        personaje.x += personaje.velocidad;
      }
      if (keys.ArrowUp && !personaje.saltando) {
        personaje.saltando = true;
        saltar();
      }
    }

// Hacemos saltar al personaje
    function saltar() {
      personaje.y -= personaje.velocidad_salto;
      if (personaje.velocidad_salto > 0) {
        personaje.velocidad_salto--;
      }
      if (personaje.velocidad_salto == 0) {
        personaje.velocidad_salto = 10;
        personaje.saltando = false;
      }
    }

// Dibujamos los cuadrados
    function dibujarCuadrados() {
      for (let i = 0; i < cuadrados.length; i++) {
        if (cuadrados[i].visible) {
          ctx.fillStyle = cuadrados[i].color;
          ctx.fillRect(cuadrados[i].x, cuadrados[i].y, cuadrados[i].lado, cuadrados[i].lado);
        }
      }
    }

// Dibujamos el rectángulo
    function dibujarRectangulo() {
      ctx.fillStyle = rectangulo.color;
      ctx.fillRect(rectangulo.x, rectangulo.y, rectangulo.ancho, rectangulo.alto);
    }

// Dibujamos el triángulo
    function dibujarTriangulo() {
      if (!triangulo.rescatada) {
        ctx.beginPath();
        ctx.moveTo(triangulo.x, triangulo.y);
        ctx.lineTo(triangulo.x + triangulo.tamano, triangulo.y);
        ctx.lineTo(triangulo.x + (triangulo.tamano/2), triangulo.y + triangulo.tamano);
        ctx.lineTo(triangulo.x, triangulo.y);
        ctx.fillStyle = triangulo.color;
        ctx.fill();
      }
    }

// Colisiones con los cuadrados
    function colisionCuadrados() {
      for (let i = 0; i < cuadrados.length; i++) {
        if (cuadrados[i].visible) {
          let centroX = personaje.x;
          let centroY = personaje.y;
          let distanciaX = Math.abs(centroX - cuadrados[i].x - cuadrados[i].lado/2);
          let distanciaY = Math.abs(centroY - cuadrados[i].y - cuadrados[i].lado/2);

// Colisión
          if (distanciaX <= (personaje.radio + cuadrados[i].lado/2) && distanciaY <= (personaje.radio + cuadrados[i].lado/2)) {
            cuadrados[i].visible = false;
            puntos += cuadrados[i].puntos;
          }
        }
      }
    }

// Colisiones con el rectángulo
    function colisionRectangulo() {
      let centroX = personaje.x;
      let centroY = personaje.y;
      let distanciaX = Math.abs(centroX - rectangulo.x - rectangulo.ancho/2);
      let distanciaY = Math.abs(centroY - rectangulo.y - rectangulo.alto/2);

// Colisión
      if (distanciaX <= (personaje.radio + rectangulo.ancho/2) && distanciaY <= (personaje.radio + rectangulo.alto/2)) {
        if (habilidades.ataque) {
          rectangulo.vidas--;
          if (rectangulo.vidas == 0) {
            alert('¡Has rescatado a la princesa! Ganaste el juego.');
            location.reload();
          }
        } else {
          personaje.vidas--;
          alert('Has sido atacado por el rectángulo. Te quedan ' + personaje.vidas + ' vidas.');
          if (personaje.vidas == 0) {
            alert('Has perdido el juego. Inténtalo de nuevo.');
            location.reload();
          }
        }
      }
    }

// Colisiones con el triángulo
    function colisionTriangulo() {
      let centroX = personaje.x;
      let centroY = personaje.y;
      let distanciaX = Math.abs(centroX - triangulo.x - (triangulo.tamano/2));
      let distanciaY = Math.abs(centroY - triangulo.y - (triangulo.tamano/2));

if (distanciaX <= (personaje.radio + (triangulo.tamano/2)) && distanciaY <= (personaje.radio + (triangulo.tamano/2))) {
        triangulo.rescatada = true;
        alert('¡Has rescatado a la princesa triángulo!');
      }
    }

// Dibujamos los puntos y las habilidades
    function dibujarInfo() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Puntos: " + puntos, 10, 30);

if (!habilidades.salto) {
        ctx.fillText("Salto: 50 puntos", 10, 80);
      } else {
        ctx.fillText("Salto: Desbloqueado", 10, 80);
      }

if (!habilidades.velocidad) {
        ctx.fillText("Velocidad: 100 puntos", 10, 110);
      } else {
        ctx.fillText("Velocidad: Desbloqueado", 10, 110);
      }

if (!habilidades.ataque) {
        ctx.fillText("Ataque: 150 puntos", 10, 140);
      } else {
        ctx.fillText("Ataque: Desbloqueado", 10, 140);
      }
    }

// Desbloqueamos la habilidad seleccionada
    function desbloquearHabilidad(habilidad) {
      switch (habilidad) {
        case 'salto':
          if (puntos >= 50) {
            habilidades.salto = true;
            puntos -= 50;
            personaje.velocidad_salto = 15;
            alert('¡Has desbloqueado la habilidad de salto!');
          } else {
            alert('No tienes suficientes puntos para desbloquear esta habilidad.');
          }
          break;
        case 'velocidad':
          if (puntos >= 100) {
            habilidades.velocidad = true;
            puntos -= 100;
            personaje.velocidad = 5;
            alert('¡Has desbloqueado la habilidad de velocidad!');
          } else {
            alert('No tienes suficientes puntos para desbloquear esta habilidad.');
          }
          break;
        case 'ataque':
          if (puntos >= 150) {
            habilidades.ataque = true;
            puntos -= 150;
            alert('¡Has desbloqueado la habilidad de ataque!');
          } else {
            alert('No tienes suficientes puntos para desbloquear esta habilidad.');
          }
          break;
        default:
          break;
      }
    }

// Manejamos eventos del teclado
    let keys = {};
    document.addEventListener('keydown', function(event) {
      keys[event.code] = true;
      if (event.code == 'KeyX') {
        desbloquearHabilidad('salto');
      } else if (event.code == 'KeyC') {
        desbloquearHabilidad('velocidad');
      } else if (event.code == 'KeyV') {
        desbloquearHabilidad('ataque');
      }
    });
    document.addEventListener('keyup', function(event) {
      delete keys[event.code];
    });

// Loop principal del juego
    function update() {
      ctx.clearRect(0,0,canvas.width,canvas.height);

dibujarPersonaje();

moverPersonaje();

dibujarCuadrados();

dibujarRectangulo();

dibujarTriangulo();

dibujarInfo();

colisionCuadrados();

colisionRectangulo();

colisionTriangulo();

requestAnimationFrame(update);
    }

update();

</script>

</body>
</html>