I am non-native English speaker and I am beginner of programming language. I understand that my explanation is not best but I am trying to explain better to people to understand what I am trying to do. So, please be patient with me and please not try to down vote instead of tell me why my explanation is bad. I appreciate your time to read this. Thank you.
I am working on canvas game called coin sorting game which is drag the coins to the correct piggy bank images. I am stuck with if condition right now. In the current state, alert will trigger when any images touch, but I want to trigger alert when specific images touched. For example, when 1yen coin image touched with 1yen piggy bank image then trigger alert otherwise no event occur.
I am wondering if I can set specific images in if condition below...
if (haveIntersection(obj.getClientRect(), targetRect)) {
alert("Intersection");
}
Can I add more conditions to existed if conditions above? If so, how can I add if conditions? I want to add condition is if ichiYenimage === ichiYenpiggyImg than alert ("Intersection"); else { no event}
Please let me know if my explanation is not readable.
Thank you!
Here is full code below...
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>
Aucun commentaire:
Enregistrer un commentaire