HTML 5画布形状碰撞测试
[英]HTML 5 canvas shape collision Test
问题描述
Can you please help me with my collision test . 
你能帮我做碰撞测试吗？
In flash I would use a Hittest and it would take 2 minutes to do but as I see HTML5 is a little different. 在Flash中，我将使用Hittest，这需要2分钟的时间，但是正如我所见，HTML5有点不同。
Below is my code. 下面是我的代码。 I can make the ball bounce inside the red block easily but I want a grey block in the middle that the ball bounces off also and the if statement is getting messy and not working. 我可以轻松地使球在红色块内弹跳，但我希望球中间也可以弹起灰色的灰色块，并且if语句变得凌乱且无法正常工作。 Is there an easier way todo this, can you please help me. 有没有更简单的方法可以执行此操作，请您帮助我。 Thanks 谢谢
<html>
<head>
</head>
<script>
var context;
var x=50;
var y=100;
var speedX=-2;
var speedY=-2;
var counter=0;
var ballCoordinates ='';
function init()
{
var c = document.getElementById('myCanvas');
context= c.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, 300,400);
//draw number
context.fillStyle = '#fff';
context.font="160px Arial";
context.fillText(counter,10,150);
context.fillStyle = '#fff';
context.font="20px Arial";
context.fillText(ballCoordinates,10,400);
//draw ball
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
//draw block
context.fillStyle = '#333';
context.fillRect(100,200,100,100);
// Boundary Logic
//if( x<0 || x>300) dx=-dx;
//if( y<0 || y>300) dy=-dy;
if(x>280){
speedX=speedX * -1;
}else if(y<20){
speedY=speedY * -1;
}else if(x<20){
speedX=speedX * -1;
}else if(y>380){
speedY=speedY * -1;
}else if( x>80 && y >180 && y <320) {
speedY=speedY * -1;
}else if( x<220 && y >180 && y <320) {
speedY=speedY * -1;
}else if( y>180 && x>80 && x<220) {
speedX=speedX * -1;
}else if( y<180 && x>80 && x<220) {
speedX=speedX * -1;
}
x+=speedX;
y+=speedY;
ballCoordinates = x + 'x ' + y + 'y ' + speedX + 'speedx ' + speedY + 'speedy';
}
</script>
<body onLoad="init();">
<canvas id="myCanvas" width="300" height="400" style="background:red" >
</canvas>
</body>
</html>
3 个解决方案
解决方案1
1 2013-03-26 13:19:43
In my grapefruit game engine I use a bounded-box system to detect collisions. 在我的葡萄柚游戏引擎中，我使用了边界框系统来检测碰撞。 I found a good question on gamedev.stackexchange.com that helped me out and this is what I came up with: 我在gamedev.stackexchange.com上发现了一个很好的问题，该问题对我有所帮助，这是我想出的：
intersects: function(entity) {
return (Math.abs(this._hitboxMesh.position.x - entity._hitboxMesh.position.x) * 2 < (this.hitSize.x + entity.hitSize.x)) &&
(Math.abs(this._hitboxMesh.position.y - entity._hitboxMesh.position.y) * 2 < (this.hitSize.y + entity.hitSize.y));
}
Basically the game loop will run this check on entities to see if they intersect, or collide. 基本上，游戏循环将对实体执行此检查，以查看它们是否相交或碰撞。 This is a method on an Entity object, so this refers to an Entity and so does the argument. 这是Entity对象上的方法，因此this引用Entity ，参数也是如此。
解决方案2
0 2013-03-25 19:42:47
a technique I have used in the past is to create a background buffer and give each object an id. 我过去使用的一种技术是创建背景缓冲区并为每个对象指定一个ID。 Then when that object is drawn also draw it in on the background buffer making each pixels colour that id. 然后，当绘制该对象时，也将其绘制在背景缓冲区上，使每个像素的颜色变为id。 While drawing on the background buffer check if any pixel is being drawn on a pixel that is not black (0) then it is a collision and the object you collided with is the colour of that pixel on the buffer. 在背景缓冲区上绘制时，检查是否在非黑色（0）的像素上绘制了任何像素，则这是一个碰撞，与您碰撞的对象是缓冲区上该像素的颜色。
解决方案3
0 已采纳 2013-03-26 09:50:23
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-introduction http://www.html5rocks.com/zh-CN/tutorials/canvas/notearsgame/#toc-introduction
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.