Игра на Java - скрипте

ProgramBox

Игра на Java — скрипте

Post author:admin
Запись опубликована:2 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Я ищу некоторую помощь в моей игре на Java-скрипте, поскольку я только начал разбираться в ней сейчас,

моя проблема в том, что моя анимация бесконечно повторяется при автоматической загрузке и перезагружает страницу каждый раз, когда она соответствует условию перезапуска, чего я хочу добиться, так это иметь кнопку «Пуск», которая запускала бы игру, анимацию и оценку по щелчку, и если условие перезапуска выполнено, я должен нажать кнопку «Пуск»снова, чтобы играть снова

Я был бы признателен за любую помощь, которую я мог бы получить

  const skate = document.getElementById("skate");
    const rock = document.getElementById("rock");
    const score = document.getElementById("score");

    function jump() {
    skate.classList.add("jump-animation");
    setTimeout(() =>
    skate.classList.remove("jump-animation"), 500);
    }

    document.addEventListener('keypress', (event) => {
    if (!skate.classList.contains('jump-animation')) {
    jump();
    }
    })

    setInterval(() => {
    const skateTop = parseInt(window.getComputedStyle(skate)
    .getPropertyValue('top'));
     const rockLeft = parseInt(window.getComputedStyle(rock)
    .getPropertyValue('left'));
     score.innerText  ;

     if (rockLeft < 0) {
     rock.style.display = 'none';
     } else {
     rock.style.display = ''
     }

     if (rockLeft < 50 amp;amp; rockLeft > 0 amp;amp; skateTop > 150) {
    
    location.reload();
    
    }
    }, 50);

     #score { text-align: center; }

    #game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("./background.gif");
    background-size: cover;
    }

    #skate {
     height: 75px;
     width: 75px;
     top: 220px;
     position: relative;
     background-image: url("./skateboard.png");
     background-size: cover;
     }

     #rock {
     width: 50px;
     height: 50px;
     position: relative;
     top: 175px;
     left: 550px;
     background-image: url("./rock.png");
     background-size: cover;
     animation: rock 1.33s infinite;
     }

     @keyframes rock {
     0%{left: 550px;}
     100%{left: -50px;}
     }

     .jump-animation {
     animation: jump 0.5s;
     }

    @keyframes jump {
    0%{top: 225px;}
    50%{top: 75px;}
    75%{top: 75px;}
    100%{top: 225px;}
    }

 <div id="game">
    <div id="skate"></div>
    <div id="rock"></div>
    </div>
    <h1 id="score">0</h1>

Развернуть фрагмент

1. не вызывать location.reload()

2. я удалил это, но анимация все еще продолжает повторяться, а счетчик очков продолжает увеличиваться

3. Не могли бы вы немного объяснить игру

Ответ №1:

Хитрость здесь в том, чтобы иметь переменную в верхней области этого модуля для отслеживания идентификатора текущей анимации, чтобы анимацию / интервал можно было отключить, если пользователь нажмет кнопку «Пуск» до окончания текущей игры. Он также должен отключаться после выполнения условия завершения игры, хотя я не совсем уверен, почему window.getComputedStyle() используется для вычисления переменных, используемых для этого условия, но я думаю, что это все еще продолжается.

РЕДАКТИРОВАТЬ: почему-то я не заметил, что игрок и препятствие уже были в игре, поэтому я добавил к ним цвета для упрощения отладки, по крайней мере, с моей стороны. На этот раз я сделал так, что камень потеряет, а затем немедленно восстановит класс для своей анимации, но повторное добавление должно быть асинхронным, даже если задержка составляет 0 мс.

index.html

 <head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="game">
        <div id="skate"></div>
        <div id="rock"></div>
    </div>
    <h1 id="score">0</h1>
    </div>
    <div>
        <button id="new-game">New Game </button>
    </div>
</body>

<script>
    const skate = document.getElementById("skate");
    const rock = document.getElementById("rock");
    const score = document.getElementById("score");
    const newGameButton = document.getElementById("new-game");

    function jump() {
        skate.classList.add("jump-animation");
        setTimeout(() => skate.classList.remove("jump-animation"), 500);
    }

    document.addEventListener('keypress', (event) => {
        if (!skate.classList.contains('jump-animation')) {
            jump();
        }
    });


    let animationId;
    newGameButton.addEventListener('click', () => {
        resetScore();
        resetRockAnimation();
        playScoreAnimation();


        function resetScore() {
            clearInterval(animationId);
            score.innerText = 0;
        }
        function resetRockAnimation() {
            rock.classList = [];
            setTimeout(() => rock.classList.add('rock-animation'), 0);
        }
        function playScoreAnimation() {
            animationId = setInterval(() => {
                const skateTop = parseInt(window.getComputedStyle(skate).getPropertyValue('top'));
                const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'));
                score.innerText  ;

                if (rockLeft < 0) {
                    rock.style.display = 'none';
                }
                else {
                    rock.style.display = '';
                }

                if (rockLeft < 50 amp;amp; rockLeft > 0 amp;amp; skateTop > 150) {
                    clearInterval(animationId);
                }
            }, 50);
        }
    });
</script>

style.css

 #score {
    text-align: center;
}

#game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("./background.gif");
    background-size: cover;
}

#skate {
    height: 75px;
    width: 75px;
    top: 225px;
    position: relative;
    background-image: url("./skateboard.png");
    background-size: cover;

    background-color: slategrey;
}

#rock {
    width: 50px;
    height: 50px;
    position: relative;
    top: 175px;
    left: 550px;
    background-image: url("./rock.png");
    background-size: cover;

    background-color: lightcoral ;
}

.rock-animation {
    animation: rock 1.33s infinite;
}

@keyframes rock {
    0% {
        left: 550px;
    }

    100% {
        left: -50px;
    }
}

.jump-animation {
    animation: jump 0.5s;
}

@keyframes jump {
    0% {
        top: 225px;
    }

    50% {
        top: 75px;
    }

    75% {
        top: 75px;
    }

    100% {
        top: 225px;
    }
}

1. анимация для #rock по-прежнему выполняется без нажатия кнопки hen, когда я добавил эти изменения. функция перехода и оценка не активируются, пока я не нажму новую игру, как и должно быть

2. Наверное, я запутался, потому что не мог видеть элементы скейта или рока и просто предположил, что вы все еще работаете над этим, поэтому я сосредоточился только на партитуре

3. Я не знаю, получают ли люди уведомления при обновлении ответа, но этот комментарий должен сообщить вам, что я это сделал