Skip to main content
Inspiring
November 17, 2021
Answered

Drag and Drop - change appearance of object when dropped

  • November 17, 2021
  • 2 replies
  • 421 views

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 has been closed for replies.
    Correct answer Kim Coching

    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 🙂 

    2 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 18, 2021

    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

    Kim CochingAuthorCorrect answer
    Inspiring
    November 18, 2021

    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 🙂 

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 18, 2021

    Awesome, Kim!

     

    What matters is that it is working.

    JoãoCésar17023019
    Community Expert
    Community Expert
    November 17, 2021

    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

    Inspiring
    November 17, 2021

    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