Make a easy maze game's game

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

No:21879

←

Prev Next

→

Make a easy maze game
Developer User10101｜Date and time 23/10/19 2:27:19
Build time 81.034 sec｜Game capacity 4.526KB｜

Script

Sure! Here's an example of an easy maze game implemented as a single HTML file using JavaScript and enclosed within script tags:

In this game, the maze is represented as a grid layout created by the JavaScript function `createMaze()`. The player, represented by the green pictogram, starts at the top-left corner (cell: 1,1) and must navigate through the maze by using the arrow keys on the smartphone's keyboard to reach the exit, represented by the red pictogram in the bottom-right corner (cell: 5,5). Once the player reaches the exit, a congratulations message is displayed, and the game ends. Please note that you will need to provide your own image files for the player (`emozi_all/player.png`) and exit (`emozi_apple.png`) in the same directory as the HTML file for them to be displayed correctly. Feel free to modify the maze size, style, and image files as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of an easy maze game implemented as a single HTML file using JavaScript and enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Easy Maze Game</title>
  <style>
    /* CSS for the maze */
    .maze {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      height: 300px;
      width: 300px;
      border: 2px solid black;
    }
    .cell {
      background-color: white;
      border: 1px solid black;
    }
    .player {
      background-color: green;
    }
    .exit {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="maze" id="maze"></div>

<div>
    <img src="player.png" alt="Player" id="player">
    <img src="exit.png" alt="Exit" id="exit">
  </div>

// Function to create the maze grid
    function createMaze() {
      for (let row = 1; row <= numRows; row++) {
        for (let col = 1; col <= numCols; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.setAttribute('data-row', row);
          cell.setAttribute('data-col', col);
          maze.appendChild(cell);
        }
      }
    }

// Function to handle player movement
    function handleKeyPress(event) {
      const key = event.key;
      let playerRow = parseInt(player.parentElement.getAttribute('data-row'));
      let playerCol = parseInt(player.parentElement.getAttribute('data-col'));

// Move player based on arrow keys
      if (key === 'ArrowUp' && playerRow > 1) {
        player.parentElement.removeAttribute('id');
        player.parentElement = document.querySelector(`[data-row='${playerRow-1}'][data-col='${playerCol}']`);
        player.parentElement.id = 'player';
      } else if (key === 'ArrowDown' && playerRow < numRows) {
        player.parentElement.removeAttribute('id');
        player.parentElement = document.querySelector(`[data-row='${playerRow+1}'][data-col='${playerCol}']`);
        player.parentElement.id = 'player';
      } else if (key === 'ArrowLeft' && playerCol > 1) {
        player.parentElement.removeAttribute('id');
        player.parentElement = document.querySelector(`[data-row='${playerRow}'][data-col='${playerCol-1}']`);
        player.parentElement.id = 'player';
      } else if (key === 'ArrowRight' && playerCol < numCols) {
        player.parentElement.removeAttribute('id');
        player.parentElement = document.querySelector(`[data-row='${playerRow}'][data-col='${playerCol+1}']`);
        player.parentElement.id = 'player';
      }

// Check if player reached the exit
      if (player.parentElement === exit.parentElement) {
        alert('Congratulations! You reached the exit.');
        maze.removeEventListener('keydown', handleKeyPress);
      }
    }

// Initialize the game
    function startGame() {
      createMaze();
      player.parentElement = document.querySelector('[data-row="1"][data-col="1"]');
      player.parentElement.id = 'player';
      exit.parentElement = document.querySelector(`[data-row='${numRows}'][data-col='${numCols}']`);
      exit.parentElement.id = 'exit';
      maze.addEventListener('keydown', handleKeyPress);
      maze.setAttribute('tabindex', '0'); // Enable keyboard events on maze
      maze.focus(); // Set focus on maze to receive key presses
    }

// Start the game when the DOM is ready
    document.addEventListener('DOMContentLoaded', startGame);
  </script>
</body>
</html>
```

Please note that you will need to provide your own image files for the player (`player.png`) and exit (`exit.png`) in the same directory as the HTML file for them to be displayed correctly. Feel free to modify the maze size, style, and image files as per your requirements.