图像相互接触时不会触发警报

Question

我的母语不是英语，而且我是编程语言的初学者。我知道我的解释不是最好的，但我正在努力向人们更好地解释以了解我正在尝试做的事情。所以，请耐心等待我，请不要试图否决投票（这伤害了我的感情）而不是告诉我为什么我的解释不好。感谢您花时间阅读本文。谢谢。

我正在开发 canvas 名为硬币分类游戏的游戏，该游戏将硬币拖到正确的存钱罐图像中。我现在坚持 if 条件。在当前状态下，当特定图像触摸到其他特定图像时不会触发警报。例如，当 1 日元硬币图像与 1 日元存钱罐图像接触时，则触发警报，否则不会发生事件。

我以为在 if 条件中添加图片会设置特定的图片，但没有成功。

   if (haveIntersection(obj.getClientRect(), targetRect)&& (ichiYenImg === ichiYenpiggyImg)) {
  alert("Intersection");
    }

任何人都可以给我建议如何尝试这个问题吗？非常感谢任何帮助！

var stage = new Konva.Stage({
  width: 400,
  height: 200,
  container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);

layer.on('dragmove', function(e) {
  var target = e.target;
  var targetRect = e.target.getClientRect();
  layer.children.each(function(obj) {
    if (obj === target) {
      return;
    }
    if (haveIntersection(obj.getClientRect(), targetRect)&& (ichiYenImg === ichiYenpiggyImg)) {
      alert("Intersection");
        }
  });
});

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width/2 ||
    r2.x + r2.width/2 < r1.x ||
    r2.y > r1.y + r1.height/2 ||
    r2.y + r2.height/2 < r1.y
  );
}

// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
  layer.add(konvaImage);
  var image = new Image();
  image.src = source;
  image.onload = function() {
    konvaImage.image(image);
    layer.draw();
  }
}


//1yen
var ichiYenImg = new Konva.Image({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);


var goYenImg = new Konva.Image({
  x: 120,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg2, goYenImg);

//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
  x: 300,
  y: 100,
  width: 100,
  height: 100,
  draggable: false
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://unpkg.com/konva@4.0.5/konva.min.js"></script>
</head>

<body>
  <div id="stage-parent">
    <div id="container"></div>
  </div>
</body>

</html>

Answer 1

你的代码主要是好的 - 问题在于比较下面复制的 'if' 语句中的对象，你的目的是确定用户是否将正确价值的硬币拖到存钱罐.比较 JavaScript 个对象是有效的，但它可能导致不可预测的结果 - 更可靠和稳健的方法是更明确，为每个对象设置一个已知的属性值并比较这些值。

if (haveIntersection(obj.getClientRect(), targetRect)&& (ichiYenImg === ichiYenpiggyImg)) {
  alert("Intersection");
}

我在代码片段中的答案是修改代码以使用 Konva 'name' 变量来保存硬币和银行值。你可以看到我把它们都设置为 1 日元。现在在 dragMove() 函数中，我从每个被比较的对象中获取名称 attr。当它们匹配时，我们有一个有效的命中，当不匹配时，硬币和银行组合无效。

我修改了代码，以便在拖动正确的硬币时在银行周围放置一个红色边框。

有关名称 attr here，请参阅 Konva 文档。

var stage = new Konva.Stage({
  width: 400,
  height: 200,
  container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);

layer.on('dragmove', function(e) {
  var target = e.target;
  var targetRect = e.target.getClientRect();
  layer.children.each(function(obj) {
    if (obj === target) {
      return;
    }

    // capture the result of the intersection test.
    var checkHit = haveIntersection(obj.getClientRect(), targetRect);

    // get the objects name attribute
    var nameDragged = e.target.attrs['name']; 
    var namePiggy = obj.attrs['name'];
    
    // decide if they match
    var checkNames = (nameDragged === namePiggy);

    // finally decide if we have a valid hit
    if (checkHit && checkNames) {
      // hit ok !
      obj.stroke('red');
      obj.strokeWidth(2)
    }
    else {
      // no hit or not matching name
      obj.stroke(false);
      obj.strokeWidth(0)
    }

  });
});

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width/2 ||
    r2.x + r2.width/2 < r1.x ||
    r2.y > r1.y + r1.height/2 ||
    r2.y + r2.height/2 < r1.y
  );
}

// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
  layer.add(konvaImage);
  var image = new Image();
  image.src = source;
  image.onload = function() {
    konvaImage.image(image);
    layer.draw();
  }
}


//1yen
var ichiYenImg = new Konva.Image({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  draggable: true,
  name: '1yen'      // use the name attribute to indicate the coin value
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);


var goYenImg = new Konva.Image({
  x: 120,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg2, goYenImg);

//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
  x: 300,
  y: 100,
  width: 100,
  height: 100,
  draggable: false,
  name: '1yen'   // use the name attribute to indicate the coin value
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://unpkg.com/konva@4.0.5/konva.min.js"></script>
</head>

<body>
  <div id="stage-parent">
    <div id="container"></div>
  </div>
</body>

</html>

图像相互接触时不会触发警报

Alert not triggered when images touch each other

html

javascript

canvas

collision-detection

konvajs