DOCTYPE html html head title Simple Maze Game title style border 1px dashed green maze display grid grid template columns repeat 10 50px grid template rows repeat 10 50px border 2px solid black wall background color black position relative player background color red width 50px height 50px style head body h1 Simple Maze Game h1 div id maze div script const maze 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 1 1 1 1 1 0 1 1 1 0 1 1 0 0 0 0 1 0 0 0 1 1 1 1 1 0 1 1 1 0 1 1 0 0 0 0 0 0 0 0 1 1 1 1 0 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 1 1 1 1 1 0 1 1 1 0 1 1 1 1 1 1 1 1 1 2 1 const mazeElement document getElementById maze const playerElement document createElement div playerElement id player let playerRow 1 0 9 let playerCol 1 function renderMaze for let row 0 row maze length row for let col 0 col maze row length col const cell document createElement div cell classList add cell if maze row col 1 cell classList add wall if row playerRow col playerCol cell appendChild playerElement mazeElement appendChild cell function movePlayer event const key event key if key ArrowUp maze playerRow 1 playerCol 1 playerRow else if key ArrowDown maze playerRow 1 playerCol 1 playerRow else if key ArrowLeft maze playerRow playerCol 1 1 playerCol else if key ArrowRight maze playerRow playerCol 1 1 playerCol if maze playerRow playerCol 2 console log WON alert Congratulation document location reload Remove the player from the current cell const currentCell mazeElement children playerRow 10 playerCol currentCell removeChild playerElement Add the player to the new cell const newCell mazeElement children playerRow 10 playerCol newCell appendChild playerElement renderMaze document addEventListener keydown movePlayer script body html
cell classList add cell if maze row col 1 cell classList add wall if row playerRow col playerCol cell appendChild playerElement mazeElement appendChild cell function movePlayer event const key event key if key ArrowUp maze playerRow 1 playerCol 1 playerRow else if key ArrowDown maze playerRow 1 playerCol 1 playerRow else if key ArrowLeft maze playerRow playerCol 1 1 playerCol else if key ArrowRight maze playerRow playerCol 1 1 playerCol if maze playerRow playerCol 2 console log WON alert Congratulation document location reload Remove the player from the current cell const currentCell mazeElement children playerRow 10 playerCol currentCell removeChild playerElement Add the player to the new cell const newCell mazeElement children playerRow 10 playerCol newCell appendChild playerElement renderMaze document addEventListener keydown movePlayer script body html