function MainMenu(game, camera) { this.system = null; this.canvas = null; this.keyboard = null; this.mouse = null; this.curtain = null; this.buttonText = "Enter"; this.textMetrics = null; this.isHovered = false; this.init = function(systemObject, canvas) { var stage = this; this.system = systemObject; this.canvas = canvas; this.mouse = new MouseInput(); this.mouse.attach(canvas, this); this.curtain = new Curtain(); this.curtain.init(systemObject, canvas); this.curtain.open(700, function() { stage.isStarted = true; }); }; this.end = function() { this.mouse.detatch(); } this.updateDelta = function(delta, canvas) { if(system.keyboard.isDown(Keys.Space) || system.keyboard.isDown(Keys.Enter)) { this.curtain.close(1000, function() { system.theater.changeStage("world"); }); } this.curtain.updateDelta(delta); }; this.draw = function(context) { var title = "Some Robot Game!"; context.font = "72px sans-serif"; context.textAlign = "center"; context.textBaseline = "middle"; var textWidth = context.measureText(title).width; context.fillStyle = "#DDDDDD"; context.strokeStyle = "#333333"; context.lineWidth = 2; context.fillText(title, this.canvas.width /2 , 100); this.textMetrics = context.measureText(this.buttonText); var textWidth = this.textMetrics.width; context.save(); context.translate(this.canvas.width / 2, this.canvas.height / 2); var message = "Play"; context.font = "72px sans-serif"; context.textAlign = "center"; context.textBaseline = "middle"; if(this.isHovered) { context.fillStyle="#333333"; } else { context.fillStyle="#777777"; } context.beginPath(); context.rect(-(textWidth / 2) - 10, -72 / 2, textWidth + 20, 82); context.fill(); context.fillStyle = "#DDDDDD"; context.strokeStyle = "#333333"; context.lineWidth = 2; context.fillText(message, 0, 0); context.restore(); this.curtain.draw(context); }; this.mouseMove = function(canvas, x, y) { this.isHovered = false; var topLeft = {}; topLeft.x = (this.canvas.width / 2) - (this.textMetrics.width / 2) - 10; topLeft.y = (this.canvas.height / 2) - (72 / 2); var bottomRight = {}; bottomRight.x = (this.canvas.width / 2) + this.textMetrics.width + 20; bottomRight.y = (this.canvas.height / 2) + 72; if(x > topLeft.x && x < bottomRight.x) { if(y > topLeft.y && y < bottomRight.y) { this.isHovered = true; } } } this.touchMove = function(canvas, x, y) { this.isHovered = false; var topLeft = {}; topLeft.x = (this.canvas.width / 2) - (this.textMetrics.width / 2) - 10; topLeft.y = (this.canvas.height / 2) - (72 / 2); var bottomRight = {}; bottomRight.x = (this.canvas.width / 2) + (this.textMetrics.width + 20) / 2; bottomRight.y = (this.canvas.height / 2) + (72 / 2); if(x > topLeft.x && x < bottomRight.x) { if(y > topLeft.y && y < bottomRight.y) { this.isHovered = true; } } } this.mouseDown = function(canvas, button, x, y) { if(this.isHovered) { this.curtain.close(1000, function() { system.theater.changeStage("world"); }); } } this.touchStart = function(canvas, x, y) { if(this.isHovered) { this.curtain.close(1000, function() { system.theater.changeStage("world"); }); } }; };