Adobe Animate CC Drag and Drop

Explorer ,
Aug 19, 2020 Aug 19, 2020

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.

 

Here's the link to the game 

 

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!

TOPICS
Code

Views

1.0K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 19, 2020 Aug 19, 2020
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

Likes

Translate

Translate
Adobe Community Professional ,
Aug 19, 2020 Aug 19, 2020

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.

image.png

 

If this isn't a solution for you, what strategy do you want to follow and how can we help you?

 

Regards,

JC

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2020 Aug 19, 2020

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 20, 2020 Aug 20, 2020

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 20, 2020 Aug 20, 2020

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! 

 

1.PNG

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 21, 2020 Aug 21, 2020

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 17, 2020 Sep 17, 2020

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2021 Jul 28, 2021

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 26, 2021 Oct 26, 2021

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 16, 2021 Nov 16, 2021

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 28, 2021 Nov 28, 2021

Copy link to clipboard

Copied

LATEST

Hi Kim,

 

Thank you very much for the source. 🙂

Have a great day ahead.

 

cheers

daniel

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines