堆棧內存溢出
  簡體   English   中英

球到矩形碰撞檢測畫布JavaScript

[英]Ball to rectangle collision detection canvas javascript

 原文  2018-02-03 10:27:27  0   2    javascript/ html/ canvas

問題描述

最近，我開始學習畫布動畫，並在網上關注了一些教程等。 但是我在數學方面開始遇到一些障礙。 一個特別的問題是，一旦球擊中了畫布內的div元素，就將其x和y坐標反轉。 可以在下面看到球的預期期望運動的圖片表示。

腔圖像

如您所見，我希望x和y坐標的球根據所觸摸的div的側面而變化。

目前，球確實可以在畫布的兩側正確反彈，並且也可以從主div的左側和右側正確反彈。 但是，一旦球觸及主div的頂部或底部，邏輯就會中斷。 我的項目代碼如下。 

 var canvas = document.querySelector('canvas'); var content = document.querySelector('.main-content h1'); var contentPosition = content.getBoundingClientRect(); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var radius = 10; var maxRadius = 20; var mouse = { x: undefined, y: undefined } var colour = [ '#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#FF0DFF' ]; window.addEventListener('mousemove', function(event){ mouse.x = event.x; mouse.y = event.y; }); //c = context var c = canvas.getContext('2d'); function circle(x, y, dx, dy, radius){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.minRadius = Math.floor(Math.random() * 10 + 1); this.fillColour = colour[Math.floor(Math.random() * colour.length )]; this.draw = function(){ c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI*2); c.fillStyle = this.fillColour; c.fill(); c.closePath(); } this.update = function(){ if(this.x + this.radius > innerWidth || this.x - this.radius < 0){ this.dx =- this.dx; } if(this.y + this.radius >= innerHeight || this.y - this.radius < 0){ this.dy =- this.dy; } if(this.x + this.radius > contentPosition.left && this.x - this.radius < contentPosition.right && this.y + this.radius > contentPosition.top && this.y - this.radius < contentPosition.bottom){ this.dx =- this.dx; } if(this.x - mouse.x < 50 && (this.x - mouse.x) > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50){ if(this.radius < maxRadius){ this.radius +=2; } } else if(this.radius > this.minRadius){ this.radius -= 2; } this.x += this.dx; this.y += this.dy; this.draw(); } } circleArray = []; function getDistance(x1, y1, x2, y2){ var xDistance = x2 - x1; var yDistance = y2 - y1; return Math.sqrt( Math.pow(xDistance, 2) + Math.pow(yDistance, 2)); } function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); } function init(){ for(i = 0; i < 100; i++){ x = randomIntFromInterval(radius, innerWidth - radius); y = randomIntFromInterval(radius, innerHeight - radius); dx = (Math.random() - 0.5) * 2; dy = (Math.random() - 0.5) * 2; circleArray.push(new circle(x, y, dx, dy, radius)); } } function animate(){ requestAnimationFrame(animate); c.clearRect(0, 0, innerWidth, innerHeight); for(i = 0; i < circleArray.length; i++){ circleArray[i].update(); } } init(); animate(); 
 canvas { position: fixed; z-index: -9999; } body { margin: 0; } .main-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-content h1{ font-weight: 700; font-size: 40px; text-shadow: 0 0 2px #464646; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles.css"> <title>Canvas Test</title> </head> <body> <canvas></canvas> <div class="main-content"> <h1 class="text-center">Example Text For Main Div</h1> </div> <script src="canvas.js"></script> </body> </html>

上面展示了整個工作邏輯。 從上面的代碼段檢測與主div發生沖突的代碼如下。 

 if(this.x + this.radius > contentPosition.left && this.x - this.radius < contentPosition.right  && this.y + this.radius > contentPosition.top && this.y - this.radius < contentPosition.bottom){
               this.dx =- this.dx;
            }

目前，一旦div的左側或右側被球擊中，只有球的x坐標發生變化。 如果主div的頂部或底部被擊中，我需要進行調整以包括Y坐標的更改。

任何有關如何糾正我的代碼的建議或任何有關基於在線數學知識的知識都將指向答案，將不勝感激。

提前致謝

更新資料

根據答案中給出的代碼更新圓投影路徑

在此處輸入圖片說明

2 個解決方案

解決方案1
 1  2018-02-03 11:57:54

已更新，以通知網格問題，此問題已得到修復，並包含顯示解決方案實際操作的代碼段。

基於給定的圖像，我假設圓將始終從矩形外部開始，並且矩形將始終與軸對齊。 您可以將每對對應的牆的x和y取反分開。 下面的解決方案測試了圓在div邊的中途發現自己的那一刻。 

// Aliases to avoid thinking of offsetting positions
var circleTop = this.y - this.radius;
var circleBottom = this.y + this.radius;
var circleLeft = this.x - this.radius;
var circleRight = this.x + this.radius;

// For uniformity with circle
var rectTop = contentPosition.top;
var rectBottom = contentPosition.bottom;
var rectLeft = contentPosition.left;
var rectRight = contentPosition.right;

// Circle penetration on the div's left and right walls
if (((circleRight > rectLeft && circleLeft < rectLeft) ||
    (circleLeft < rectRight && circleRight > rectRight)) &&
    circleTop < rectBottom && circleBottom > rectTop) {

    this.dx = -this.dx;
}

// Circle penetration on the div's top and bottom walls
if (((circleBottom > rectTop && circleTop < rectTop) ||               
    (circleTop < rectBottom && circleBottom > rectBottom)) &&
    circleLeft < rectRight && circleRight > rectLeft) {

    this.dy = -this.dy;
}

以下是移植了我的代碼。 

 var canvas = document.querySelector('canvas'); var content = document.querySelector('.main-content h1'); var contentPosition = content.getBoundingClientRect(); // For uniformity with circle var rectTop = contentPosition.top; var rectBottom = contentPosition.bottom; var rectLeft = contentPosition.left; var rectRight = contentPosition.right; canvas.width = window.innerWidth; canvas.height = window.innerHeight; var radius = 10; var maxRadius = 20; var mouse = { x: undefined, y: undefined } var colour = [ '#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#FF0DFF' ]; window.addEventListener('mousemove', function(event){ mouse.x = event.x; mouse.y = event.y; }); //c = context var c = canvas.getContext('2d'); function circle(x, y, dx, dy, radius){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.minRadius = Math.floor(Math.random() * 10 + 1); this.fillColour = colour[Math.floor(Math.random() * colour.length )]; this.draw = function(){ c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI*2); c.fillStyle = this.fillColour; c.fill(); c.closePath(); } this.update = function(){ if(this.x + this.radius > innerWidth || this.x - this.radius < 0){ this.dx =- this.dx; } if(this.y + this.radius >= innerHeight || this.y - this.radius < 0){ this.dy =- this.dy; } // Aliases to avoid thinking of offsetting positions var circleTop = this.y - this.radius; var circleBottom = this.y + this.radius; var circleLeft = this.x - this.radius; var circleRight = this.x + this.radius; // Circle penetration on the div's left and right walls if (((circleRight > rectLeft && circleLeft < rectLeft) || (circleLeft < rectRight && circleRight > rectRight)) && circleTop < rectBottom && circleBottom > rectTop) { this.dx = -this.dx; } // Circle penetration on the div's top and bottom walls if (((circleBottom > rectTop && circleTop < rectTop) || (circleTop < rectBottom && circleBottom > rectBottom)) && circleLeft < rectRight && circleRight > rectLeft) { this.dy = -this.dy; } if(this.x - mouse.x < 50 && (this.x - mouse.x) > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50){ if(this.radius < maxRadius){ this.radius +=2; } } else if(this.radius > this.minRadius){ this.radius -= 2; } this.x += this.dx; this.y += this.dy; this.draw(); } } circleArray = []; function getDistance(x1, y1, x2, y2){ var xDistance = x2 - x1; var yDistance = y2 - y1; return Math.sqrt( Math.pow(xDistance, 2) + Math.pow(yDistance, 2)); } function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); } function init(){ for(i = 0; i < 100; i++){ x = randomIntFromInterval(radius, innerWidth - radius); y = randomIntFromInterval(radius, innerHeight - radius); dx = (Math.random() - 0.5) * 2; dy = (Math.random() - 0.5) * 2; circleArray.push(new circle(x, y, dx, dy, radius)); } } function animate(){ requestAnimationFrame(animate); c.clearRect(0, 0, innerWidth, innerHeight); for(i = 0; i < circleArray.length; i++){ circleArray[i].update(); } } init(); animate(); 
 canvas { position: fixed; z-index: -9999; } body { margin: 0; } .main-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-content h1{ font-weight: 700; font-size: 40px; text-shadow: 0 0 2px #464646; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles.css"> <title>Canvas Test</title> </head> <body> <canvas></canvas> <div class="main-content"> <h1 class="text-center">Example Text For Main Div</h1> </div> <script src="canvas.js"></script> </body> </html>

請注意，如果圓的速度（您的this.dx和this.dy ）足夠大，並且div和circle足夠小，則該圓有可能通過div的壁而不會觸發以上碰撞條件。 在視頻游戲碰撞編程中，此問題稱為隧道傳輸，它具有更多涉及減輕影響的算法，例如提前投影運動形狀並針對其陰影進行測試。

對於更復雜的情況，您可能會發現一些涉及更多的碰撞算法很有用，例如當形狀不再與軸對齊時，“ 分離軸定理” （SAT算法）。

解決方案2
 1 已采納  2018-02-03 14:34:07

您要解決的問題是，您需要知道圓在哪個位置穿過框的邊界：通過水平邊框還是垂直邊框。 否則，您可能會停止翻轉錯誤的變量符號。

如果您檢查圓當前最接近框的四個邊中的哪一個，並讓該邊確定彈跳效果，則變得更加容易。

另外，我不僅會翻轉標志，還應明確說明標志應為什么，以免出現來回翻轉並晃動的情況。

這是它的外觀： 

if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
   this.dx = (this.x < this.radius || -1) * Math.abs(this.dx);
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
   this.dy = (this.y < this.radius || -1) * Math.abs(this.dy);
}
if (this.y + this.radius > contentPosition.top 
        && this.y - this.radius < contentPosition.bottom
        && this.x + this.radius > contentPosition.left 
        && this.x - this.radius < contentPosition.right) {
    // Choose which side of the box is closest to the circle's centre
    var dists = [Math.abs(this.x - contentPosition.left),
                 Math.abs(this.x - contentPosition.right),
                 Math.abs(this.y - contentPosition.top),
                 Math.abs(this.y - contentPosition.bottom)];
    // Get minimum value's index in array
    var i = dists.indexOf(Math.min.apply(Math, dists)); 
    // ... that will be the side that dictates the bounce
    if (i < 2) {
        this.dx = (i || -1) * Math.abs(this.dx);
    } else {
        this.dy = (i > 2 || -1) * Math.abs(this.dy);
    }
}

在此代碼段中，我還添加了一些代碼來避免圓的初始位置在框中： 

 var canvas = document.querySelector('canvas'); var content = document.querySelector('.main-content h1'); var contentPosition = content.getBoundingClientRect(); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var radius = 10; var maxRadius = 20; var mouse = { x: undefined, y: undefined } var colour = [ '#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#FF0DFF' ]; window.addEventListener('mousemove', function(event){ mouse.x = event.x; mouse.y = event.y; }); //c = context var c = canvas.getContext('2d'); function circle(x, y, dx, dy, radius){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.minRadius = Math.floor(Math.random() * 10 + 1); this.fillColour = colour[Math.floor(Math.random() * colour.length )]; this.draw = function(){ c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI*2); c.fillStyle = this.fillColour; c.fill(); c.closePath(); } this.update = function(){ if (this.x + this.radius > innerWidth || this.x - this.radius < 0) { this.dx = (this.x < this.radius || -1) * Math.abs(this.dx); } if (this.y + this.radius > innerHeight || this.y - this.radius < 0) { this.dy = (this.y < this.radius || -1) * Math.abs(this.dy); } if (this.y + this.radius > contentPosition.top && this.y - this.radius < contentPosition.bottom && this.x + this.radius > contentPosition.left && this.x - this.radius < contentPosition.right) { // Choose which side of the box is closest to the circle's centre var dists = [Math.abs(this.x - contentPosition.left), Math.abs(this.x - contentPosition.right), Math.abs(this.y - contentPosition.top), Math.abs(this.y - contentPosition.bottom)]; var i = dists.indexOf(Math.min.apply(Math, dists)); // Get minimum value's index in array // ... that will be the side that dictates the bounce if (i < 2) { this.dx = (i || -1) * Math.abs(this.dx); } else { this.dy = (i > 2 || -1) * Math.abs(this.dy); } } if(this.x - mouse.x < 50 && (this.x - mouse.x) > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50){ if(this.radius < maxRadius){ this.radius +=2; } } else if(this.radius > this.minRadius){ this.radius -= 2; } this.x += this.dx; this.y += this.dy; this.draw(); } } circleArray = []; function getDistance(x1, y1, x2, y2){ var xDistance = x2 - x1; var yDistance = y2 - y1; return Math.sqrt( Math.pow(xDistance, 2) + Math.pow(yDistance, 2)); } function randomIntFromInterval(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } function init(){ for(var i = 0; i < 100; i++){ do { // repeat until not in box var x = randomIntFromInterval(radius, innerWidth - radius); var y = randomIntFromInterval(radius, innerHeight - radius); } while (x + radius > contentPosition.left && x - radius < contentPosition.right && y + radius > contentPosition.top && y - radius < contentPosition.bottom); var dx = (Math.random() - 0.5) * 2; var dy = (Math.random() - 0.5) * 2; circleArray.push(new circle(x, y, dx, dy, radius)); } } function animate(){ requestAnimationFrame(animate); c.clearRect(0, 0, innerWidth, innerHeight); for(var i = 0; i < circleArray.length; i++){ circleArray[i].update(); } } init(); animate(); 
 canvas { position: fixed; z-index: -9999; } body { margin: 0; } .main-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main-content h1{ font-weight: 700; font-size: 40px; text-shadow: 0 0 2px #464646; border: 1px solid } 
 <canvas></canvas> <div class="main-content"> <h1 class="text-center">Example Text For Main Div</h1> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 畫布矩形和球形碰撞不起作用 球與畫布邊緣的碰撞檢測 畫布上的Javascript沖突檢測 Javascript畫布碰撞檢測 JavaScript中畫布上的碰撞檢測 Javascript畫布沖突檢測問題 Javascript畫布碰撞側檢測 用canvas Javascript碰撞精靈 Javascript畫布游戲 - 碰撞檢測 碰撞檢測未向球注冊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM