use*_*496 0 javascript collision-detection collision kineticjs
我对CANVAS和Kineticjs都很陌生,但我觉得我正在尝试的事情应该比我做得更容易.基本上这是我到目前为止:
我试图使用的代码来自kineticjs当与另一个解决方案重叠时停止拖动到一个形状但是无法让它工作.
请查看实时jsfiddle 代码
var isRectCollide = function(target, box) {
if (target.x - target.width >= box.x + box.width &&
target.y - target.height >= box.y + box.height &&
target.x + target.width <= box.x + box.width &&
target.x + target.height <= box.y - box.height )
return false;
else
return true;
}
这个想法是粉红色的方块可以拖动,但被橙色框阻挡,一旦拖动橙色框,粉红色框"触摸"蓝色框,弹出应该发生.
我不确定使用kineticjs是否是最简单的实现方法呢？
任何想法,提示或帮助我都会非常感激.
是的,因为KineticJS没有碰撞测试,你必须自己做.
这是任何2个kineticJS矩形之间的碰撞测试:
function theyAreColliding(rect1, rect2) {
return !(rect2.getX() > rect1.getX()+rect1.getWidth() ||
rect2.getX()+rect2.getWidth() < rect1.getX() ||
rect2.getY() > rect1.getY()+rect1.getHeight() ||
rect2.getY()+rect2.getHeight() < rect1.getY());
}
以下是您将如何调用盒子和障碍物之间的碰撞测试:
if( theyAreColliding(box,obstacle){
// obstacle is blocking box
alert("You are being blocked!");
}
以下是您如何调用框和目标之间的碰撞测试:
if( theyAreColliding(box,target){
// box touched the goal
alert("Goal!");
}
要阻止框直接拖过障碍物,您必须为框提供一个自定义拖动功能,如下所示:
dragBoundFunc: function(pos){
if(theyAreColliding(box,obstacle){
// box is touching obstacle
// don't let box move down
return({ x:pos.x, y:obstacle.getY()-1 });
} else{
// box is not touching obstacle
// let it move ahead
return({ x:pos.x, y:pos.y });
}
}
你可以在以下的演示中看到它是如何工作的:http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/
[编辑:指定每个代码的去向]
我将这些碎片放在下面的工作片段中.我找到了一个不幸的事情.用户可以足够快地拖动粉红色的盒子直接通过障碍物 - KineticJS无法快速反应以阻止非常快速的阻力.
还 - 哎呀我.我在上面的themAreColliding函数中更正了一些丢失的括号.
dragBoundFunc作为框构造函数的补充(参见下面的代码).
您可以通过在框中的"dragmove"处理程序中进行测试来测试用户是否有目标,如下所示:
box.on('dragmove', function() {
if (theyAreColliding(box, target)) {
// box touched the goal
alert("Goal!");
}
});
这是代码和小提琴:http://jsfiddle.net/uCAys/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 20px;
}
canvas {
border: 1px solid #777;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
//Dragable Pink box
var box = new Kinetic.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'pink',
stroke: 'black',
strokeWidth: 2,
draggable: true,
// this causes box to be stopped if contacting obstacle
dragBoundFunc: function(pos){
if(theyAreColliding(box,obstacle)){
// box is touching obstacle
// don't let box move down
return({
x: pos.x,
y: Math.min( obstacle.getY()-box.getHeight()-1, pos.y)
});
} else{
// box is not touching obstacle
// let it move ahead
return({ x:pos.x, y:pos.y });
}
}
});
box.on('dragmove', function() {
if (theyAreColliding(box, target)) {
// box touched the goal
box.setX(100);
box.setY(50);
alert("Goal!");
}
});
// End goal blue box
var target = new Kinetic.Rect({
x: 100,
y: 200,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 2
});
// Obstacle/blocker orange box
var obstacle = new Kinetic.Rect({
x: 125,
y: 145,
width: 50,
height: 30,
fill: 'orange',
stroke: 'black',
strokeWidth: 2
});
function theyAreColliding(rect1, rect2) {
return !(rect2.getX() > rect1.getX() + rect1.getWidth() || //
rect2.getX() + rect2.getWidth() < rect1.getX() || //
rect2.getY() > rect1.getY() + rect1.getHeight() || //
rect2.getY() + rect2.getHeight() < rect1.getY()); //
}
layer.add(box);
layer.add(obstacle);
layer.add(target);
stage.add(layer);
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
2250 次 |
| 最近记录： |