Im trying to get the #block to end the game and give the score once it hits the character. At the moment it just continues to go without ending the game. Its like it doesn't see the character so it just continues to run. Before I added the images they were just boxes and the game worked fine. After adding the images the game Dosent respond as before.
Also the score just goes up without the character having to successfully jump. How do I fix that?
var character = document.getElementById("character");
var block = document.getElementById("block");
var counter=0;
function jump(){
if(character.classList == "animate"){return}
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},300);
}
var checkDead = setInterval(function() {
let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
block.style.animation = "none";
alert("Game Over. score: "+Math.floor(counter/100));
counter=0;
block.style.animation = "block 1s infinite linear";
}else{
counter++;
document.getElementById("scoreSpan").innerHTML = Math.floor(counter/100);
}
}, 10);*{
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.game{
width: 1000px;
height: 500px;
border: 1px solid black;
margin: auto;
margin-top: 5px;
position: relative;
}
.background-img-size {
width: 1000px;
height: 500px;
content: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
position: absolute;
}
#character{
display: inline-block;
position: relative;
margin-top: 39%;
}
.animate{
animation: jump 0.3s linear;
}
@keyframes jump{
0%{bottom: 300px;}
30%{bottom: 200px;}
70%{bottom: 150px;}
100%{bottom: px;}
}
#block{
display: inline-block;
position: relative;
margin-top: 39%;
left: 500px;
animation: block 3s infinite linear;
}
@keyframes block{
0%{left: 900px}
100%{left: -170px}
}
p{
text-align: center;
}<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Jump Game</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="game" >
<img class="background-img-size">
<div id="character"> <img src="https://www.serebii.net/swordshield/pokemon/101.png" width="80" height="80"></div>
<div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/027.png" width="80" height="80"></div>
<!-- <div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/094.png"></div> -->
</div>
<p>Score: <span id="scoreSpan"></span></p>
<script src="index.js"></script>
</body>
</html>