Skip to main content
Kim Coching
Inspiring
Nov 17, 2021 12:38 AM UTC
Answered

Drag and Drop - change appearance of object when dropped

Hi everyone.

 

I'm making a game wherein the user has to drag the object to its correct position. Please check this screenshot of my game:

 

 

As you can see, the buttons on the right appear different than its placeholder. I want the placeholder or slot to change appearance when user dropped the correct item like this:

 

 

Here's my current situation:

 

I use root.s1Slots.visible=false; at the beginning to hide all placeholders/slots.

 

And when the objects match, I hide my button using Pieces1.target.visible = false;

 

Here's what it looks like:

 https://html5-converted-ready.s3.amazonaws.com/Test/Game+5/Untitled-1.html

 

I'm stuck with making the target placeholder/slot visible. I use root.s1Slots.visible=true; but it shows all the placeholder/slots. I tried s1Slots.target.visible = true; but it doesn't work.

 

@JoãoCésar I learned drag and drop from you and I'm really grateful for your help. I was hoping you could help me in this one please?

 

Here's my code

this.stop();

var root = this;
var Pieces1 = root.Pieces1;
var s1Slots = root.s1Slots;
var restart = root.restart;
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)
{
	root.s1Slots.visible=false;

	stage.off("drawstart", root.drawStart);
	
	Pieces1.children.forEach(function(child, index)
	{
		positions[index] = {x:child.x, y:child.y};
	});
	
	s1Slots.children.forEach(function(child, index)
	{
		child.mouseChildren = false;
	});

	root.restartHandler(null);	
	restart.on("click", root.restartHandler);
	Pieces1.on("mousedown", root.mouseDownHandler);	
};

root.restartHandler = function(e)
{
	Pieces1.count = 0;
	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;
	Pieces1.target = e.target;
	root.stageMouseMove = stage.on("stagemousemove", root.stageMouseMoveHandler);
	root.stageMouseUp = stage.on("stagemouseup", root.stageMouseUpHandler);
};

root.stageMouseMoveHandler = function(e)
{
	if (Pieces1.target)
	{
		Pieces1.target.x = (e.stageX / stage.scaleX) - Pieces1.target.offsetX;
		Pieces1.target.y = (e.stageY / stage.scaleY) - Pieces1.target.offsetY;
	}	
};

root.stageMouseUpHandler = function(e)
{
	stage.off("stagemousemove", root.stageMouseMove);
	stage.off("stagemouseup", root.stageMouseUp);
	
	if (Pieces1.target)
	{
		root.check();
		Pieces1.target = null;
	}	
};

root.shuffle = function()
{	

	Pieces1.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 = s1Slots.getObjectUnderPoint(Pieces1.target.x, Pieces1.target.y);
	
	if (!spot)
	{
		root.onMiss();
		return;
	}
	
	root.slot = spot.parent;
		
	if (root.slot)
	{		
		if (Pieces1.target.name === root.slot.name)
		{
			root.onMatch();
			
			if (Pieces1.count === Pieces1.children.length)
				root.onWin();
		}
		else
			root.onMiss();
		
		root.slot = null;
	}
	else
		root.onMiss();
};

root.onMatch = function()
{	
	createjs.Sound.play("match_sfx");
	Pieces1.target.mouseEnabled = false;
	Pieces1.count++;
	createjs.Tween.get(Pieces1.target).to({x:root.slot.x, y:root.slot.y}, 350, createjs.Ease.backInOut);
	Pieces1.target.visible = false;
	root.s1Slots.visible = true;
};

root.onWin = function()
{
	setTimeout(function(){(root.gotoAndStop(root.timeline.position + 1))}, 1000);
	createjs.Sound.play("correct_buzzer");
};

root.onMiss = function()
{	
	createjs.Sound.play("miss_sfx");
	createjs.Tween.get(Pieces1.target).to({x:Pieces1.target.originalX, y:Pieces1.target.originalY}, 350, createjs.Ease.backInOut);
};


root.setup();

Thank you!

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Kim Coching
    Kim CochingCorrect answer
    Inspiring
    Nov 18, 2021 6:58 PM UTC

    Hello @JoãoCésar17023019 

     

    No worries, I appreciate your response.

     

    Unfortunately, that didn't work.

     

    But I got good news!

     

    Initially, I set the alpha of slots to 1 instead of 100%. Then on match function, this code worked:

    root.slot.alpha=1;

     

    Thank you so much 🙂 

    5 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    Nov 18, 2021 6:38 PM UTC

    Hey, Kim!

     

    Sorry for the delay.

     

    What about if you replace the last line of your root.onMatch method like this:

    root.onMatch = function()
    {	
    	createjs.Sound.play("match_sfx");
    	Pieces1.target.mouseEnabled = false;
    	Pieces1.count++;
    	createjs.Tween.get(Pieces1.target).to({x:root.slot.x, y:root.slot.y}, 350, createjs.Ease.backInOut);
    	Pieces1.target.visible = false;
    	//root.s1Slots.visible = true;
    	root.slot.visible = true;
    };

     

    Please let me know if this works.

     

    Regards,

    JC

    Translate
    Kim Coching
    Kim CochingAuthorCorrect answer
    Inspiring
    Nov 18, 2021 6:58 PM UTC

    Hello @JoãoCésar17023019 

     

    No worries, I appreciate your response.

     

    Unfortunately, that didn't work.

     

    But I got good news!

     

    Initially, I set the alpha of slots to 1 instead of 100%. Then on match function, this code worked:

    root.slot.alpha=1;

     

    Thank you so much 🙂 

    Translate
    JoãoCésar17023019
    Community Expert
    Community Expert
    Nov 18, 2021 7:03 PM UTC

    Awesome, Kim!

     

    What matters is that it is working.

    Translate
    JoãoCésar17023019
    Community Expert
    Community Expert
    Nov 17, 2021 7:09 PM UTC

    Hi, Kim!

     

    I'm glad that the GitHub templated helped you somehow!

     

    About your question... Do you want the slot to change appearance while you dragging a piece, when a piece is hovering over the slot or when the piece is released over the slot?

     

    Please let us know.

     

    Regards,

    JC

    Translate
    Kim Coching
    Inspiring
    Nov 17, 2021 7:13 PM UTC

    Good to hear from you @JoãoCésar17023019 !

     

    I want the slot to change appearnace when the piece is released over it 🙂 Similar to this game - https://player.360training.com/ICP4/CoursePlayer.aspx?COURSEID=928789&VARIANT=En-US&BRANDCODE=DEFAULT&PREVIEW=true&SESSION=7cc68262-1b9c-4096-98ab-1294ff2af332&SCENEID=2230887

     

    Translate