A maze game's game | AI game creator

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

No:52893

422

A maze game
Developer User4855｜Date and time 24/3/26 17:38:21
Build time 15.097 sec｜Game capacity 2.252KB｜

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 5px;
    }
    .cell {
      width: 50px;
      height: 50px;
      background-color: gray;
    }
    .player {
      background-color: red;
    }
    .goal {
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container"></div>

<script>
    const maze = [
      [1,1,1,1,1],
      [1,0,0,0,1],
      [1,1,1,0,1],
      [1,0,1,0,1],
      [1,0,1,1,1],
      [1,0,0,0,0],
      [1,1,1,1,1]
    ];

const player = { x: 1, y: 1 };
    const goal = { x: 3, y: 5 };

function drawMaze() {
      const container = document.querySelector('.container');
      container.innerHTML = '';
      maze.forEach(row => {
        row.forEach(cell => {
          const div = document.createElement('div');
          div.className = 'cell';
          if(cell === 1) {
            div.style.backgroundColor = 'black';
            container.appendChild(div);
          } else if(player.x === maze.indexOf(row) && player.y === row.indexOf(cell)) {
            div.className = 'player';
            container.appendChild(div);
          } else if(goal.x === maze.indexOf(row) && goal.y === row.indexOf(cell)) {
            div.className = 'goal';
            container.appendChild(div);
          } else {
            container.appendChild(div);
          }
        });
      });
    }

document.addEventListener('keydown', e => {
      e.preventDefault();
      switch(e.key) {
        case 'ArrowUp':
          if(maze[player.x - 1][player.y] !== 1) {
            player.x--;
          }
          break;
        case 'ArrowDown':
          if(maze[player.x + 1][player.y] !== 1) {
            player.x++;
          }
          break;
        case 'ArrowLeft':
          if(maze[player.x][player.y - 1] !== 1) {
            player.y--;
          }
          break;
        case 'ArrowRight':
          if(maze[player.x][player.y + 1] !== 1) {
            player.y++;
          }
          break;
      }

if(player.x === goal.x && player.y === goal.y) {
        alert('You win!');
      }

drawMaze();
    });

drawMaze();
  </script>
</body>
</html>