HTML5 Canvas + drag line and drop

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