Highlighted

HTML5 Canvas + drag line and drop

Participant ,
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();

	}
}

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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 pointes 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

TOPICS
Code, Error

Views

2.1K

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

HTML5 Canvas + drag line and drop

Participant ,
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();

	}
}

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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 pointes 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

TOPICS
Code, Error

Views

2.1K

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
May 11, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
May 11, 2020 0
Participant ,
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
Reply
Loading...
May 11, 2020 0
Participant ,
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
Reply
Loading...
May 11, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
May 11, 2020 0
Participant ,
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
Reply
Loading...
May 11, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
May 11, 2020 0
Participant ,
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
Reply
Loading...
May 11, 2020 0
Participant ,
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
Reply
Loading...
May 12, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
May 12, 2020 0
Participant ,
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
Reply
Loading...
May 12, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
May 12, 2020 0
Participant ,
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
Reply
Loading...
May 12, 2020 0
Participant ,
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
Reply
Loading...
May 12, 2020 0
Adobe Community Professional ,
May 12, 2020

Copy link to clipboard

Copied

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 pointes 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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 12, 2020 1
Participant ,
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
Reply
Loading...
May 13, 2020 1
Adobe Community Professional ,
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!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 13, 2020 1