What is the best way to resume a paused animation using JavaScript?

Question

What is the best way to resume a paused animation using JavaScript?

My first game involves triggering an animation that transitions the game screen to greyscale when the character dies. Despite my efforts, I have been unable to successfully trigger this animation using

document.getElementById("object").animationPlayState = "running"

. The CSS code for the game is enclosed within a <div> element in HTML.

To view the full code on Codepen (which currently has some issues), please click on this link: 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 && rockLeft > 50 && 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);

javascript animation

Answer 1

Answer №1

You're attempting to modify an HTML element that doesn't exist. Update

document.getElementById("deathAnimation").style.animationPlayState = "running"

to

document.getElementById("game").style.animationPlayState = "running"

Check out this code snippet:

const background = document.getElementById('game')
const knight = document.getElementById('knight')
const rock = document.getElementById('rock')
const score = document.getElementById('score')
//transfer jump animation functionality to script
function jump() {
    knight.classList.add('jump-animation')
    setTimeout(() => {
        knight.classList.remove('jump-animation')
    }, 500)
}
//Trigger jump animation when any key is pressed
document.addEventListener('keypress', () => {
    if (!knight.classList.contains('jump-animation') && 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 && rockLeft > 50 && 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=VT323&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>

Answer 2

You're attempting to modify an HTML element that doesn't exist. Update

document.getElementById("deathAnimation").style.animationPlayState = "running"

to

document.getElementById("game").style.animationPlayState = "running"

Check out this code snippet:

const background = document.getElementById('game')
const knight = document.getElementById('knight')
const rock = document.getElementById('rock')
const score = document.getElementById('score')
//transfer jump animation functionality to script
function jump() {
    knight.classList.add('jump-animation')
    setTimeout(() => {
        knight.classList.remove('jump-animation')
    }, 500)
}
//Trigger jump animation when any key is pressed
document.addEventListener('keypress', () => {
    if (!knight.classList.contains('jump-animation') && 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 && rockLeft > 50 && 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=VT323&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>

What is the best way to resume a paused animation using JavaScript?

Answer №1

Similar questions

My discord.js bot remains silent in response to a user's message, even when no errors are present

Navigating a roster of users in JavaScript

The MVC execution sequence: Controller initialization happening after Ajax call

Create static HTML web pages using information from a text file

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

Sending information between children components in VueORTransferring data between

Automatically Assigning a Default Value to a Column Using SEQUELIZE ORM

Adjust the color of the active link on the page using Angular and CSS

Using `ng-model` within an Angular directive

Issue with Chart.js V3.20: Struggling to Filter Legend Labels

utilizing vue model attributes with `${}`

Unlimited scrolling feature resembling Facebook and Tumblr created using jQuery

Unable to input any text into the textfield

Updating certain fields in AngularJS with fresh data

Can you explain the purpose of this script? Is it considered harmful?

Monitoring Logfile in Ruby On Rails 3.1

What could be causing the redirection issue in a next.js application?

Improving the efficiency of my conditions in a function with Vue JS

Issue Detected at a Precise Line Number - Android Studio

Pass the identical event to multiple functions in Angular 2