• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

HTML5 Canvas + drag line and drop

Engaged ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

A game of connecting between pieces?

Can anyone help me?

i use adobe animate type HTML5 canvas ?

ther error in my_shape1 = new Sprite;

Any genius person to help me?

 

var root = this;
this.stop();

stage = new createjs.Stage("my_shape1");
stage = new createjs.Stage("my_shape2");
stage = new createjs.Stage("my_shape3");
stage.update();

var currentClip = new createjs.MovieClip();


var startX = new Number;
var startY = new Number;

var select_1 = new Boolean;
var select_2 = new Boolean;
var select_3 = new Boolean;


this.stage.addEventListener("ENTER_FRAME", moveline.bind(this));

this.bline1.addEventListener("MOUSE_DOWN", drag.bind(this));
this.bline2.addEventListener("MOUSE_DOWN", drag.bind(this));
this.bline3.addEventListener("MOUSE_DOWN", drag.bind(this));


this.bline1.addEventListener("MOUSE_UP", drop_1.bind(this));
this.bline2.addEventListener("MOUSE_UP", drop_2.bind(this));
this.bline3.addEventListener("MOUSE_UP", drop_3.bind(this));


//---------------------
function drag() {

	this.currentClip = MovieClip(this.Event.target);
	this.startX = currentClip.x;
	this.startY = currentClip.y;
	this.currentClip.parent.addChild(currentClip);
	this.currentClip.startDrag();

}


//-----------
function moveline() {
	//----------- الخط الأول ---------
	this.my_shape1.graphics.clear();
	this.my_shape1.graphics.beginFill(0x39393B);
	this.my_shape1.graphics.lineStyle(5, 0x39393B, 100);
	this.my_shape1.graphics.moveTo(line1.x, line1.y);
	this.my_shape1.graphics.lineTo(bline1.x, bline1.y);
	this.addChild(my_shape1);
	//----------- الخط الثاني ----------
	this.my_shape2.graphics.clear();
	this.my_shape2.graphics.beginFill(0x39393B);
	this.my_shape2.graphics.lineStyle(5, 0x39393B, 100);
	this.my_shape2.graphics.moveTo(line2.x, line2.y);
	this.my_shape2.graphics.lineTo(bline2.x, bline2.y);
	this.addChild(my_shape2);
	//---------- الخط الثالث --------------
	this.my_shape3.graphics.clear();
	this.my_shape3.graphics.beginFill(0x39393B);
	this.my_shape3.graphics.lineStyle(5, 0x39393B, 100);
	this.my_shape3.graphics.moveTo(line3.x, line3.y);
	this.my_shape3.graphics.lineTo(bline3.x, bline3.y);
	this.addChild(my_shape3);

}
//////////
function drop_1() {
	this.Event.target.startDrag(true);
	this.my_shape1.stopDrag();

	if (bline1.hitTestObject(Target_1) && select_1) {
		this.b1.alpha = 1;
		this.select_1 = false;
		this.good_1.play();
		this.bline1.removeEventListener("MOUSE_DOWN", drag.bind(this));
		this.bline1.removeEventListener("MOUSE_UP", drop_1.bind(this));
		this.bline1.x = Target_1.x;
		this.bline1.y = Target_1.y;

	} else {
		this.bline1.x = startX;
		this.bline1.y = startY;
		this.bad_1.play();

	}
}
////////////
//////////
function drop_2() {
	this.Event.target.startDrag(true);
	this.my_shape2.stopDrag();
	if (bline2.hitTestObject(Target_2) && select_2) {
		this.select_2 = false;
		this.good_1.play();
		this.bline2.removeEventListener("MOUSE_DOWN", drag.bind(this));
		this.bline2.removeEventListener("MOUSE_UP", drop_2.bind(this));
		this.bline2.x = Target_2.x;
		this.bline2.y = Target_2.y;
	} else {
		this.bline2.x = startX;
		this.bline2.y = startY;
		this.bad_1.play();

	}
}
////////////
//////////
function drop_3() {
	this.Event.target.startDrag(true);
	this.my_shape3.stopDrag();
	if (bline3.hitTestObject(Target_3) && select_3) {
		this.Target_3.visible = false;
		this.select_3 = false;
		this.good_1.play();
		this.bline3.removeEventListener("MOUSE_DOWN", drag.bind(this));
		this.bline3.removeEventListener("MOUSE_UP", drop_3.bind(this));
		this.bline3.x = Target_3.x;
		this.bline3.y = Target_3.y;
		this.bline3.visible = false;
	} else {

		this.bline3.x = startX;
		this.bline3.y = startY;
		this.bad_1.play();

	}
}

 

TOPICS
Code , Error

Views

3.8K

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

Community Expert , May 12, 2020 May 12, 2020

UPDATE (08/07/2022):

The game from the correct answer contains many flaws. So here is another one:

 

FLA / files / download:

https://bit.ly/3dfJ8Vr

 

Try it:

https://bit.ly/3A1BEOI

______________________________________________________________________________

 

Hi.

 

The main problem is that you're mixing AS3 and HTML5.

 

Anyway, here I have a complete sample.

 

It may seem complex at a first look, but you'll soon find out that this objected oriented approach has many advantages specially if you

...

Likes

Translate

Translate
Community Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

what line has the first error and what is the error?

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
Engaged ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

 
var my_shape1 = new Sprite();
var my_shape2 = new Sprite();
var my_shape3 = new Sprite();

 

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
Engaged ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

'Sprite' is not defined

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 Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

because you're using html5, try

 

var my_shape1 = new createjs.Sprite();

 

and there's no graphics property of the createjs sprite.  ie, as3 and js/easeljs are not the same.

 

check, https://www.createjs.com/docs/easeljs/modules/EaselJS.html

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
Engaged ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

I wrote this before
But it does not work ?

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 Expert ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

re-read the message i just posted.

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
Engaged ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

I'm sorry
You mean the code is wrong
I needs to change it all or what exactly

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
Engaged ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

Is there anyone to help me ? 

Where is the error in the code and correct it ?Attachment 

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 Expert ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

again:

 

because you're using html5, try

 

var my_shape1 = new createjs.Sprite();

 

and there's no graphics property of the createjs sprite.  ie, as3 and js/easeljs are not the same.

 

check, https://www.createjs.com/docs/easeljs/modules/EaselJS.html

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
Engaged ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

again:

There is no error ?
The code does not work

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 Expert ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

which code doesn't work?

 

all the code you've posted is incorrect for a canvas project.  it's all as3, not js.

 

if you've changed your code to js, or you've changed your project to an as3 project, post that info and the problematic code you're now trying.

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
Engaged ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

HTML5 Canvas (js)

 

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
Engaged ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

why are you angry
But sometimes it works
I have AS3 files to convert HTML5
The code works

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 Expert ,
May 12, 2020 May 12, 2020

Copy link to clipboard

Copied

UPDATE (08/07/2022):

The game from the correct answer contains many flaws. So here is another one:

 

FLA / files / download:

https://bit.ly/3dfJ8Vr

 

Try it:

https://bit.ly/3A1BEOI

______________________________________________________________________________

 

Hi.

 

The main problem is that you're mixing AS3 and HTML5.

 

Anyway, here I have a complete sample.

 

It may seem complex at a first look, but you'll soon find out that this objected oriented approach has many advantages specially if you need more than one game instance in the same project.

 

I changed the organization of your FLA a bit so other users can benefit from this example.

 

Also, there are two important things to notice:

- The game container position must always be at 0,0;

- Don't change the scale of the container. Set the whole app to fit the browser available area in the Publish Settings instead.

 

Right now these two points are required to not get incorrect values for the mouse position. I may improve these limitations later.

 

Please download the FLA in the second link below so you can see everything in action.

 

Play:

https://bit.ly/3cvAPQ6

 

JavaScript code:

Game:

 

 

 

 

 

 

var root = this;

root.ConnectLinesGame = function(props)
{
	this.board = props.board;
	this.startPrefix = props.startPrefix;
	this.endPrefix = props.endPrefix;
	this.totalDots = props.totalDots;
	this.strokeStyle = props.strokeStyle;
	this.callbacks = props.callbacks;
	this.reset(true);
};

root.ConnectLinesGame.prototype.mouseDownHandler = function(e)
{		
	if (this.board.contains(e.target) && e.target.name && e.target.name.indexOf(this.startPrefix) === 0 && !e.target.done)
	{		
		this.dots.unshift(e.target);
		this.beginLine(e.target.x, e.target.y);
		this.drawing = true;
	}
};

root.ConnectLinesGame.prototype.pressMoveHandler = function(e)
{
	var mouse = this.getMouse();
	
	if (this.drawing)
		this.drawLine(mouse.x, mouse.y);		
};

root.ConnectLinesGame.prototype.pressUpHandler = function(e)
{
	if (this.board.contains(e.target))
	{			
		var mouse = this.getMouse();
		var target = this.board.getObjectsUnderPoint(mouse.x, mouse.y, 1)[1];
			
		if (target && target.name && target.name.indexOf(this.endPrefix) === 0 && target.name.replace(this.endPrefix, "") === this.dots[0].name.replace(this.startPrefix, ""))
			this.onConnect(target);
		else
			this.onMiss();
		
		this.drawing = false;
	}
};

root.ConnectLinesGame.prototype.onConnect = function(target)
{	
	this.drawLine(target.x, target.y);
	this.dots[0].done = true;
	this.connectionsCount++;
	
	if (this.callbacks.onConnect !== null)
		this.callbacks.onConnect();
			
	if (this.connectionsCount === this.totalDots)
	{
		this.removeEvents();
		this.win = true;
		
		if (this.callbacks.onWin !== null)
			this.callbacks.onWin();
	}
};

root.ConnectLinesGame.prototype.onMiss = function()
{
	if (this.drawing)
	{
		this.removeLine(0);
		this.dots.splice(0, 1);
		
		if (this.callbacks.onMiss !== null)
			this.callbacks.onMiss();
	}
};

root.ConnectLinesGame.prototype.beginLine = function(x, y)
{	
	this.prevX = x;
	this.prevY = y;
	this.lines.unshift(new createjs.Shape());	
	this.board.addChild(this.lines[0]);
};

root.ConnectLinesGame.prototype.drawLine = function(x, y)
{	
	this.lines[0].graphics.clear();
	this.lines[0].graphics.setStrokeStyle(this.strokeStyle.thickness);
	this.lines[0].graphics.beginStroke(this.strokeStyle.color);
	this.lines[0].graphics.moveTo(this.prevX, this.prevY);
	this.lines[0].graphics.lineTo(x, y);
	this.lines[0].graphics.endStroke();
};

root.ConnectLinesGame.prototype.getMouse = function()
{
	return { x: stage.mouseX / stage.scaleX, y: stage.mouseY / stage.scaleY};
};

root.ConnectLinesGame.prototype.removeLine = function(index)
{
	this.board.removeChild(this.lines[index]);
	this.lines[index]._off = true; // this is needed if you're using Animate 20.0.2
	this.lines.splice(index, 1);
};

root.ConnectLinesGame.prototype.addEvents = function(index)
{
	this.mouseDown = this.board.on("mousedown", this.mouseDownHandler, this);
	this.pressMove = this.board.on("pressmove", this.pressMoveHandler, this);
	this.pressUp = exportRoot.on("pressup", this.pressUpHandler, this);
};

root.ConnectLinesGame.prototype.removeEvents = function(index)
{
	this.board.off("mousedown", this.mouseDown);
	this.board.off("pressmove", this.pressMove);
	exportRoot.off("pressup", this.pressUp);
};

root.ConnectLinesGame.prototype.reset = function(add)
{
	var i;
	
	if (this.lines && this.lines.length > 0)
		for (i = this.lines.length - 1; i >= 0; i--)
			this.removeLine(i);
	
	if (this.dots && this.dots.length > 0)
		for (i = this.dots.length - 1; i >= 0; i--)
			this.dots[i].done = false;
			
	this.lines = [];
	this.dots = [];
	this.drawing = false;
	this.win = false;
	this.connectionsCount = 0;
	this.removeEvents();
			
	if (add)
		this.addEvents();
	
	if (this.callbacks.onReset !== null)
		this.callbacks.onReset();
};

 

 

 

 

 

 

 

Usage:

 

 

 

 

 

 

var game = new root.ConnectLinesGame(
{
	board: exportRoot.board,
	startPrefix: "dot",
	endPrefix: "box",
	totalDots: 3,
	strokeStyle: { color: "#39393B", thickness: 5 },
	callbacks:
	{
		onConnect: function()
		{
			console.log("Line connected!");
		},
		onMiss: function()
		{
			console.log("Miss...");
		},
		onWin: function()
		{
			console.log("You win!");
		},
		onReset: function()
		{
			console.log("Game restarted.");
		}
	}		
});

 

 

 

 

 

 

 

Files / source / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate cc/html5_canvas/connect_lines_game

 

I hope this helps.

 

 

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
Engaged ,
May 13, 2020 May 13, 2020

Copy link to clipboard

Copied

Many thanks and gratitude ...
I wish you happiness and lasting health
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
Community Expert ,
May 13, 2020 May 13, 2020

Copy link to clipboard

Copied

You're welcome!

 

I wish the best for you too!

 

Have a great development and design time!

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 ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

@JoãoCésar  Hi how to (shape: "round") ?

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 Expert ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

Hi.

 

In the code in the first frame of the main timeline, go to the setStrokeStyle method call (line 102) and add a second argument. Like this:

this.lines[0].graphics.setStrokeStyle(this.strokeStyle.thickness, "round");

 

I hope it helps.

 

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
Community Beginner ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

Thank you so much

So how do I make the line appear on the bottom layer?

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 ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

LATEST

@JoãoCésar 
So how do I make the line appear on the bottom layer?

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 ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

Hi, JC

I have downloaded your fla file. But there is a bit problem when release the mouse (mouseup event), the line won't stop. it keeps following the mouse pionter

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