html5 canvas中两个弧的碰撞检测
[英]Collision detection of two arcs in html5 canvas
问题描述
I am trying to detect if two balls are intersecting on a HTML5 canvas. 
我正在尝试检测两个球是否在HTML5画布上相交。 I need a function called intersect as a part of a constructor object called Ball. 我需要一个名为intersect的函数作为名为Ball的构造函数对象的一部分。 This function will take one Ball object as an argument and return true if the two balls on the canvas are touching/ intersecting. 此功能将一个Ball对象作为参数，如果画布上的两个球接触/相交，则返回true。 and false otherwise. 否则为假。
I cant figure out how to pass in a new instance of a ball to the intersect function and then compare it to another ball on the canvas. 我无法弄清楚如何将球的新实例传递给相交函数，然后将其与画布上的另一个球进行比较。 The function I'm working on the is the final function intersect at the end of the Ball Object. 我正在使用的函数是在Ball对象末尾的最终函数相交。 Please see below for the code i have so far. 请参阅以下我到目前为止的代码。
Any help would be greatly appreciated. 任何帮助将不胜感激。
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvasOne" ></canvas>
<script type="text/javascript">
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvasOne");
// Set the canvas up for drawing in 2D.
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
function Ball(xpos,ypos,r) {
this.xpos = xpos;
this.ypos = ypos;
this.r = r;
this.move = function(addx,addy){
this.xpos = this.xpos + addx;
this.ypos = this.ypos + addy;
};
this.resize = function(setr){
this.r = setr;
};
this.draw = function(){
for (var i = 0; i < 7; i++) {
ctx.beginPath();
ctx.moveTo(ball.xpos, ball.ypos);
ctx.arc(ball.xpos, ball.ypos, ball.r, i*(2 * Math.PI / 7), (i+1)*(2 * Math.PI / 7));
ctx.lineWidth = 2;
ctx.strokeStyle = '#444';
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(ball.xpos, ball.ypos);
ctx.arc(ball.xpos,ball.ypos,ball.r-10,0,2*Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle = '#444';
ctx.stroke();
};
this.rotate = function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Move registration point to the center of the canvas
ctx.translate(ball.xpos, ball.ypos);
// Rotate 1 degree
ctx.rotate(Math.PI / 180);
// Move registration point back to the top left corner of canvas
ctx.translate(-ball.xpos, -ball.ypos);
ball.draw();
ctx.restore();
};
this.contains = function(x, y){
this.x = this.x;
this.y = this.y;
if(Math.sqrt((x-ball.xpos)*(x-ball.xpos) + (y-ball.ypos)*(y-ball.ypos)) <= ball.r)
{
return true;
}else{
return false;
}
};
this.intersect = function(){
this.ball1 = this.ball1;
var distance = (ball.xpos * ball.xpos) + (ball.ypos *ball.ypos);
if(distance <= (ball.r + ball.r)*(ball.r + ball.r)){
return true;
}else{
return false;
}
};
}
var ball = new Ball(100,100,100);
ball.draw();
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2017-10-12 12:55:15
I cant figure out how to pass in a new instance of a ball to the intersect function
Well to pass anything really it should have an argument. 好吧，要传递任何东西，它应该有一个论点。
this.intersect = function(otherball){
// then compare the two ball objects
Then... 然后...
var ball1 = new Ball(100,100,100);
var ball2 = new Ball(100,100,100);
ball1.draw();
ball2.draw();
console.log(ball1.intersect(ball2));
解决方案2
0 已采纳 2017-10-12 12:55:28
First off, if you aren't going to use the this keyword in your class, then why make it a class? 首先，如果您不打算在班级中使用this关键字，那么为什么要使其成为班级呢？
You can setup your intersect to take a Ball as a parameter. 您可以设置intersect以将Ball作为参数。 From here you can calculate the collision between this and the parameter Ball . 在这里，您可以计算this与参数Ball之间的碰撞。
You distance function was off, as it only looked on the this object, and i fixed the this problem in your code: 您的距离功能已关闭，因为它仅查看this对象，并且我在您的代码中解决了this问题：
var canvas = document.body.appendChild(document.createElement("canvas")); // Set the canvas up for drawing in 2D. var ctx = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500; function Ball(xpos, ypos, r) { this.xpos = xpos; this.ypos = ypos; this.r = r; this.move = function(addx, addy) { this.xpos = this.xpos + addx; this.ypos = this.ypos + addy; }; this.resize = function(setr) { this.r = setr; }; this.draw = function() { for (var i = 0; i < 7; i++) { ctx.beginPath(); ctx.moveTo(this.xpos, this.ypos); ctx.arc(this.xpos, this.ypos, this.r, i * (2 * Math.PI / 7), (i + 1) * (2 * Math.PI / 7)); ctx.lineWidth = 2; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(this.xpos, this.ypos); ctx.arc(this.xpos, this.ypos, this.r - 10, 0, 2 * Math.PI); ctx.lineWidth = 2; ctx.stroke(); }; this.rotate = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Move registration point to the center of the canvas ctx.translate(this.xpos, this.ypos); // Rotate 1 degree ctx.rotate(Math.PI / 180); // Move registration point back to the top left corner of canvas ctx.translate(-this.xpos, -this.ypos); this.draw(); ctx.restore(); }; this.contains = function(x, y) { this.x = this.x; this.y = this.y; if (Math.sqrt((x - this.xpos) * (x - this.xpos) + (y - this.ypos) * (y - this.ypos)) <= this.r) { return true; } else { return false; } }; //put "ball" as a paremeter //ball will be the foreign Ball to test intersection against this.intersect = function(ball) { var productX = this.xpos - ball.xpos; var productY = this.ypos - ball.ypos; var distance = Math.sqrt(productX * productX + productY * productY); if (distance <= (this.r + ball.r)) { return true; } else { return false; } }; } var ball1 = new Ball(100, 100, 100); var ball2 = new Ball(240, 140, 40); function update(evt) { ctx.clearRect(0, 0, canvas.width, canvas.height); if (evt !== void 0) { ball2.xpos = evt.offsetX; ball2.ypos = evt.offsetY; } //Pass the ball as an argument to the method ctx.strokeStyle = ball1.intersect(ball2) ? "red" : '#444'; ball1.draw(); ball2.draw(); } update(); canvas.onmousemove = update;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.