Creating a simple game using two.js has been my latest project. One of the functions I've implemented can be triggered either by a button click event or as part of the game loop:
function endGame(gameLoop){
showStartGame();
gameLoop.pause();
$("#gameSquare svg:first").remove();
$("#startGame").show();
}
Interestingly, the line $("#startGame").show() only behaves as expected when called from the event, while the rest of the function works seamlessly in both scenarios.
Here is the event handler for the click event:
$("#abandonGame").click(function(){
endGame(two);
gameLoopPaused = true;
gameStarted = false;
});
However, there seems to be an issue with a particular call (this.update() is invoked within the game loop):
this.update = function(){
var computedVector = new Two.Vector(0,0);
screens.forEach(function(screen){
screen.update(speed);
screen.getRectangles().forEach(function(item){
computedVector.x = item.rect.translation.x;
computedVector.y = item.rect.translation.y + screen.getPosition().y;
if(computedVector.distanceTo(new Two.Vector(ship.getX(), ship.getY())) < latura + 20)
endGameEvent();
});