Crea un juego con imagenes's game

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

No:41111

←

Prev Next

→

Crea un juego con imagenes
Developer User18468｜Date and time 24/2/6 4:16:10
Build time 14.677 sec｜Game capacity 3.533KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Juego de Pictogramas</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

// Variables de juego
    let cartaSeleccionada = null;
    let paresEncontrados = 0;

// Obtener referencia al canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

// Inicializar juego
    function iniciarJuego() {
      // Barajar los pictogramas
      const pictogramasBarajados = shuffle([...pictogramas, ...pictogramas]);

// Dibujar las cartas en el canvas
      let posX = 20;
      let posY = 20;
      for (let i = 0; i < pictogramasBarajados.length; i++) {
        const carta = pictogramasBarajados[i];
        dibujarCarta(posX, posY, carta);
        posX += 80;

if ((i + 1) % 5 === 0) {
          posX = 20;
          posY += 80;
        }
      }

// Añadir evento de clic
      canvas.addEventListener('click', seleccionarCarta);
    }

// Función para dibujar una carta en el canvas
    function dibujarCarta(x, y, carta) {
      ctx.fillStyle = '#FFFFFF';
      ctx.fillRect(x, y, 60, 60);
      ctx.font = '40px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = '#000000';
      ctx.fillText(carta, x + 30, y + 30);
    }

// Función para barajar el array de pictogramas
    function shuffle(array) {
      let currentIndex = array.length;
      let temporaryValue, randomIndex;

while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    }

// Función para seleccionar una carta
    function seleccionarCarta(evento) {
      const rect = canvas.getBoundingClientRect();
      const x = evento.clientX - rect.left;
      const y = evento.clientY - rect.top;

const cartaX = Math.floor(x / 80);
      const cartaY = Math.floor(y / 80);

const cartaIndex = cartaY * 5 + cartaX;
      const carta = pictogramas[cartaIndex];

if (cartaSeleccionada === null) {
        cartaSeleccionada = {
          index: cartaIndex,
          carta
        };
      } else {
        if (cartaIndex === cartaSeleccionada.index) {
          // La misma carta ha sido seleccionada nuevamente
          // No se realiza ninguna acción
          return;
        }

if (carta === cartaSeleccionada.carta) {
          // Se encontró un par
          cartaSeleccionada = null;
          paresEncontrados++;

if (paresEncontrados === pictogramas.length / 2) {
            // Se encontraron todos los pares, fin del juego
            alert('¡Has ganado!');
            canvas.removeEventListener('click', seleccionarCarta);
          }
        } else {
          // Los pictogramas no coinciden, ocultar las cartas seleccionadas después de 1 segundo
          setTimeout(() => {
            cartaSeleccionada = null;
            limpiarCanvas();
            iniciarJuego();
          }, 1000);
        }
      }
    }

// Función para limpiar el canvas
    function limpiarCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Iniciar el juego
    iniciarJuego();
  </script>
</body>
</html>