Adobe Animate Html5 Canvas Connect Lines Game Error

Hi.

It seems this game has many flaws. So I decided to create another one.

Try it:

https://bit.ly/3A1BEOI

JavaScript code:

[Global script section]

(function()
{
	function ConnectGroupsGame(props)
	{
		// read-only properties
		this.__defineGetter__("acceptDragFrom", function() { return props.acceptDragFrom || [ 0, 1 ]; }); // tells which groups will accept drag
		this.__defineGetter__("groups", function() { return props.groups; });
		this.__defineGetter__("shuffleModes", function() { return props.shuffleModes || [ 0, 1 ]; }); // tells which groups will be shuffled
		
		this.id = props.id;
		this.callbacks = props.callbacks || {};
		this.hitDistance = props.hitDistance || 48;
		this.shuffleDuration = props.shuffleDuration || 350;
		this.shuffleEase = props.shuffleEase || createjs.Ease.backInOut;
		this.strokeStyle = props.strokeStyle;
		this.callback("onSetup");
		this.setup();
	}

	ConnectGroupsGame.prototype.setup = function(retainPositions)
	{
		var totalGroups = this.groups.length;
		var totalDrag = this.acceptDragFrom.length;
		var i, j, totalItems, index, item;
		
		this.score = 0;
		this.shapes = [];
		
		if (!retainPositions)
			this.positions = [];
		
		for (i = 0; i < totalGroups; i++)
		{
			if (!retainPositions)
				this.positions[i] = [];
			
			totalItems = this.groups[i].length;
			
			for (j = 0; j < totalItems; j++)
			{
				item = this.groups[i][j];
				
				if (!item)
					continue;
				
				item.savedMouseChildren = item.mouseChildren;
				item.mouseChildren = false;
				item.group = i;
				item.index = j;
				
				if (!retainPositions)
					this.positions[i][j] = { x: item.x, y: item.y };
			}
		}
	
		for (i = 0; i < totalDrag; i++)
		{
			index = this.acceptDragFrom[i];
			totalItems = this.groups[index].length;
		
			for (j = 0; j < totalItems; j++)
			{
				item = this.groups[index][j];
				
				if (!item)
					continue;
				
				item.mouseDown = item.on("mousedown", this.onMouseDown, this);
				item.pressMove = item.on("pressmove", this.onPressMove, this);
				item.pressUp = item.on("pressup", this.onPressUp, this);
			}
		}
	
		this.shuffle();
		this.callback("onReady");
	};

	ConnectGroupsGame.prototype.onMouseDown = function(e)
	{		
		this.createShape(e.currentTarget);
		this.callback("onMouseDown", e);
	};

	ConnectGroupsGame.prototype.onPressMove = function(e)
	{		
		var pointerPos = this.getPointer(e.currentTarget);
		
		this.drawLine(pointerPos.x, pointerPos.y);
		this.callback("onPressMove", e);
	};

	ConnectGroupsGame.prototype.onPressUp = function(e)
	{
		this.checkCollision(e.currentTarget);
		
		if (this.callbacks)
			this.callback("onPressUp", e);
	};

	ConnectGroupsGame.prototype.createShape = function(target)
	{
		this.pressedPos = { x: target.x, y: target.y };
		
		// in case the shape wasn't properly removed
		if (this.shape && this.shape.stage && !this.shape.connected)
		{
			this.removeInstance(this.shape);
			this.shape = null;
		}
	
		this.shape = new createjs.Shape();
		this.shape.connected = false;
		this.shape.mouseEnabled = false;
		this.shape.mouseChildren = false;
		target.parent.addChild(this.shape);
		this.shape.graphics.setStrokeStyle(this.strokeStyle.thickness, this.strokeStyle.caps, this.strokeStyle.joints, this.strokeStyle.miterLimit, this.strokeStyle.ignoreScale);
		this.shape.graphics.beginStroke(this.strokeStyle.color);
		this.shape.graphics.moveTo(this.pressedPos.x, this.pressedPos.y);
	};

	ConnectGroupsGame.prototype.drawLine = function(x, y)
	{
		this.shape.graphics.clear();
		this.shape.graphics.setStrokeStyle(this.strokeStyle.thickness, this.strokeStyle.caps, this.strokeStyle.joints, this.strokeStyle.miterLimit, this.strokeStyle.ignoreScale);
		this.shape.graphics.beginStroke(this.strokeStyle.color);
		this.shape.graphics.moveTo(this.pressedPos.x, this.pressedPos.y);
		this.shape.graphics.lineTo(x === undefined ? this.pointerPos.x : x, y === undefined ? this.pointerPos.y : y);
		this.shape.graphics.endStroke();
		this.callback("onDrawingLine");
	};

	ConnectGroupsGame.prototype.checkCollision = function(target)
    {
		var distanceBetweenTwoPoints = function(x1, y1, x2, y2)
		{
			var dx = x1 - x2;
			var dy = y1 - y2;

			return Math.sqrt(dx * dx + dy * dy);
		};

		var dest = this.groups[target.group === 0 ? 1 : 0][target.index];
				
		if (!dest)
		{
			this.removeInstance(this.shape);
			this.callback("onMiss");
			return;
		}

        this.pointerPos = this.getPointer(target);
		
		if (distanceBetweenTwoPoints(this.pointerPos.x, this.pointerPos.y, dest.x, dest.y) <= this.hitDistance)
		{
			var group0Length = this.groups[0].filter(function(item){ return item !== null; }).length;
			var group1Length = this.groups[1].filter(function(item){ return item !== null; }).length;
			
			this.shape.connected = true;
			this.shapes.push(this.shape);
			this.deactivateItem(target);
			this.deactivateItem(dest);
			this.drawLine(dest.x, dest.y);
			this.score++;
			this.callback("onHit");
			
			if (this.score === Math.min(group0Length, group1Length))
			{
				this.deactivateGroups();
				this.callback("onWin");
			}
		}
		else
		{
			this.removeInstance(this.shape);
			this.callback("onMiss");
		}
    };

	ConnectGroupsGame.prototype.shuffle = function()
	{
		var filter = function(item){ return item !== undefined && item !== null; };
		var sort = function(a, b){ return 0.5 - Math.random(); };
		var tempPositions = this.positions.slice(0);
		var tempGroups = this.groups.slice(0);
		var totalShuffles = this.shuffleModes.length;
		var i, j, totalItems, index, item, pos;
			
		for (i = 0; i < totalShuffles; i++)
		{
			index = this.shuffleModes[i];
			tempPositions[index].sort(sort).filter(filter);
			tempGroups[index] = tempGroups[index].filter(filter);
			totalItems = tempGroups[index].length;
		
			for (j = 0; j < totalItems; j++)
			{
				item = tempGroups[index][j];
				
				if (!item)
					return;
				
				pos = tempPositions[index][j];
												
				if (!pos)
					continue;
				
				createjs.Tween.get(item).to(pos, this.shuffleDuration, this.shuffleEase);
			}
		}
	
		this.callback("onShuffle");
	};

	ConnectGroupsGame.prototype.getPointer = function(target)
    {
        return target.parent.globalToLocal(target.stage.mouseX, target.stage.mouseY);
    };

	ConnectGroupsGame.prototype.restart = function(retainPositions)
	{
		this.deactivateGroups();
		this.removeShapes();
		this.setup(retainPositions);
		this.callback("onRestart");
	};

	ConnectGroupsGame.prototype.callback = function(name, e)
	{
		if (this.callbacks[name])
			this.callbacks[name].call(this, e);
	};

	ConnectGroupsGame.prototype.removeInstance = function(target)
	{
		target.parent.removeChild(target);
		target._off = true;
	};

	ConnectGroupsGame.prototype.deactivateGroups = function()
	{
		var totalGroups = this.groups.length;
		var i, j, totalItems;
		
		for (i = 0; i < totalGroups; i++)
		{
			totalItems = this.groups[i].length;
			
			for (j = 0; j < totalItems; j++)
			{
				if (this.groups[i][j])
					this.deactivateItem(this.groups[i][j]);
			}
		}
	};

	ConnectGroupsGame.prototype.deactivateItem = function(target)
	{
		target.mouseChildren = target.savedMouseChildren;
		
		target.off("mousedown", target.mouseDown);
		target.off("pressmove", target.pressMove);
		target.off("pressup", target.pressUp);
		
		delete target.group;
		delete target.index;
	};

	ConnectGroupsGame.prototype.removeShapes = function()
	{
		var i;
		
		for (i = this.shapes.length - 1; i > -1; i--)
			this.removeInstance(this.shapes[i]);
	};

	ConnectGroupsGame.prototype.destroy = function()
	{
		this.callback("onBeforeDestroy");
		this.deactivateGroups();
		this.removeShapes();
		
		delete this.acceptDragFrom;
		delete this.groups;
		delete this.hitDistance;
		delete this.id;
		delete this.pointerPos;
		delete this.positions;
		delete this.pressedPos;
		delete this.score;
		delete this.shapes;
		delete this.shape;
		delete this.shuffleEase;
		delete this.shuffleDuration;
		delete this.shuffleModes;
		delete this.strokeStyle;
		
		this.callback("onAfterDestroy");
		delete this.callbacks;
	};

	window.games = { ConnectGroupsGame: ConnectGroupsGame };
})();

[Main timeline - Frame 0]

var main = function()
{
	window.root = exportRoot;
	document.body.style.backgroundColor = lib.properties.color;
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	root.score = 0;
	root.stop();
	
	root.strokeStyle =
	{
		color: "#000000",
		thickness: 5,
		caps: "round",
		joints: 0,
		miterLimit: 10,
		ignoreScale: false
	};
	
	// onSetup, onReady, onMouseDown, onPressMove, onPressUp, onDrawingLine, onMiss
	// onHit, onWin, onMiss, onShuffle, onBeforeDestroy, onAfterDestroy
	root.callbacks =
	{
		onReady: function()
		{
			// use the this keyword to access the current game. E.g.: this.id = "something else"
			root["board" + this.id].winMessage.visible = false;
		},
		onWin: function()
		{
			root["board" + this.id].winMessage.visible = true;
			root.setScore(1);
		}
	};

	root.connectGroupsGame0 = new window.games.ConnectGroupsGame
	({
		id: 0,
		groups:
		[
			[ root.board0.rec0, root.board0.rec1, root.board0.rec2 ],
			[ root.board0.rec3, root.board0.rec4, root.board0.rec5 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});

	root.connectGroupsGame1 = new window.games.ConnectGroupsGame
	({
		id: 1,
		groups:
		[
			[ root.board1.rec0, root.board1.rec1, root.board1.rec2, root.board1.rec3 ],
			[ root.board1.rec4, root.board1.rec5, root.board1.rec6, root.board1.rec7 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});

	root.navigate = function(e)
	{
		if (e.target.name === "prevButton")
			root.gotoAndStop(root.currentFrame - 1);
		else if (e.target.name === "nextButton")
			root.gotoAndStop(root.currentFrame + 1);
		else if (e.target.name === "restartButton")
		{
			var suffix = e.target.parent.name.replace("board", "");
			var game = root["connectGroupsGame" + suffix];
			
			if (Object.keys(game).length > 0)
				game.restart(true);
		}
	};

	root.setScore = function(offset)
	{
		root.score += offset;
		root.scoreTF.text = "SCORE: " + root.score;
	}
	
	root.on("click", root.navigate);
};

if (!this.frame0Started)
{
	main();
	this.frame0Started = true;
}

[Main timeline - Frame 1]

var main = function()
{
	root.connectGroupsGame2 = new window.games.ConnectGroupsGame
	({
		id: 2,
		groups:
		[
			[ root.board2.rec0 ],
			[ root.board2.rec1 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});

	root.connectGroupsGame3 = new window.games.ConnectGroupsGame
	({
		id: 3,
		groups:
		[
			[ root.board3.rec0, root.board3.rec1 ],
			[ root.board3.rec2, root.board3.rec3 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});
};

if (!root.frame1started)
{
	main();
	root.frame1started = true;
}

[Main timeline - Frame 2]

var main = function()
{
	root.connectGroupsGame4 = new window.games.ConnectGroupsGame
	({
		id: 4,
		groups:
		[
			[ root.board4.rec0, root.board4.rec1, root.board4.rec2, root.board4.rec3, root.board4.rec4 ],
			[ root.board4.rec5, null, root.board4.rec6, null, root.board4.rec7 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});

	root.connectGroupsGame5 = new window.games.ConnectGroupsGame
	({
		id: 5,
		groups:
		[
			[ root.board5.rec0, root.board5.rec1 ],
			[ root.board5.rec2 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});
};

if (!root.frame2started)
{
	main();
	root.frame2started = true;
}

[Main timeline - Frame 3]

var main = function()
{
	root.connectGroupsGame6 = new window.games.ConnectGroupsGame
	({
		id: 6,
		groups:
		[
			[ root.board6.rec0, root.board6.rec1, root.board6.rec2, root.board6.rec3 ],
			[ root.board6.rec4, root.board6.rec5, root.board6.rec6, root.board6.rec7 ]
		],
		strokeStyle: root.strokeStyle,
		callbacks: root.callbacks
	});
};

if (!root.frame3started)
{
	main();
	root.frame3started = true;
}

FLA / files / download:

https://bit.ly/3dfJ8Vr

Please let me know if you find any issue.

Regards,

JC

I will bet@JoãoCésar can help you. He is one of the best game coders I know of.