碰撞實施
[英]Collision Implementation
問題描述
我有一個可以檢測並實現側面碰撞的游戲。 一切正常，但是由於檢測和執行之間存在時間間隔，因此會發生類似於振動的運動。 效果很好，但振動確實使我感到煩惱。 提前謝謝你的幫助。
這是我的代碼：
<!DOCTYPE html> <html> <head> <title>Game</title> <style> html, body { height: 100%; width: 100%; margin: 0; } #player { background: #000; position: fixed; height: 10px; width: 10px; left: 0px; top: 0px; } #powerup { background: blue; position: fixed; height: 10px; width: 10px; } </style> </head> <body onkeydown="move(event)"> <div id="player"></div> <script> var player = document.getElementById("player"); var powerup = document.getElementById("powerup"); var object = document.getElementsByClassName("object"); var counter = 0; var addcounter = setInterval(createObject,1); function createObject() { counter++; var newObject = document.createElement("DIV"); newObject.setAttribute("class", "object"); newObject.setAttribute("id", "powerup"); newObject.style.top = Math.floor(Math.random() * (window.innerHeight - 10)) + 10 + "px"; newObject.style.left = Math.floor(Math.random() * (window.innerWidth - 10)) + 10 + "px"; document.body.appendChild(newObject); if (counter > 10) { clearInterval(addcounter); } } setInterval(collisionDetection,1); function collisionDetection() { for (i = 0; i < object.length; i++) { // Player Right to Object Left if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 && player.offsetLeft + player.offsetWidth >= object[i].offsetLeft && player.offsetTop < object[i].offsetTop + object[i].offsetHeight && player.offsetHeight + player.offsetTop > object[i].offsetTop) { player.style.left = object[i].offsetLeft - player.offsetWidth + "px"; } // Player Left to Object Right if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 && player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth && player.offsetTop < object[i].offsetTop + object[i].offsetHeight && player.offsetHeight + player.offsetTop > object[i].offsetTop) { player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px"; } // Player Bottom to Object Top if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth && player.offsetLeft + player.offsetWidth > object[i].offsetLeft && player.offsetTop + player.offsetHeight >= object[i].offsetTop && player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) { player.style.top = object[i].offsetTop - player.offsetHeight + "px"; } // Player Top to Object Bottom if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth && player.offsetLeft + player.offsetWidth > object[i].offsetLeft && player.offsetTop <= object[i].offsetTop + object[i].offsetHeight && player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) { player.style.top = object[i].offsetTop + object[i].offsetHeight + "px"; } } } function move(event) { var key = event.keyCode; if (key == 40) { player.style.top = player.offsetTop + 1 + "px"; } if (key == 39) { player.style.left = player.offsetLeft + 1 + "px"; } if (key == 38) { player.style.top = player.offsetTop - 1 + "px"; } if (key == 37) { player.style.left = player.offsetLeft - 1 + "px"; } } </script> </body> </html>
1 個解決方案
解決方案1
0 2018-05-25 22:15:25
之所以引起抖動，是因為該移動發生在“ keydown”回調中，並不是在持有關鍵幀的每個幀中都調用該回調。 而是可以在按下鍵時將鍵狀態存儲在變量中，然后在釋放鍵時將其標記為未按下。 我已修改您的示例以使運動更平滑。
我還添加了一個更新功能，該功能可以檢查按下的鍵，從而使角色的移動發生在每一幀中。
通過更多的工作，您可以創建一個管理器，使您可以檢查按下了哪些鍵。 您也可以將碰撞檢測功能移動到角色移動之后，以確保玩家在幀結束之前位於正確的位置。
希望有幫助！
<!DOCTYPE html> <html> <head> <title>Game</title> <style> html, body { height: 100%; width: 100%; margin: 0; } #player { background: #000; position: fixed; height: 10px; width: 10px; left: 0px; top: 0px; } #powerup { background: blue; position: fixed; height: 10px; width: 10px; } </style> </head> <!-- NOTE: Added a keyup event --> <body onkeydown="keydown(event)" onkeyup="keyup(event)"> <div id="player"></div> <script> var player = document.getElementById("player"); var powerup = document.getElementById("powerup"); var object = document.getElementsByClassName("object"); var counter = 0; var addcounter = setInterval(createObject,1); function createObject() { counter++; var newObject = document.createElement("DIV"); newObject.setAttribute("class", "object"); newObject.setAttribute("id", "powerup"); newObject.style.top = Math.floor(Math.random() * (window.innerHeight - 10)) + 10 + "px"; newObject.style.left = Math.floor(Math.random() * (window.innerWidth - 10)) + 10 + "px"; document.body.appendChild(newObject); if (counter > 10) { clearInterval(addcounter); } } setInterval(collisionDetection,1); function collisionDetection() { for (i = 0; i < object.length; i++) { // Player Right to Object Left if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 && player.offsetLeft + player.offsetWidth >= object[i].offsetLeft && player.offsetTop < object[i].offsetTop + object[i].offsetHeight && player.offsetHeight + player.offsetTop > object[i].offsetTop) { player.style.left = object[i].offsetLeft - player.offsetWidth + "px"; } // Player Left to Object Right if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 && player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth && player.offsetTop < object[i].offsetTop + object[i].offsetHeight && player.offsetHeight + player.offsetTop > object[i].offsetTop) { player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px"; } // Player Bottom to Object Top if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth && player.offsetLeft + player.offsetWidth > object[i].offsetLeft && player.offsetTop + player.offsetHeight >= object[i].offsetTop && player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) { player.style.top = object[i].offsetTop - player.offsetHeight + "px"; } // Player Top to Object Bottom if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth && player.offsetLeft + player.offsetWidth > object[i].offsetLeft && player.offsetTop <= object[i].offsetTop + object[i].offsetHeight && player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) { player.style.top = object[i].offsetTop + object[i].offsetHeight + "px"; } } } // NOTE: Storing the pressed key in a variable var key = -1; function keyup() { key = -1; } function keydown(event) { key = event.keyCode; } // NOTE: Running the update function every frame function update() { if (key == 40) { player.style.top = player.offsetTop + 1 + "px"; } if (key == 39) { player.style.left = player.offsetLeft + 1 + "px"; } if (key == 38) { player.style.top = player.offsetTop - 1 + "px"; } if (key == 37) { player.style.left = player.offsetLeft - 1 + "px"; } requestAnimationFrame(update); } update(); </script> </body> </html>
多邊形碰撞檢測實現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.