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

Using jQuery Ajax to send data and retrieve responses in the Codeigniter framework

Tips for halting the live graph plotting based on a specific condition with canvas js

efficiency of a process during ng-repeat execution

Entering a new row and sending information through ajax

When a page with parameters is reloaded, React fails to initiate

Can an array in html be accessed using a scope variable?

Stubbing out a module's function with Sinon

Unable to locate the value property of a null object

Managing multiple Sequelize DB connections in NestJS: A guide

What sets npm run apart from npm start?

Is there a way to figure out the number of days from the current date using jQuery UI datepicker?

Hide bootstrap card on smaller screens such as sm and md

Tips for implementing and utilizing an optional parameter within Vue Router

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

How to create a loop in Selenium IDE for selecting specific values from a drop-down list?

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

How can you store JavaScript objects to files, including their methods, in a Node.js environment?

Highlighting a Table Column with a Radio Button

Group Hover by StyleX

Importing multiple exports dynamically in Next.js