AI game creator

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

No:7932

4212

←

Prev Next

→

Maze rats
Developer User3945｜Date and time 23/7/11 3:18:00
Build time 14.611 sec｜Game capacity 3.437KB｜

Script

Sure! Here's a simple maze game implemented as a single HTML file using JavaScript:

In this game, you navigate a player (represented by a smiley face) through a maze (represented by a grid of cells) to reach the exit (represented by a checkered flag). You can use the arrow keys to move the player up, down, left, or right. Once the player reaches the exit, a win message will be displayed and the game will be reset.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple maze game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Maze Rats</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #maze {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
    }
    
    .cell {
      border: 1px solid black;
      text-align: center;
      font-size: 24px;
      padding: 10px;
    }
    
    .player {
      background-color: yellow;
    }
    
    .exit {
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="maze"></div>
  
  <script>
    const mazeContainer = document.getElementById('maze');
    const mazeSize = 10;
    const mazeCells = [];
    let playerPosition = { row: 0, col: 0 };
    let exitPosition = { row: Math.floor(Math.random() * mazeSize), col: Math.floor(Math.random() * mazeSize) };
  
    function isExit(position) {
      return position.row === exitPosition.row && position.col === exitPosition.col;
    }
  
    function renderMaze() {
      mazeContainer.innerHTML = '';
  
      for (let row = 0; row < mazeSize; row++) {
        for (let col = 0; col < mazeSize; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.textContent = '⬛';
  
          if (isExit({ row, col })) {
            cell.classList.add('exit');
            cell.textContent = '🏁';
          }
  
          if (row === playerPosition.row && col === playerPosition.col) {
            cell.classList.add('player');
            cell.textContent = '😄';
          }
  
          mazeContainer.appendChild(cell);
          mazeCells.push(cell);
        }
      }
    }
  
    function movePlayer(direction) {
      const { row, col } = playerPosition;
  
      switch (direction) {
        case 'up':
          if (row > 0) playerPosition.row--;
          break;
        case 'down':
          if (row < mazeSize - 1) playerPosition.row++;
          break;
        case 'left':
          if (col > 0) playerPosition.col--;
          break;
        case 'right':
          if (col < mazeSize - 1) playerPosition.col++;
          break;
      }
  
      if (isExit(playerPosition)) {
        alert('You escaped the maze! 🏆');
        resetGame();
      }
  
      renderMaze();
    }
  
    function resetGame() {
      playerPosition = { row: 0, col: 0 };
      exitPosition = { row: Math.floor(Math.random() * mazeSize), col: Math.floor(Math.random() * mazeSize) };
  
      renderMaze();
    }
  
    document.addEventListener('keydown', function(e) {
      switch (e.key) {
        case 'ArrowUp':
          movePlayer('up');
          break;
        case 'ArrowDown':
          movePlayer('down');
          break;
        case 'ArrowLeft':
          movePlayer('left');
          break;
        case 'ArrowRight':
          movePlayer('right');
          break;
      }
    });
  
    renderMaze();
  </script>
</body>
</html>
```