Collision Detection In JavaScript - A Unusual Bug
Question
I am trying to detect collision detection in JavaScript on my game (It's a phone game) , but I can't think how to!
In my JavaScript there was a circle with an id of "playercircle", and i wnat to know how to collide it to other elements (coin, enemy, ex).
Here is one of the tries for the coin. But first check all my code:
if (playercircle.style.left == coin.style.left && playercircle.style.left == coin.style.left) {
score++;
}
So here's my code:
var score = 0; const coin = document.querySelector(".coin"); coin.style.top = Math.random()*130 + "px"; const enemy = document.querySelector(".enemy") enemy.style.top = Math.random()*100 + "px"; let playercircle=document.querySelector(".playercircle"); function moveLeft() { let left = parseInt(window.getComputedStyle(playercircle).getPropertyValue("left")); left -= 10; playercircle.style.left = left + "px"; } function moveUp() { let top = parseInt(window.getComputedStyle(playercircle).getPropertyValue("top")); top -= 10; playercircle.style.top = top + "px"; } function moveRight() { let left = parseInt(window.getComputedStyle(playercircle).getPropertyValue("left")); left += 10; playercircle.style.left = left + "px"; } function moveDown() { let top = parseInt(window.getComputedStyle(playercircle).getPropertyValue("top")); top += 10; playercircle.style.top = top + "px"; } if (playercircle.style.left == coin.style.left && playercircle.style.top == coin.style.top) { score = score + 1; alert(score) }
body { padding: 0; margin: 0; } #game { width: 300px; height: 350px; background-color: green; border: 1px solid black; margin: auto; overflow: hidden; } .playercircle { height: 50px; width: 50px; background-color: darkblue; border-radius: 50%; position: relative; top: 130px; left: 200px; overflow: hidden; } .coin { width: 50px; height: 50px; background-color: gold; border-radius: 50%; position: relative; left: 50px; overflow: hidden; } .enemy { width: 50px; height: 50px; background-color: red; position: relative; left: 50px; animation: enemy 3s infinite linear; } @keyframes enemy { 0%{top: 230px;} 50%{top: -120px;} 100%{top: 230px;} }
<!DOCTYPE html> <html lang="en"> <head> <title>Circle Game</title> </head> <body> <button id="btn-up"onclick="moveUp()">UP</button> <button id="btn-down"onclick="moveDown()">DOWN</button> <button id="btn-left"onclick="moveLeft()">LEFT</button> <button id="btn-right"onclick="moveRight()">RIGHT</button> <div id="game"> <div class="playercircle"></div> <div class="coin"></div> <div class="enemy"></div> </div> </body> </html>
When you run it instead of keyboard controls it uses button controls because it's a code bit on SoloLearn , a code tool for Android/IOS phones (and also computers).
1 answers
solution1
0 2020-11-23 04:03:10
Create an if conditional that specifies if enemy "px" is congruent to playercircle px. Ditto for coins. You might have to set up a function for "px" zones that act as collision modules.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.