Why won't make my code work.

Question

This code is supposed to detect when two elements are in contact (I will include the relevant html , css, and js):

<div id="playArea">
<hr id="ground">
<h1 id="character"></h1>
<h3 id="enemy"></h3>

css: #playArea {
width: 1250px;
height: 400px;
background-color: black;
border-radius: 50px;
}
#ground {
background-color: black;
position: relative;
top: 265px;
}
#character {
width: 40px;
height: 40px;
background-color: white;
position: relative;
top: 200px;
}
.jumping {
animation-name: jumping;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

@keyframes jumping {
0% {
transform: translateY(0px);
}
14.2% {
transform: translateY(-20px);
}
28.4% {transform: translateY(-55px);
}
42.6% {
transform: translateY(-70px);
}
64.8% {
transform: translateY(-55px);
}
79% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
#enemy {
width: 20px;
height: 20px;
background-color: red;
position: relative;
left: 625px;
top: 160px;
animation-name: incoming;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes incoming {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-1250px);
}
}
js: var character = document.getElementById("character");
var playArea = document.getElementById("playArea");
var enemy = document.getElementById("enemy");
var hasJumped = false
function jumper() {
playArea.addEventListener("click", function() {
character.classList.add("jumping");
function remove() {
character.classList.remove("jumping")
}
setTimeout(remove, 1005)
}
);
}
var characterStatus = setInterval(function() {
var characterCollison = parseInt(window.getComputedStyle(character).getPropertyValue("top"))
var enemyCollison = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"))
if (enemyCollison === 0 && characterCollison >= 180 ) {
alert("HELLO")
}
}, 1);

Answer 1

In the Create section you can create a code. Then you come back here and click on the plus sign. You find it left next to the send button, when you write a comment.
If you open a code there also is a share button on the top right. You can then paste the link here.

Answer 2

Thx so i dont have to Post 3 Times the same

Answer 3

I see a couple of potential issues in your code that might be causing it not to work as expected:

Typo in the CSS: In your CSS code, you have a typo in the animation-name property for the #enemy element. It should be incoming instead of incomingg.

Collision Detection: Your collision detection logic might not work as expected. You're checking if enemyCollison is equal to 0, but based on your animation, the enemy starts at left: 625px and moves to the left, so enemyCollison will never be 0. You might want to adjust your collision logic accordingly.

Event Listener: Make sure that the jumper function is called somewhere in your code so that the click event listener for jumping is properly initialized.

Timing: The timing values in your animations (e.g., animation-duration and setTimeout) might need adjustment to ensure that your animations and collision detection sync up correctly.

Double-check these points and try to address them in your code to see if it resolves the issues you're encountering.

Answer 4

This should Work:

<div id="playArea">
<hr id="ground">
<div id="character"></div>
<div id="enemy"></div>
</div>

Answer 5

#playArea {
width: 1250px;
height: 400px;
background-color: black;
border-radius: 50px;
position: relative;
}

#ground {
background-color: black;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

#character {
width: 40px;
height: 40px;
background-color: white;
position: absolute;
bottom: 0;
left: 100px; /* Adjust the starting position */
}

#enemy {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
bottom: 0;
left: 625px;
animation-name: incoming;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes incoming {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-1250px);
}
}

.jumping {
animation-name: jumping;
animation-duration: 1s;
animation-timing-function: linear;
}

Answer 6

@keyframes jumping {
0% {
transform: translateY(0px);
}
14.2% {
transform: translateY(-20px);
}
28.4% {
transform: translateY(-55px);
}
42.6% {
transform: translateY(-70px);
}
64.8% {
transform: translateY(-55px);
}
79% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}

Answer 7

var character = document.getElementById("character");
var playArea = document.getElementById("playArea");
var enemy = document.getElementById("enemy");
var hasJumped = false;

function jumper() {
playArea.addEventListener("click", function() {
if (!hasJumped) {
character.classList.add("jumping");
hasJumped = true;

setTimeout(function() {
character.classList.remove("jumping");
hasJumped = false;
}, 1000); // Adjust the timing here to match the animation
}
});
}

jumper();

var characterStatus = setInterval(function() {
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("bottom"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));

if (enemyLeft <= 60 && characterTop >= 80) {
alert("Collision detected!");
// You can perform other actions here as needed
}
}, 1);

Answer 8

BTW you can insert code with the plus sign. 😅🤗

Answer 9

Like how?