Crie um jogo onde temos que andar por labirinto mas para consigui passa o jogador vai ter uma janela para pode modificar a grid do labirinto que vai ser gerado aleatóriamente's game

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

No:19146

←

Prev Next

→

Crie um jogo onde temos que andar por labirinto ma..ALL
Developer User8225｜Date and time 23/10/1 22:00:59
Build time 18.253 sec｜Game capacity 3.945KB｜

Script

Modificar o Labirinto:

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #maze {
      display: inline-block;
      margin-top: 50px;
      border: 1px solid #000;
    }
    
    #maze div {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #fff;
    }
    
    #player {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #f00;
    }
    
    #controls {
      display: inline-block;
    }
    
    #controls input {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="maze"></div>
  <div id="controls">
    <p>Modificar o Labirinto:</p>
    <input type="number" id="gridSize" placeholder="Tamanho da grade" />
    <input type="button" id="generateMaze" value="Gerar Labirinto" />
  </div>
  
  <script>
    // Variáveis globais
    var grid;
    var playerPosition = { row: 0, col: 0 };
    
    // Função para gerar o labirinto
    function generateMaze() {
      var gridSize = parseInt(document.getElementById("gridSize").value);
      var maze = document.getElementById("maze");
      maze.innerHTML = "";
      
      // Criar a grade do labirinto
      grid = new Array(gridSize);
      for (var i = 0; i < gridSize; i++) {
        grid[i] = new Array(gridSize);
        for (var j = 0; j < gridSize; j++) {
          grid[i][j] = 1; // 1 representa uma parede
          var cell = document.createElement("div");
          maze.appendChild(cell);
        }
      }
      
      // Posicionar o jogador no final do labirinto
      playerPosition = { row: gridSize - 1, col: gridSize - 1 };
      grid[playerPosition.row][playerPosition.col] = 0; // 0 representa o jogador
      document.getElementById("player").style.left = (playerPosition.col * 20) + "px";
      document.getElementById("player").style.top = (playerPosition.row * 20) + "px";
      
      // Atualizar visualmente o labirinto
      updateMaze();
    }
    
    // Função para atualizar visualmente o labirinto
    function updateMaze() {
      var maze = document.getElementById("maze");
      var mazeCells = maze.getElementsByTagName("div");
      
      for (var i = 0; i < grid.length; i++) {
        for (var j = 0; j < grid[i].length; j++) {
          if (grid[i][j] === 1) {
            mazeCells[(i * grid.length) + j].style.backgroundColor = "#000"; // Parede
          } else if (grid[i][j] === 0) {
            mazeCells[(i * grid.length) + j].style.backgroundColor = "#fff"; // Espaço vazio
          }
        }
      }
    }
    
    // Função para mover o jogador
    function movePlayer(event) {
      var key = event.keyCode;
      
      if (key === 37 && playerPosition.col > 0 && grid[playerPosition.row][playerPosition.col - 1] === 0) {
        playerPosition.col--; // Mover para a esquerda
      } else if (key === 38 && playerPosition.row > 0 && grid[playerPosition.row - 1][playerPosition.col] === 0) {
        playerPosition.row--; // Mover para cima
      } else if (key === 39 && playerPosition.col < grid.length - 1 && grid[playerPosition.row][playerPosition.col + 1] === 0) {
        playerPosition.col++; // Mover para a direita
      } else if (key === 40 && playerPosition.row < grid.length - 1 && grid[playerPosition.row + 1][playerPosition.col] === 0) {
        playerPosition.row++; // Mover para baixo
      }
      
      // Atualizar visualmente a posição do jogador
      document.getElementById("player").style.left = (playerPosition.col * 20) + "px";
      document.getElementById("player").style.top = (playerPosition.row * 20) + "px";
    }
    
    // Iniciar o jogo
    function startGame() {
      document.getElementById("generateMaze").addEventListener("click", generateMaze);
      document.addEventListener("keydown", movePlayer);
      generateMaze();
    }
    
    // Chamar a função para iniciar o jogo
    startGame();
  </script>
</body>
</html>