Question

我是非英语母语者和编程初学者。我知道我的解释不是最好的，但我会尽力解释，以便人们可以理解我正在尝试做的事情。请对我耐心，不要投票。而是告诉我为什么我的解释不好。感谢您抽出宝贵时间阅读本文。谢谢。

我正在做一个名为“硬币分类游戏”的画布游戏，该游戏将硬币拖到正确的存钱罐图像上。我坚持“如果”的条件。在当前状态下，警报会在任何图像触摸时触发，但是我只想在特定图像触摸时发出警报。例如，当1日元硬币图像与1日元存钱罐图像接触时，触发警报，否则不会发生任何事件。

我想知道是否可以在这种“如果”条件下设置特定的图像...

  if (haveIntersection(obj.getClientRect(), targetRect)) {
  alert("Intersection");
    }

如果上述条件可以添加更多条件存在吗？如果是这样，如何添加这些条件？我要添加条件“ if ichiYenimage === ichiYenpiggyImg”而不是警报（“交集”）；其他{ 没有事件}

如果我的解释不可读，请告诉我。

谢谢！

下面是完整的代码...

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)) {
      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>

如果出现条件，如何设置特定图像？

0 个答案: