JavaScript 中的碰撞檢測 - 一個不尋常的錯誤
[英]Collision Detection In JavaScript - A Unusual Bug
問題描述
我正在嘗試在我的游戲（這是一款手機游戲）中檢測 JavaScript 中的碰撞檢測，但我想不出如何！
在我的 JavaScript 中，有一個 id 為“playercircle”的圓圈，我想知道如何將它與其他元素（硬幣、敵人、ex）碰撞。
這是硬幣的嘗試之一。 但首先檢查我所有的代碼：
if (playercircle.style.left == coin.style.left && playercircle.style.left == coin.style.left) {
score++;
}
所以這是我的代碼：
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>
當你運行它而不是鍵盤控件時，它使用按鈕控件，因為它是SoloLearn上的一個代碼位，一個用於 Android/IOS 手機（以及計算機）的代碼工具。
1 個解決方案
解決方案1
0 2020-11-23 04:03:10
創建一個 if 條件，指定敵人“px”是否與玩家圈 px 一致。 硬幣同上。 您可能必須為充當碰撞模塊的“px”區域設置一個函數。
JavaScript Circle碰撞檢測錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.