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

No:19633

41

Puzlle to 500 level
Developer User8708｜Date and time 23/10/5 3:58:36
Build time 30.98 sec｜Game capacity 5.121KB｜

Конечно! Я могу создать игру пятнашки в виде одного HTML файла с использованием JavaScript и пиктограмм. Вот пример:

Игра Пятнашки

В этом примере я создал игру "Пятнашки" с использованием JavaScript и пиктограмм для отображения на плитках. Это единственный HTML файл (включающий в себя всю структуру страницы и стили), который можно запустить в браузере. Для каждого игрового квадрата мы использовали пиктограммы животных. Вы можете играть, перемещая плитки, чтобы собрать картинку. Если вы победите, вы получите оповещение, и игра будет сброшена для новой игры.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Конечно! Я могу создать игру пятнашки в виде одного HTML файла с использованием JavaScript и пиктограмм. Вот пример:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Игра Пятнашки</title>
    <style>
        .tile {
            width: 80px;
            height: 80px;
            background-color: #eee;
            border: 1px solid #666;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Игра Пятнашки</h1>
    <div id="board"></div>
    <script>
        // Создаем игровое поле
        const boardSize = 4; // Размер поле 4х4
        const tileCount = boardSize * boardSize;
        const emptyTile = tileCount;
        const tiles = [];

// Создаем массив пиктограмм для отображения на плитках
        const pictograms = ['🐱', '🐶', '🐻', '🐼', '🐯', '🐰', '🐸', '🐵', '🐔', '🐧', '🐨', '🐢', '🐙', '🐬', '🐞', '🐠'];

// Создаем игровое поле
        const board = document.getElementById('board');
        board.style.width = `${boardSize * 80}px`;

function createBoard() {
            for (let i = 0; i < tileCount; i++) {
                const tile = document.createElement('div');
                tile.classList.add('tile');
                tile.id = `tile-${i + 1}`;
                tile.innerText = pictograms[i];
                tile.addEventListener('click', () => moveTile(i + 1));
                tiles.push(tile);
                board.appendChild(tile);
            }
        }

// Перемешиваем плитки при начале игры
        function shuffleTiles() {
            for (let i = 0; i < tileCount - 1; i++) {
                const randomIndex = Math.floor(Math.random() * tileCount);
                swapTiles(i, randomIndex);
            }
        }

// Перемещаем плитку либо в указанную позицию, либо в пустую позицию
        function moveTile(tileId) {
            const currentIndex = tiles.findIndex(tile => Number(tile.id.split('-')[1]) === tileId);
            const emptyTileIndex = tiles.findIndex(tile => Number(tile.id.split('-')[1]) === emptyTile);

if (currentIndex !== -1) {
                if (canMoveToPosition(currentIndex, emptyTileIndex)) {
                    swapTiles(currentIndex, emptyTileIndex);
                    checkWin();
                }
            }
        }

// Проверяем, может ли плитка быть перемещена на указанную позицию
        function canMoveToPosition(currentIndex, emptyTileIndex) {
            const rowDiff = Math.abs(Math.floor(currentIndex / boardSize) - Math.floor(emptyTileIndex / boardSize));
            const colDiff = Math.abs((currentIndex % boardSize) - (emptyTileIndex % boardSize));
            return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
        }

// Меняем местами плитки в массиве и на доске
        function swapTiles(currentIndex, targetIndex) {
            [tiles[currentIndex], tiles[targetIndex]] = [tiles[targetIndex], tiles[currentIndex]];
            board.innerHTML = '';
            tiles.forEach(tile => board.appendChild(tile));
        }

// Проверяем, выиграл ли пользователь
        function checkWin() {
            const isWin = tiles.every((tile, index) => Number(tile.id.split('-')[1]) === index + 1);
            if (isWin) {
                setTimeout(() => {
                    alert('Вы выиграли!');
                    resetGame();
                }, 200);
            }
        }

// Сбрасываем игру
        function resetGame() {
            tiles.length = 0;
            board.innerHTML = '';
            createBoard();
            shuffleTiles();
        }

// Запускаем игру
        createBoard();
        shuffleTiles();
    </script>
</body>
</html>
```

В этом примере я создал игру "Пятнашки" с использованием JavaScript и пиктограмм для отображения на плитках. Это единственный HTML файл (включающий в себя всю структуру страницы и стили), который можно запустить в браузере. Для каждого игрового квадрата мы использовали пиктограммы животных. Вы можете играть, перемещая плитки, чтобы собрать картинку. Если вы победите, вы получите оповещение, и игра будет сброшена для новой игры.