我的碰撞检测算法存在很大问题。我理解它是如何工作的,但我不知道如何在我的代码中实现它,即使我已经看过很多关于它的教程。此代码段中目前没有碰撞检测代码。这是演示:
var ctx = document.getElementById('canvas').getContext("2d");
var square = {
x:150,
y:100,
width:100,
height:100
};
var triangle = {
x:300,
y:100,
width:100,
height:100
};
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
//Draw the square
ctx.strokeRect(square.x,square.y,square.width, square.height);
//Draw the triangle
ctx.beginPath();
ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
ctx.lineTo(triangle.x, triangle.y + triangle.height);
ctx.closePath();
ctx.stroke();
requestAnimationFrame(draw);
}
draw();
document.body.addEventListener("mousemove", function(e) {
square.x = e.clientX;
square.y = e.clientY;
});

canvas {
border:1px solid black;
}

<canvas id="canvas" width="600" height="600"></canvas>
&#13;
答案 0 :(得分:0)
添加了一个碰撞函数,检查正方形边界是否与三角形的边界相交或彼此是否包含。
var ctx = document.getElementById('canvas').getContext("2d");
var square = {
x:150,
y:100,
width:100,
height:100
};
var triangle = {
x:300,
y:100,
width:100,
height:100
};
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
//Draw the square
ctx.strokeRect(square.x,square.y,square.width, square.height);
//Draw the triangle
ctx.beginPath();
ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
ctx.lineTo(triangle.x, triangle.y + triangle.height);
ctx.closePath();
ctx.stroke();
requestAnimationFrame(draw);
}
draw();
document.body.addEventListener("mousemove", function(e) {
square.x = e.clientX;
square.y = e.clientY;
collision();
});
function collision(){
if(triangle.x + triangle.width - square.x >= 0 && triangle.y + triangle.height - square.y >= 0 && square.y - (triangle.y - square.height) >= 0 && square.x - (triangle.x - square.width) >= 0 && square.x - x1(square.y) >= 0 && x2(square.y) - square.x >= 0){
console.log("collision");
}
}
function x1(y){
return triangle.x - square.width + ((triangle.width/2) / triangle.height) * ((triangle.y + triangle.height - square.height) - y);
}
function x2(y){
return triangle.x + triangle.width/2 + ((triangle.width - triangle.width/2)/triangle.height) * (y - (triangle.y - square.height));
}
canvas {
border:1px solid black;
}
<canvas id="canvas" width="600" height="600"></canvas>