Create a remember the path maze's game

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

No:48187

133

←

Prev Next

→

Create a remember the path maze
Developer User20713｜Date and time 24/3/1 17:46:09
Build time 9.565 sec｜Game capacity 1.799KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Remember the Path</title>
  </head>
  <body>
    <canvas id="mazeCanvas" width="400" height="400"></canvas>

const cellSize = 40;
      const maze = [
        [1, 0, 1, 1, 1],
        [1, 1, 0, 0, 1],
        [1, 1, 1, 0, 1],
        [0, 0, 1, 1, 1],
        [1, 1, 1, 0, 1]
      ];

let playerX = 0;
      let playerY = 0;

function drawMaze() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let y = 0; y < maze.length; y++) {
          for (let x = 0; x < maze[y].length; x++) {
            if (maze[y][x] === 1) {
              ctx.fillStyle = 'black';
              ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
            }
          }
        }

ctx.fillStyle = 'red';
        ctx.fillRect(playerX * cellSize, playerY * cellSize, cellSize, cellSize);
      }

function movePlayer(direction) {
        const newX = playerX + direction[0];
        const newY = playerY + direction[1];

if (newX >= 0 && newX < maze[0].length && newY >= 0 && newY < maze.length && maze[newY][newX] === 1) {
          playerX = newX;
          playerY = newY;
        }

drawMaze();
      }

document.addEventListener('keydown', event => {
        switch (event.key) {
          case 'ArrowUp':
            movePlayer([0, -1]);
            break;
          case 'ArrowDown':
            movePlayer([0, 1]);
            break;
          case 'ArrowLeft':
            movePlayer([-1, 0]);
            break;
          case 'ArrowRight':
            movePlayer([1, 0]);
            break;
        }
      });

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