我正在HTML5
和javascript
开发一款简单的游戏。游戏就像这样简单:
游戏应该指示玩家将某些物品放入某些物体中 在画布上的地方,例如:把苹果放在盒子里面,或放入 盒子旁边的苹果。
当玩家拖动对象并将其放入其中的任何位置时 画布
游戏应该评估他的行动并决定他是否放置了 正确的对象在正确的地方。
我的问题是:如何根据另一个对象测试用户放置对象的位置?即:我怎么知道用户把对象放在盒子旁边或盒子下面,甚至放在盒子里面?
我脑海中浮现的唯一想法是:
Image()
并将其边界用作放置区域<div>
,当对象与此区域发生碰撞时,我应该测试用户的操作。但是,我无法在画布中创建<div>
并且无法创建透明的Image()
。任何想法?答案 0 :(得分:0)
使用每个对象的x,y,宽度和高度来检查它们是否重叠:
function getOverlapArea(aX, aY, aW, aH, bX, bY, bW, bH) {
var overlapX = Math.max(0, Math.min(aX + aW, bX + bW) - Math.max(aX, bX));
var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
return overlapX * overlapY;
}
var apple = { x: 100, y: 100, width: 100, height: 100 };
var box = { x: 200, y: 200, width: 100, height: 100 };
var overlap = getOverlapArea(apple.x, apple.y, apple.width, apple.height, box.x, box.y, box.width, box.height);
if(overlap > 0) {
// do something
}
答案 1 :(得分:0)
我使用了imcg的碰撞答案并对其进行了一些修改以覆盖onRight和onLeft案例如下:
var overlap = getOverlapArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
if(overlap >0)
{
console.log("overlapping");
}
else {
var toTheLeft = getOverlapToLeftArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
if (toTheLeft > 0) {
console.log("to the left");
}
else {
var toTheRight = getOverlapToRightArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
if (toTheRight > 0) {
console.log("to the right");
}
else
{
console.log("nothing");
}
}
在上面的第一个if语句中,我检查了重叠,就像imcg回答一样。
在下面的函数(getOverlapToLeftArea
)中,我向x添加+20 px
,假设如果shape1与shape2的距离超过20 px,那么它被认为太远,但如果shape1远离shape2 20px
或更少,然后shape1位于shape2的左侧。
function getOverlapToLeftArea(aX, aY, aW, aH, bX, bY, bW, bH) {
var overlapX = Math.max(0, Math.min(aX + aW + 20, bX + bW) - Math.max(aX + 20 , bX));
var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
return overlapX * overlapY;
}
同样的概念适用于getOverlapToLeftArea
,除了我从x中减去-20 px
如下:
function getOverlapToRightArea(aX, aY, aW, aH, bX, bY, bW, bH) {
var overlapX = Math.max(0, Math.min(aX + aW - 20, bX + bW) - Math.max(aX - 20 , bX));
var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
return overlapX * overlapY;
}
对我来说就像魅力一样。 如果我想检查shape1是否 / shape2,我必须添加/减去{来自 y
的{1}}谢谢你imcg :)我希望我的回答可以帮助你们所有人。