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
1 Correct answer
21
Replies
AdChoices
