Create me a 2D maze game's game

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

No:44627

←

Prev Next

→

Create me a 2D maze game
Developer User19441｜Date and time 24/2/18 21:33:26
Build time 8.808 sec｜Game capacity 2.899KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>2D Maze Game</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(5, 50px);
            grid-template-rows: repeat(5, 50px);
            gap: 5px;
        }
        .cell {
            background-color: grey;
            border: 1px solid black;
            width: 50px;
            height: 50px;
        }
        #player {
            background-color: red;
        }
        #exit {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

function movePlayer(direction) {
            let newX = playerPosition.x;
            let newY = playerPosition.y;

if (direction === 'up') {
                newY -= 1;
            } else if (direction === 'down') {
                newY += 1;
            } else if (direction === 'right') {
                newX += 1;
            } else if (direction === 'left') {
                newX -= 1;
            }

if (newX >= 0 && newX < 5 && newY >= 0 && newY < 5) {
                playerPosition.x = newX;
                playerPosition.y = newY;
                
                document.querySelector('#player').remove();
                document.querySelector(`.cell[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`).appendChild(player);

if (playerPosition.x === exitPosition.x && playerPosition.y === exitPosition.y) {
                    alert('Congratulations! You reached the exit!');
                }
            }
        }

document.addEventListener('keydown', handleKeyPress);

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