Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play.
animation not functioning
<!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>Dino game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
<script src="index.js"></script>
</body>
</html>
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
document.addEventListener("keydown", function (event) {
jump();
});
function jump() {
if (dino.classList != "jump") {
dino.classList.add("jump");
}
setTimeout(function () {
dino.classList.remove("jump");
}, 300)
}
.game {
width: 600px;
height: 200px;
border-bottom: 1px solid #000000;
margin: auto;
overflow: hidden;
}
#dino {
width: 50px;
height: 50px;
background-image: url(/image/dino/run1.png);
background-size: 50px 50px;
position: relative;
top: 150px;
animation: run 0.3s infinite linear;
}
@keyframes run {
0% {
background-image: url(/image/dino/run1.png);
}
50% {
background-image: url(/image/dino/run2.png);
}
100% {
background-image: url(/image/dino/run3.png);
}
}
#cactus {
width: 20px;
height: 40px;
background-image: url(/image/cactus/cactus.png);
background-size: 20px 40px;
position: relative;
top: 110px;
left: 580px;
animation: cactusMov 1s infinite linear;
}
@keyframes cactusMov {
0% {
left: 580px;
}
100% {
left: -20px;
}
}
.jump {
animation: jump 0.3s linear;
}
@keyframes jump {
0% {
top: 150px;
}
30% {
top: 130px;
}
50% {
top: 180px;
}
80% {
top: 130px;
}
100% {
top: 150px;
}
}
I have verified that the function and condition are being triggered, the class is added to the dinosaur, yet the animation remains unresponsive. My objective is to initiate the jump animation upon pressing any keyboard key.