Как я могу установить конкретное изображение, если условие? - PullRequest
Новая
       13

Как я могу установить конкретное изображение, если условие?

0 голосов
/ 30 сентября 2019

Я не являюсь носителем английского языка и начинаю изучать язык программирования. Я понимаю, что мое объяснение не лучшее, но я пытаюсь объяснить людям лучше, чтобы понять, что я пытаюсь сделать. Поэтому, пожалуйста, будьте терпеливы со мной и, пожалуйста, не пытайтесь понизить голос, вместо того, чтобы сказать мне, почему мое объяснение плохое. Я ценю ваше время, чтобы прочитать это. Спасибо.

Я работаю над игрой на холсте, называемой игрой сортировки монет, которая заключается в перетаскивании монет в правильные изображения копилки. Я застрял, если состояние сейчас. В текущем состоянии оповещение сработает при касании любых изображений, но я хочу, чтобы оповещение сработало при касании определенных изображений. Например, когда изображение монеты в 1 иену коснулось изображения в копилке в 1 иен, тогда активируется оповещение, в противном случае событие не происходит.

Мне интересно, могу ли я установить конкретные изображения, если условие ниже ... 

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

Могу ли я добавить больше условий к существующим, если условия выше? Если так, как я могу добавить, если условия? Я хочу добавить условие, если ichiYenimage === ichiYenpiggyImg than alert ("Пересечение");else {no event}

Пожалуйста, дайте мне знать, если мое объяснение не читается.

Спасибо!

Вот полный код ниже ... 

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>
...