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

No:46377

128

←

Prev Next

→

Делай свой Yotube канал
Developer User20070｜Date and time 24/2/24 19:16:54
Build time 10.155 sec｜Game capacity 3.06KB｜

Script

Программируем игру "Пятнашки" на HTML с использованием JavaScript и пиктограмм.

Пятнашки

←

Prev　Next

→ 　

Back　

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

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

Программируем игру "Пятнашки" на HTML с использованием JavaScript и пиктограмм.
```html
<!DOCTYPE html>
<html>
<head>
    <title>Пятнашки</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .number {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            display: inline-block;
            margin: 5px;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Пятнашки</h1>
    <div id="puzzle"></div>
    <button onclick="shuffle()">Перемешать</button>

function moveTile(index) {
            let puzzle = document.getElementById('puzzle');
            let numbers = Array.from(puzzle.childNodes);
            let emptyIndex = numbers.findIndex(node => node.innerText === '');

if (isAdjacent(index, emptyIndex)) {
                [numbers[index].innerText, numbers[emptyIndex].innerText] = [numbers[emptyIndex].innerText, numbers[index].innerText];
                if (isSolved(numbers)) {
                    alert('Поздравляем, вы победили!');
                }
            }
        }

function isAdjacent(index1, index2) {
            let adjacentIndices = [[1, 4], [0, 2, 5], [1, 3, 6], [2, 7], [0, 5, 8], [1, 4, 6, 9], [2, 5, 7, 10], [3, 6, 11], [4, 9, 12], [5, 8, 10, 13], [6, 9, 11, 14], [7, 10, 15], [8, 13], [9, 12, 14], [10, 13, 15], [11, 14]];
            return adjacentIndices[index1].includes(index2);
        }

function isSolved(numbers) {
            return numbers.every((node, index) => node.innerText === '' || node.innerText == index + 1);
        }

function shuffle() {
            for (let i = 0; i < 1000; i++) {
                let numbers = Array.from(document.getElementById('puzzle').childNodes);
                let emptyIndex = numbers.findIndex(node => node.innerText === '');
                let movableIndices = numbers.reduce((acc, node, index) => isAdjacent(index, emptyIndex) ? acc.concat(index) : acc, []);
                let randomIndex = movableIndices[Math.floor(Math.random() * movableIndices.length)];
                moveTile(randomIndex);
            }
        }

createPuzzle();
    </script>
</body>
</html>
```