Copy link to clipboard
Copied
Hi! I just created a drag and drop word game using Adobe Animate CC.
Everything is working fine, except when there is 2 same letters on 1 word, the letter is only accepted by one slot. So I have to try both letters just to see which one will work on that specific slot. It makes the game frustrating for the user.
And here is my code:
var root = this;
var pieces = root.pieces;
var slots = root.slots;
var restart = root.restart;
var winMessage = root.winMessage;
var positions = [];
root.setup = function()
{
document.body.style.backgroundColor = lib.properties.color;
createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
root.drawStart = stage.on("drawstart", root.start, null, true);
};
root.start = function(e)
{
stage.off("drawstart", root.drawStart);
winMessage.originalY = winMessage.y;
pieces.children.forEach(function(child, index)
{
positions[index] = {x:child.x, y:child.y};
});
slots.children.forEach(function(child, index)
{
child.mouseChildren = false;
});
root.restartHandler(null);
restart.on("click", root.restartHandler);
pieces.on("mousedown", root.mouseDownHandler);
};
root.restartHandler = function(e)
{
pieces.count = 0;
winMessage.text = "";
root.shuffle();
};
root.mouseDownHandler = function(e)
{
e.currentTarget.setChildIndex(e.target, e.currentTarget.children.length - 1);
e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
e.target.offsetY = (e.stageY / stage.scaleY) - e.target.y;
pieces.target = e.target;
root.stageMouseMove = stage.on("stagemousemove", root.stageMouseMoveHandler);
root.stageMouseUp = stage.on("stagemouseup", root.stageMouseUpHandler);
};
root.stageMouseMoveHandler = function(e)
{
if (pieces.target)
{
pieces.target.x = (e.stageX / stage.scaleX) - pieces.target.offsetX;
pieces.target.y = (e.stageY / stage.scaleY) - pieces.target.offsetY;
}
};
root.stageMouseUpHandler = function(e)
{
stage.off("stagemousemove", root.stageMouseMove);
stage.off("stagemouseup", root.stageMouseUp);
if (pieces.target)
{
root.check();
pieces.target = null;
}
};
root.shuffle = function()
{
positions.sort(function(a, b)
{
return 0.5 - Math.random();
});
pieces.children.forEach(function(child, index)
{
child.originalX = positions[index].x;
child.originalY = positions[index].y;
child.mouseEnabled = true;
createjs.Tween.get(child).to({x:child.originalX, y:child.originalY}, 350, createjs.Ease.backInOut);
});
};
root.check = function()
{
var spot = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
if (!spot)
{
root.onMiss();
return;
}
root.slot = spot.parent;
if (root.slot)
{
if (pieces.target.name === root.slot.name)
{
root.onMatch();
if (pieces.count === pieces.children.length)
root.onWin();
}
else
root.onMiss();
root.slot = null;
}
else
root.onMiss();
};
root.onMatch = function()
{
createjs.Sound.play("match_sfx");
pieces.target.mouseEnabled = false;
pieces.count++;
createjs.Tween.get(pieces.target).to({x:root.slot.x, y:root.slot.y}, 350, createjs.Ease.backInOut);
};
root.onWin = function()
{
createjs.Sound.play("correct_buzzer");
root.gotoAndStop(root.timeline.position + 1);
};
root.onMiss = function()
{
createjs.Sound.play("miss_sfx");
createjs.Tween.get(pieces.target).to({x:pieces.target.originalX, y:pieces.target.originalY}, 350, createjs.Ease.backInOut);
};
root.setup();
Sorry I'm really new to this. Would appreciate your help!
Hi.
Your game is amazing! Congratulations!
I faced this challenge recently and my workaround was to visually point out to the user which letter comes first by using subscript numbers.
If this isn't a solution for you, what strategy do you want to follow and how can we help you?
Regards,
JC
Copy link to clipboard
Copied
Hi.
Your game is amazing! Congratulations!
I faced this challenge recently and my workaround was to visually point out to the user which letter comes first by using subscript numbers.
If this isn't a solution for you, what strategy do you want to follow and how can we help you?
Regards,
JC
Copy link to clipboard
Copied
Hi, JC!
Thank you so much for your prompt response. I've seen your replies to other forums and those have helped me a lot in coding my works 🙂
I'm thinking "if else codes", like if the target location has same properties with either of the pieces then it would match? Right now, the pieces are recognizing only their target slots so is there a way that the pieces can have multiple target slots as long as their properties are the same? This seems vague, sorry.
For now, I think I'll just use your workaround of adding subscripts..
Hopefully in the future we'll discover the best workaround for this. Again, thank you! Much appreciated 🙂
Copy link to clipboard
Copied
Hi again!
Excellent! I'm very glad that the answers were helpful to you.
Yeah. I think the real challenge here doesn't come from code, but from an UI/UX design strategy. Like you said, hopefully we're going to figure it out another solution in the future.
I wish you success in your game!
Regards,
JC
Copy link to clipboard
Copied
Hey,
One last thing I noticed. In some words whenever I shuffle the pieces, and then place it on a wrong slot, it goes back to its original position (pre-shuffle) instead of going back to its new position, It results to overlapping of pieces.
Btw I followed your youtube tutorial and flash file to code this game so all thanks to you!
Copy link to clipboard
Copied
Hi.
Sorry for the delayed response.
I'm gonna investigate this issue and I'll let you know.
And I'm planning to release a new game tutorial. Please stay tuned!
Copy link to clipboard
Copied
Hey everyone. Here is the game that I finished: Drag & Drop Word Game
So far, it's running okay, thanks to JC! But you'll notice in the word SEATBELT that when you shuffle it and try to drag any letter, it will not go back to it's original position therefore overlapping with other letters. I've been looking at the codes (which is still the same from above) and can't see what part did I go wrong.
I hope someone can help. Would appreciate it a lot! 🙂
If you need the flash file for educational purpose, you may send me a message and I'll give you the download link 🙂
Copy link to clipboard
Copied
Hi Kim!
I find it very interesting how you worked the game, if possible, you can share the file with me, to learn a little more.
Thank you!
Copy link to clipboard
Copied
Hi Kim,
I am still learning about HTML5 canvas coding
Thank you for sharing your project. Would you mind sharing your game coding for my learning on this subject.
Thanks
daniel
Copy link to clipboard
Copied
Hello @danielcyp5C57 . I'm sorry for the late response.
Here is my inspiration for this project. This is made by @JoãoCésar himself 🙂
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/drag_and_drop_game
Copy link to clipboard
Copied
Hi Kim,
Thank you very much for the source. 🙂
Have a great day ahead.
cheers
daniel