A game where you're a box and you go thru a maze. If you hit the walls the game resets, if you make it to the end you win. Make it more difficult slowly.'s game

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

No:46140

108

←

Prev Next

→

A game where you're a box and you go thru a maze. ..ALL
Developer Willy｜Date and time 24/2/23 16:56:58
Build time 14.359 sec｜Game capacity 2.522KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Box Maze Game</title>
    <style>
      #game {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        width: 20px;
        height: 20px;
        background-color: blue;
      }
      .wall {
        width: 20px;
        height: 20px;
        background-color: black;
      }
      .end {
        width: 20px;
        height: 20px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="game"></div>
    <script>
      const maze = [
        [0, 0, 0, 1, 0],
        [1, 1, 0, 1, 0],
        [0, 0, 0, 1, 0],
        [1, 0, 0, 1, 0],
        [0, 1, 1, 1, 1]
      ];
      let playerPos = [0, 0];
      const gameArea = document.getElementById('game');
      renderGame();
      
      function renderGame() {
        gameArea.innerHTML = '';
        maze.forEach((row, rowIndex) => {
          row.forEach((cell, columnIndex) => {
            const block = document.createElement('div');
            block.className = cell === 1 ? 'wall' : '';
            if (playerPos[0] === rowIndex && playerPos[1] === columnIndex) {
              block.className = 'box';
            } else if (rowIndex === maze.length - 1 && columnIndex === row.length - 1) {
              block.className = 'end';
            }
            gameArea.appendChild(block);
          });
        });
      }
      
      document.addEventListener('keydown', function(event) {
        event.preventDefault();
        const key = event.key;
        let newPosX = playerPos[0];
        let newPosY = playerPos[1];
  
        if (key === 'ArrowUp' && playerPos[0] > 0 && maze[playerPos[0] - 1][playerPos[1]] !== 1) {
          newPosX--;
        } else if (key === 'ArrowDown' && playerPos[0] < maze.length - 1 && maze[playerPos[0] + 1][playerPos[1]] !== 1) {
          newPosX++;
        } else if (key === 'ArrowLeft' && playerPos[1] > 0 && maze[playerPos[0]][playerPos[1] - 1] !== 1) {
          newPosY--;
        } else if (key === 'ArrowRight' && playerPos[1] < maze[0].length - 1 && maze[playerPos[0]][playerPos[1] + 1] !== 1) {
          newPosY++;
        }
  
        if (maze[newPosX][newPosY] !== 1) {
          playerPos = [newPosX, newPosY];
          renderGame();
          if (newPosX === maze.length - 1 && newPosY === maze[0].length - 1) {
            alert('Congratulations, you won!');
          }
        }
      });
    </script>
  </body>
</html>
```