[html]<script src="https://forumstatic.ru/files/001c/a2/2d/79774.js?v=1"></script>[/html]
[html]

<style>
.classics-game {
    width: 700px;
    margin: 30px auto;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 28px;
    background: #e8e0d1;
    font-family: Georgia, serif;
    color: #38342f;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

/* ЗАГОЛОВОК */

.classics-title {
    font-size: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.classics-subtitle {
    font-size: 14px;
    opacity: .7;
    margin-bottom: 25px;
}

/* ПОЛЕ */

.classics-field {
    width: 330px;
    margin: 0 auto 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* КЛЕТКИ */

.classics-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.classics-cell {
    width: 100px;
    height: 70px;
    border: 3px solid #38342f;
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4eddf;
    font-size: 22px;
    font-weight: bold;
    transition: .35s;
}

/* ФИШКА */

.classics-cell.active {
    background: #d7c8aa;
    transform: scale(1.05);
}

.player {
    position: absolute;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #8c5260;
    border: 3px solid #fff;
    box-shadow: 0 2px 7px rgba(0,0,0,.3);
    transition: .45s;
    z-index: 5;
}

/* СТАРТ И ФИНИШ */

.start-cell {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.finish-cell {
    background: #d8c6a3;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* КУБИК */

.dice-area {
    margin: 10px 0 25px;
}

.dice {
    width: 75px;
    height: 75px;
    margin: 0 auto 15px;
    border-radius: 15px;
    background: #fffaf0;
    border: 3px solid #38342f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    box-shadow: 0 5px 0 #38342f;
    transition: transform .15s;
}

.dice.roll {
    animation: diceRoll .6s ease;
}

@keyframes diceRoll {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(20deg) scale(1.1);
    }
    50% {
        transform: rotate(-20deg) scale(.95);
    }
    75% {
        transform: rotate(15deg) scale(1.08);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* КНОПКА */

.roll-button {
    border: 0;
    padding: 13px 30px;
    border-radius: 30px;
    background: #38342f;
    color: #fffaf0;
    font-family: Georgia, serif;
    font-size: 15px;
    cursor: pointer;
    transition: .25s;
}

.roll-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,.2);
}

.roll-button:active {
    transform: translateY(1px);
}

/* РЕЗУЛЬТАТ */

.result {
    min-height: 25px;
    margin-bottom: 15px;
    font-size: 16px;
}

.result strong {
    font-size: 20px;
}

/* ЗАДАНИЕ */

.task {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border-radius: 18px;
    background: #f7f0e3;
    border: 2px dashed #38342f;
    animation: appear .4s ease;
}

.task.show {
    display: block;
}

.task-number {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .6;
    margin-bottom: 8px;
}

.task-text {
    font-size: 17px;
    line-height: 1.5;
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.finish-message {
    display: none;
    margin-top: 20px;
    padding: 18px;
    border-radius: 18px;
    background: #d8c6a3;
    font-size: 18px;
}

.finish-message.show {
    display: block;
}
</style>

<div class="classics-game">

    <div class="classics-title">
        Дворовые классики
    </div>

    <div class="classics-subtitle">
        бросай кубик и прыгай до самого конца
    </div>

    <div class="classics-field">

        <div class="classics-row">
            <div class="classics-cell finish-cell" data-cell="10">
                <span>10</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell" data-cell="9">
                <span>9</span>
            </div>
            <div class="classics-cell" data-cell="8">
                <span>8</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell" data-cell="7">
                <span>7</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell" data-cell="6">
                <span>6</span>
            </div>
            <div class="classics-cell" data-cell="5">
                <span>5</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell" data-cell="4">
                <span>4</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell" data-cell="3">
                <span>3</span>
            </div>
            <div class="classics-cell" data-cell="2">
                <span>2</span>
            </div>
        </div>

        <div class="classics-row">
            <div class="classics-cell start-cell" data-cell="1">
                1 · старт
            </div>
        </div>

    </div>

    <div class="dice-area">

        <div class="dice" id="dice">
            ?
        </div>

        <button class="roll-button" onclick="rollDice()">
            Бросить кубик
        </button>

    </div>

    <div class="result" id="result">
        Бросай кубик, чтобы сделать первый прыжок
    </div>

    <div class="task" id="task">

        <div class="task-number" id="taskNumber"></div>

        <div class="task-text" id="taskText"></div>

    </div>

    <div class="finish-message" id="finishMessage">
        🏆 Ты допрыгал(а) до конца!<br>
        Поздравляем с победой!
    </div>

</div>

<script>

let position = 0;

const tasks = {

    1: "Расскажи о своей самой любимой игре из детства.",

    2: "Назови сладость, которую ты мог(ла) есть бесконечно.",

    3: "Покажи фотографию, которая напоминает тебе о детстве.",

    4: "Какое летнее воспоминание ты бы с удовольствием повторил(а)?",

    5: "Назови песню, которая моментально возвращает тебя в детство.",

    6: "Какой мультфильм ты мог(ла) пересматривать снова и снова?",

    7: "Что ты обязательно покупал(а) себе в магазине после прогулки?",

    8: "Расскажи о своей самой смешной дворовой истории.",

    9: "Назови вещь из детства, которую ты хотел(а) бы вернуть.",

    10: "ФИНИШ! Покажи фотографию или расскажи историю, которая лучше всего описывает твоё детство."

};

const dice = document.getElementById("dice");
const result = document.getElementById("result");
const task = document.getElementById("task");
const taskNumber = document.getElementById("taskNumber");
const taskText = document.getElementById("taskText");
const finishMessage = document.getElementById("finishMessage");

function rollDice() {

    const button = document.querySelector(".roll-button");

    button.disabled = true;

    dice.classList.remove("roll");

    void dice.offsetWidth;

    dice.classList.add("roll");

    setTimeout(function() {

        const number = Math.floor(Math.random() * 6) + 1;

        dice.textContent = number;

        let newPosition = position + number;

        if (newPosition > 10) {
            newPosition = 10;
        }

        position = newPosition;

        document.querySelectorAll(".classics-cell").forEach(function(cell) {
            cell.classList.remove("active");

            const oldPlayer = cell.querySelector(".player");

            if (oldPlayer) {
                oldPlayer.remove();
            }
        });

        const currentCell = document.querySelector(
            '.classics-cell[data-cell="' + position + '"]'
        );

        currentCell.classList.add("active");

        const player = document.createElement("div");
        player.className = "player";

        currentCell.appendChild(player);

        result.innerHTML =
            "Выпало: <strong>" + number +
            "</strong> · ты прыгаешь на клетку <strong>" +
            position + "</strong>";

        task.classList.add("show");

        taskNumber.textContent =
            "клетка " + position;

        taskText.textContent =
            tasks[position];

        if (position === 10) {

            finishMessage.classList.add("show");

            button.textContent = "Начать заново";

            button.disabled = false;

            button.onclick = function() {
                location.reload();
            };

        } else {

            button.disabled = false;

        }

    }, 600);

}

</script>

[/html]