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

No:36555

←

Prev Next

→

Find The Button Maze
Developer User16822｜Date and time 24/1/17 23:12:49
Build time 16.277 sec｜Game capacity 3.359KB｜

Script

Encuentra el botón en el laberinto

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>

<head>
  <title>Encuentra el botón en el laberinto</title>
</head>

<body>
  <h1>Encuentra el botón en el laberinto</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Define las propiedades del laberinto y del botón
    const mazeColor = "#000000";
    const wallWidth = 20;
    const buttonColor = "#ff0000";
    const buttonRadius = 10;

// Define la posición inicial del jugador
    const player = {
      x: 0,
      y: 0
    };

// Espera hasta que la ventana haya cargado antes de iniciar el juego
    window.onload = function () {
      // Detecta los eventos táctiles en el canvas para mover al jugador
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchmove", handleTouchMove, false);

// Inicia el juego
      startGame();
    };

// Función para dibujar el laberinto y el botón
    function drawMaze() {
      // Limpia el canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibuja el laberinto
      ctx.fillStyle = mazeColor;
      ctx.fillRect(0, 0, wallWidth, canvas.height);
      ctx.fillRect(canvas.width - wallWidth, 0, wallWidth, canvas.height);
      ctx.fillRect(wallWidth, 0, canvas.width - 2 * wallWidth, wallWidth);
      ctx.fillRect(wallWidth, canvas.height - wallWidth, canvas.width - 2 * wallWidth, wallWidth);

// Dibuja el botón
      ctx.beginPath();
      ctx.arc(canvas.width / 2, canvas.height / 2, buttonRadius, 0, Math.PI * 2);
      ctx.fillStyle = buttonColor;
      ctx.fill();
      ctx.closePath();
    }

// Función para manejar el inicio del toque en el canvas
    function handleTouchStart(event) {
      event.preventDefault();
      const touch = event.touches[0];
      player.x = touch.pageX - canvas.offsetLeft;
      player.y = touch.pageY - canvas.offsetTop;
    }

// Función para manejar el movimiento del toque en el canvas
    function handleTouchMove(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const newX = touch.pageX - canvas.offsetLeft;
      const newY = touch.pageY - canvas.offsetTop;
      if (isValidMove(newX, newY)) {
        player.x = newX;
        player.y = newY;
      }
      checkButtonCollision();
      drawMaze();
    }

// Función para verificar si el movimiento es válido (dentro del laberinto)
    function isValidMove(x, y) {
      if (x > wallWidth && x < canvas.width - wallWidth && y > wallWidth && y < canvas.height - wallWidth) {
        return true;
      }
      return false;
    }

// Función para verificar la colisión con el botón
    function checkButtonCollision() {
      const buttonX = canvas.width / 2;
      const buttonY = canvas.height / 2;
      if (Math.abs(player.x - buttonX) < buttonRadius && Math.abs(player.y - buttonY) < buttonRadius) {
        alert("¡Felicidades! ¡Encontraste el botón!");
        startGame(); // Reinicia el juego cuando se encuentra el botón
      }
    }

// Función para iniciar el juego
    function startGame() {
      player.x = canvas.width / 2;
      player.y = canvas.height / 2;
      drawMaze();
    }
  </script>
</body>

</html>