AI game creator

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

No:49749

←

Prev Next

→

Maze runner
Developer User18896｜Date and time 24/3/6 11:07:10
Build time 7.708 sec｜Game capacity 2.062KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Maze Runner</title>
<style>
  img {
    width: 50px;
    height: 50px;
  }
</style>
</head>
<body>
<script>
  const maze = [
    ['start', 'wall', 'path', 'path', 'wall'],
    ['wall', 'wall', 'wall', 'path', 'wall'],
    ['path', 'path', 'wall', 'path', 'end'],
    ['wall', 'path', 'wall', 'wall', 'wall'],
    ['wall', 'path', 'path', 'path', 'wall']
  ];
  
  let playerPos = {x: 0, y: 0};
  
  const renderMaze = () => {
    const mazeContainer = document.createElement('div');
    
    maze.forEach(row => {
      row.forEach(cell => {
        const cellImg = document.createElement('img');
        cellImg.src = `${cell}.png`;
        mazeContainer.appendChild(cellImg);
      });
      mazeContainer.appendChild(document.createElement('br'));
    });
    
    document.body.appendChild(mazeContainer);
  };
  
  const movePlayer = (direction) => {
    let newPos = {x: playerPos.x, y: playerPos.y};
    
    if(direction === 'up' && playerPos.y > 0) {
      newPos.y--;
    } else if(direction === 'down' && playerPos.y < maze.length - 1) {
      newPos.y++;
    } else if(direction === 'left' && playerPos.x > 0) {
      newPos.x--;
    } else if(direction === 'right' && playerPos.x < maze[0].length - 1) {
      newPos.x++;
    }
    
    if(maze[newPos.y][newPos.x] !== 'wall') {
      maze[playerPos.y][playerPos.x] = 'path';
      playerPos = newPos;
      maze[playerPos.y][playerPos.x] = 'player';
      renderMaze();
      checkWin();
    }
  };
  
  const checkWin = () => {
    if(maze[playerPos.y][playerPos.x] === 'end') {
      alert('Congratulations! You have reached the end of the maze.');
    }
  };
  
  window.addEventListener('keydown', (event) => {
    switch(event.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>