Artificial intelligence goes through a maze's game

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

No:15089

←

Prev Next

→

Artificial intelligence goes through a maze
Developer User6503｜Date and time 23/9/6 3:46:14
Build time 40.632 sec｜Game capacity 4.439KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Лабиринт</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #maze {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            height: 320px;
            border: 1px solid black;
        }
        .cell {
            width: 40px;
            height: 40px;
        }
        .player {
            background-image: url('player.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        .player.right {
            transform: rotate(90deg);
        }
        .player.left {
            transform: rotate(-90deg);
        }
        .player.down {
            transform: rotate(180deg);
        }
        .exit {
            background-image: url('exit.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        .obstacle {
            background-image: url('obstacle.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="maze"></div>

const mazeContainer = document.getElementById('maze');

function createMaze() {
            for (let i = 0; i < mazeSize; i++) {
                maze[i] = [];
                for (let j = 0; j < mazeSize; j++) {
                    maze[i][j] = 'empty';
                }
            }
            maze[0][0] = 'player';
            maze[mazeSize - 1][mazeSize - 1] = 'exit';
            maze[2][2] = 'obstacle';
            maze[4][1] = 'obstacle';
            maze[6][3] = 'obstacle';

renderMaze();
        }

function renderMaze() {
            mazeContainer.innerHTML = '';

for (let i = 0; i < mazeSize; i++) {
                for (let j = 0; j < mazeSize; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.classList.add(maze[i][j]);

mazeContainer.appendChild(cell);
                }
            }
        }

function movePlayer(direction) {
            let newPosition = { ...playerPosition };
            let canMove = false;

if (direction === 'up') {
                if (playerPosition.y > 0 && maze[playerPosition.y - 1][playerPosition.x] !== 'obstacle') {
                    newPosition.y -= 1;
                    canMove = true;
                }
            } else if (direction === 'down') {
                if (playerPosition.y < mazeSize - 1 && maze[playerPosition.y + 1][playerPosition.x] !== 'obstacle') {
                    newPosition.y += 1;
                    canMove = true;
                }
            } else if (direction === 'left') {
                if (playerPosition.x > 0 && maze[playerPosition.y][playerPosition.x - 1] !== 'obstacle') {
                    newPosition.x -= 1;
                    canMove = true;
                }
            } else if (direction === 'right') {
                if (playerPosition.x < mazeSize - 1 && maze[playerPosition.y][playerPosition.x + 1] !== 'obstacle') {
                    newPosition.x += 1;
                    canMove = true;
                }
            }

if (canMove) {
                maze[playerPosition.y][playerPosition.x] = 'empty';
                playerPosition = newPosition;
                maze[playerPosition.y][playerPosition.x] = 'player';
                renderMaze();

if (playerPosition.x === exitPosition.x && playerPosition.y === exitPosition.y) {
                    alert('Поздравляю, вы вышли из лабиринта!');
                }
            }
        }

window.addEventListener('keydown', handleKeyPress);
        createMaze();
    </script>
</body>
</html>