function ExampleGame() { var game = null; var system = null; var box = null; var helloText = null; var worldText = null; var track = false; this.init = function(systemObject, canvas) { game = this; system = systemObject; track = false; box = {position: {x: 10, y: 10}, width: 50, height: 50, velocity: {x: 1, y: 1}}; helloText = {text: "Hello", width: 100, height: 100, offset: {x:0, y:0}}; worldText = {text: "World", width: 100, height: 100, offset: {x:0, y:0}}; }; this.updateDelta = function(canvas, delta){ this.update(canvas); if(!track) { box.position.x += box.velocity.x * delta; box.position.y += box.velocity.y * delta; if(box.position.x < 0) { box.velocity.x *= -1; box.position.x = 0; } if(box.position.y < 0) { box.velocity.y *= -1; box.position.y = 0; } if(box.position.x + box.width > canvas.width) { box.velocity.x *= -1; box.position.x = canvas.width - box.width; } if(box.position.y + box.height > canvas.height) { box.velocity.y *= -1; box.position.y = canvas.height - box.height; } } helloText.offset.x = box.position.x + (box.width / 2); helloText.offset.y = box.position.y + 16; worldText.offset.x = box.position.x + (box.width / 2); worldText.offset.y = box.position.y + 32; }; this.update = function(canvas) { }; this.draw = function(context) { context.fillStyle = "#33DD33"; context.strokeStyle = "#33DD33"; context.beginPath(); context.fillRect(box.position.x, box.position.y, box.width, box.height); context.rect(box.position.x, box.position.y, box.width, box.height); context.stroke(); context.font = "16px sans-serif"; context.textAlign = "center"; context.fillStyle = "#3333DD"; var helloMetrics = context.measureText("Hello"); var worldMetrics = context.measureText("World"); helloText.width = helloMetrics.width; worldText.width = worldMetrics.width; context.fillText(helloText.text, helloText.offset.x, helloText.offset.y); context.fillText(worldText.text, worldText.offset.x, worldText.offset.y); }; this.mouseMove = function(canvas, x, y) { if(track) { box.position.x = x - box.width / 2; box.position.y = y - box.height / 2; } }; this.mouseClick = function(canvas, button, x, y) { track = !track; if(track) { box.position.x = x - box.width / 2; box.position.y = y - box.height / 2; } }; this.contextMenu = function(canvas, event) { }; }