+ 1

Why won't make my code work.

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);

30th Sep 2023, 5:29 AM
Blue
Blue - avatar
9 Answers
+ 2
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.
30th Sep 2023, 7:46 AM
Stefanoo
Stefanoo - avatar
+ 2
Thx so i dont have to Post 3 Times the same
30th Sep 2023, 7:47 AM
D1M3
D1M3 - avatar
0
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.
30th Sep 2023, 6:12 AM
D1M3
D1M3 - avatar
0
This should Work: <div id="playArea"> <hr id="ground"> <div id="character"></div> <div id="enemy"></div> </div>
30th Sep 2023, 6:14 AM
D1M3
D1M3 - avatar
0
#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; }
30th Sep 2023, 6:14 AM
D1M3
D1M3 - avatar
0
@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); } }
30th Sep 2023, 6:15 AM
D1M3
D1M3 - avatar
0
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);
30th Sep 2023, 6:15 AM
D1M3
D1M3 - avatar
0
BTW you can insert code with the plus sign. 😅🤗
30th Sep 2023, 7:08 AM
Stefanoo
Stefanoo - avatar
0
Like how?
30th Sep 2023, 7:08 AM
D1M3
D1M3 - avatar