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

No:35706

217

←

Prev Next

→

Portal
Developer User16538｜Date and time 24/1/15 3:18:29
Build time 18.891 sec｜Game capacity 4.616KB｜

Script

¡Bienvenido a Portal!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Juego de Portal</title>
    <style>
      body {
        background-color: #000;
        color: #fff;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #game-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 80vh;
      }
      .portal {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url('portal.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      #player {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url('player.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      #goal {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url('goal.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h1>¡Bienvenido a Portal!</h1>
    <div id="game-container">
      <div class="portal" id="portal1"></div>
      <div class="portal" id="portal2"></div>
      <div id="player"></div>
      <div id="goal"></div>
    </div>
    <script>
      // Obtener elementos del DOM
      const player = document.getElementById('player');
      const portal1 = document.getElementById('portal1');
      const portal2 = document.getElementById('portal2');
      const goal = document.getElementById('goal');

// Variables de juego
      let playerX = 0;
      let playerY = 0;
      let goalX;
      let goalY;
      let portal1X;
      let portal1Y;
      let portal2X;
      let portal2Y;

// Iniciar el juego
      function startGame() {
        // Generar posiciones aleatorias para los elementos del juego
        goalX = generateRandomPosition();
        goalY = generateRandomPosition();
        portal1X = generateRandomPosition();
        portal1Y = generateRandomPosition();
        portal2X = generateRandomPosition();
        portal2Y = generateRandomPosition();

// Actualizar posición y estilos de los elementos del juego
        player.style.transform = `translate(${playerX}px, ${playerY}px)`;
        goal.style.transform = `translate(${goalX}px, ${goalY}px)`;
        portal1.style.transform = `translate(${portal1X}px, ${portal1Y}px)`;
        portal2.style.transform = `translate(${portal2X}px, ${portal2Y}px)`;

// Establecer listeners para movimientos del jugador
        document.addEventListener('keydown', handlePlayerMovement);
      }

// Generar una posición aleatoria entre 0 y 420 (para cuadrícula de 7x7)
      function generateRandomPosition() {
        return Math.floor(Math.random() * 60) * 7;
      }

// Manejar movimiento del jugador
      function handlePlayerMovement(event) {
        switch (event.key) {
          case 'ArrowUp':
            movePlayer(0, -60);
            break;
          case 'ArrowDown':
            movePlayer(0, 60);
            break;
          case 'ArrowLeft':
            movePlayer(-60, 0);
            break;
          case 'ArrowRight':
            movePlayer(60, 0);
            break;
        }
      }

// Mover al jugador hacia una nueva posición
      function movePlayer(deltaX, deltaY) {
        const newX = playerX + deltaX;
        const newY = playerY + deltaY;

// Comprobar si el movimiento es válido (no sale del contenedor)
        if (newX < 0 || newX > 360 || newY < 0 || newY > 360) {
          return;
        }

// Actualizar posición del jugador
        playerX = newX;
        playerY = newY;

// Comprobar colisiones con el objetivo y los portales
        if (playerX === goalX && playerY === goalY) {
          alert('¡Has ganado!');
          resetGame();
        } else if (playerX === portal1X && playerY === portal1Y) {
          // Teletransportar al jugador al segundo portal
          playerX = portal2X;
          playerY = portal2Y;
        } else if (playerX === portal2X && playerY === portal2Y) {
          // Teletransportar al jugador al primer portal
          playerX = portal1X;
          playerY = portal1Y;
        }

// Actualizar posición y estilos del jugador
        player.style.transform = `translate(${playerX}px, ${playerY}px)`;
      }

// Reiniciar el juego
      function resetGame() {
        playerX = 0;
        playerY = 0;
        startGame();
      }

// Iniciar el juego al cargar la página
      startGame();
    </script>
  </body>
</html>