AI game creator

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

No:52950

3251

←

Prev Next

→

Make A Maze Game
Developer anonymous｜Date and time 24/3/27 4:56:56
Build time unknown sec｜Game capacity 2.56KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    .maze {
      display: grid;
      grid-template-columns: repeat(5, 30px);
      grid-template-rows: repeat(5, 30px);
      gap: 1px;
    }
    .player {
      background-color: red;
    }
    .wall {
      background-color: black;
    }
    .end {
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="maze" id="maze"></div>
  <script>
    const maze = [
      [1, 1, 1, 0, 1],
      [0, 0, 1, 1, 1],
      [1, 0, 0, 0, 1],
      [1, 1, 1, 0, 0],
      [1, 0, 1, 1, 1]
    ];

let playerPosition = { x: 0, y: 0 };
    let endPosition = { x: 4, y: 4 };

const movePlayer = (direction) => {
      const newPosition = { x: playerPosition.x, y: playerPosition.y };

if(direction === "ArrowUp" && playerPosition.y > 0 && maze[playerPosition.y - 1][playerPosition.x] === 0) {
        newPosition.y -= 1;
      }
      if(direction === "ArrowDown" && playerPosition.y < maze.length - 1 && maze[playerPosition.y + 1][playerPosition.x] === 0) {
        newPosition.y += 1;
      }
      if(direction === "ArrowLeft" && playerPosition.x > 0 && maze[playerPosition.y][playerPosition.x - 1] === 0) {
        newPosition.x -= 1;
      }
      if(direction === "ArrowRight" && playerPosition.x < maze[0].length - 1 && maze[playerPosition.y][playerPosition.x + 1] === 0) {
        newPosition.x += 1;
      }

if(maze[newPosition.y][newPosition.x] === 0) {
        playerPosition = newPosition;
        renderMaze();
        
        if(playerPosition.x === endPosition.x && playerPosition.y === endPosition.y) {
          alert("¡Has ganado!");
        }
      }
    };

renderMaze();

document.addEventListener("keydown", (event) => {
      movePlayer(event.key);
    });
  </script>
</body>
</html>