Как запустить приостановленную анимацию с помощью javascript?

ProgramBox

Как запустить приостановленную анимацию с помощью javascript?

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

#javascript #animation

Вопрос:

Я хочу запустить анимацию, которая заставит игровой экран выцветать до оттенков серого, когда персонаж умрет. Это моя первая игра, так что она довольно проста. Мне не удалось успешно запустить анимацию. Мне не удалось успешно запустить анимацию. В Интернете я обнаружил, что document.getElementById("object").animationPlayState = "running" это должно сработать, но это не так. Это мой игровой цикл и CSS (игра <div> в HTML).

ссылка на полный код в codepen (не работает должным образом): https://codepen.io/flyingchicken22/pen/NWgVrJq

CSS:

 #game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
    background-size: cover;
    animation: deathAnimation 2s;
    animation-play-state: paused;
}

@keyframes deathAnimation {
    0%{filter:none;}
    100%{filter:grayscale(100%);}
}

Язык JavaScript:

 var gameLoop = setInterval(() => {
    dead = false
    function rockAnimation() {
        rock.classList.add('rockAnimation')
    }
    const knightTop = parseInt(window.getComputedStyle(knight).getPropertyValue('top'))
    const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'))
    if (rockLeft < 0) {
        rock.style.display = 'none'
    } else {
        rock.style.display = ''
    }

    if (rockLeft < 90 amp;amp; rockLeft > 50 amp;amp; knightTop > 79) {
        dead = true
    }
    score.innerText  

    const deathAnimation = document.getElementById("deathAnimation")
    const game = document.getElementById("game")
    if (dead == true) {
        clearInterval(gameLoop)
        document.getElementById("youDied").innerHTML = "YOU DIED"
        document.getElementById("playAgain").innerHTML = "Play Again?" 
        game.classList.add(deathAnimation)
        document.getElementById("deathAnimation").style.animationPlayState = "running"
    }
}, 50);

Ответ №1:

Вы пытаетесь вернуть HTML-элемент, который не существует. Изменить document.getElementById("deathAnimation").style.animationPlayState = "running" на document.getElementById("game").style.animationPlayState = "running"

Попробуйте следующий фрагмент

 const background = document.getElementById('game')
const knight = document.getElementById('knight')
const rock = document.getElementById('rock')
const score = document.getElementById('score')
//transfers jump animation to script
function jump() {
    knight.classList.add('jump-animation')
    setTimeout(() => {
        knight.classList.remove('jump-animation')
    }, 500)
}
//When any key is pressed, run jump animation
document.addEventListener('keypress', () => {
    if (!knight.classList.contains('jump-animation') amp;amp; dead == false) {
    jump(); 
    }  
})
//game loop
let dead



var gameLoop = setInterval(() => {
    dead = false
    function rockAnimation() {
        rock.classList.add('rockAnimation')
    }
    const knightTop = parseInt(window.getComputedStyle(knight).getPropertyValue('top'))
    const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'))
    if (rockLeft < 0) {
        rock.style.display = 'none'
    } else {
        rock.style.display = ''
    }

    if (rockLeft < 90 amp;amp; rockLeft > 50 amp;amp; knightTop > 79) {
        dead = true
    }
    score.innerText  

    const deathAnimation = document.getElementById("deathAnimation")
    const game = document.getElementById("game")
    if (dead == true) {
        clearInterval(gameLoop)
        document.getElementById("youDied").innerHTML = "YOU DIED"
       
game.classList.add(deathAnimation)
        document.getElementById("game").style.animationPlayState = "running"
    }
}, 50);

 html {
    background-color: black;
}

#score {
    text-align: center;
    color: rgba(102, 255, 0, 0.993);
}

#game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
    background-size: cover;
    animation: deathAnimation 2s;
    animation-play-state: paused;
}

@keyframes deathAnimation {
    0%{filter:none;}
    100%{filter:grayscale(100%);}
}


#knight {
    height: 100px;
    width: 75px;
    position: relative;
    top: 171px;
    left: 50px;
    background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f57b5304-de59-49e3-b0f9-cc29a2458425/dcgy8i3-e6dac283-04a7-40e5-a333-cc645e172df7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Y1N2I1MzA0LWRlNTktNDllMy1iMGY5LWNjMjlhMjQ1ODQyNVwvZGNneThpMy1lNmRhYzI4My0wNGE3LTQwZTUtYTMzMy1jYzY0NWUxNzJkZjcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.0LapCzRi5sQjkqzwB5lwWQT_XH1BM4rSMZt7jrflMLk");
    background-size: cover;
}

#rock {
    height: 50px;
    width: 50px;
    position: relative;
    top: 122px;
    left: 550px;
    background-image: url("http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/da268f06e621b21.png");
    background-size: cover;
    animation: rockAnimation 1s linear;
}

@keyframes rockAnimation {
    0%{left: 500px;}
    100%{left: -50px;}
}

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

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

@font-face {
    font-family: VT323;
    src: url(https://fonts.googleapis.com/css2?family=VT323amp;display=swap);
  }

#gameName {
    text-align: center;
    color: rgba(102, 255, 0, 0.993);
    font-size: 300%;
    font-family: 'VT323';
}

#youDied {
    text-align: center;
    color: rgba(102, 255, 0, 0.993);
    animation: youDied 2s infinite;
}

@keyframes youDied {
    0%{color: rgba(102, 255, 0, 0.993);}
    50%{color: black}
    100%{color: rgba(102, 255, 0, 0.993);}
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">
        <div id="knight"></div>
        <div id="rock"></div>

    </div>
    
    <h1 id="score">0</h1>
    <h1 id="gameName">KNIGHT HOPPER</h1>
    <h1 id="youDied"></h1>
    <script src="script.js"></script>
</body>
</html>

1. Добро пожаловать, я вижу, что у вас есть еще одна проблема. Анимация работает всего 2 секунды, а затем цвета возвращаются в нормальное состояние. Вы знаете, как это исправить, или вам нужна помощь?

2. Я знаю, как это исправить. Спасибо вам за вашу помощь.

Метки: Как запустить приостановленную анимацию с помощью javascript?