堆栈内存溢出
  繁体   English   中英

球到矩形碰撞检测画布JavaScript

[英]Ball to rectangle collision detection canvas javascript

 原文  2018-02-03 10:27:27  6   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