Basic game code structure tips

Question

I'm learning JavaScript and came up with this basic game code structure (using the CreateJS framework):

var stage;
var totalLoaded = 0;
var manifest;
var game = game || {};
game.init = {
 load: function () {
 var canvas = document.getElementById('gameCanvas');
 images = createjs.images || {};
 stage = new createjs.Stage(canvas);
 manifest = [{
 src: "http://i47.tinypic.com/swtj03.png",
 id: "circleImg"
 }, ]
 loader = new createjs.PreloadJS(false);
 loader.onFileLoad = game.init.handleFileLoad;
 loader.loadManifest(manifest);
 game.init.ticker();
 game.init.processText();
 game.init.interaction();
 },
 handleFileLoad: function (o) {
 if (o.type == "image") {
 images[o.id] = o.result = new createjs.Bitmap(o.result);
 switch (o.id) {
 case "circleImg":
 images[o.id].y = 302;
 break;
 }
 game.init.handleLoadComplete();
 }
 },
 handleLoadComplete: function (e) {
 totalLoaded++;
 if (manifest.length == totalLoaded) {
 game.init.handleComplete();
 }
 },
 handleComplete: function () {
 game.menu();
 },
 ticker: function () {
 createjs.Ticker.addListener(window);
 createjs.Ticker.useRAF = true;
 createjs.Ticker.setFPS(60);
 },
 text: [{
 "name": "startText",
 "content": "START",
 "style": "bold 50px Arial",
 "color": "red",
 "x": "325",
 "y": "140",
 "scaleX":"1",
 "scaleY":"1"
 },
 {
 "name": "animationComplete",
 "content": "ANIMATION COMPLETE",
 "style": "bold 50px Arial",
 "color": "red",
 "x": "125",
 "y": "140",
 "scaleX":"1",
 "scaleY":"1"
 },
 {
 "name": "animationRestart",
 "content": "RESTART TO MENU?",
 "style": "bold 20px Arial",
 "color": "gray",
 "x": "125",
 "y": "340",
 "scaleX":"1",
 "scaleY":"1"
 }
 ],
 textId: [],
 processText: function () {
 for (i = 0; i < this.text.length; i++) {
 this.textId[i] = new createjs.Text(this.text[i].content, this.text[i].style, this.text[i].color);
 this.textId[i].x = this.text[i].x;
 this.textId[i].y = this.text[i].y;
 this.textId[i].scaleX = this.text[i].scaleX;
 this.textId[i].scaleY = this.text[i].scaleY;
 this.textId[i].name = this.text[i].name;
 }
 },
 resource: function (e) {
 stage.addChild(e);
 },
 remove: function (e) {
 stage.removeChild(e);
 },
 interaction: function () {
 this.textId[0].onClick = handleClick;
 this.textId[2].onClick = handleClick;
 function handleClick(event) {
 switch (event.target.name) {
 case "startText":
 game.init.remove(game.init.textId[0]);
 game.init.resource(images['circleImg']);
 game.animation.circle();
 break;
 case "animationRestart":
 game.restart();
 break;
 }
 }
 }
}
game.animation = {
 circle: function () {
 var circleTween = new createjs.Tween.get(images['circleImg'], {
 loop: false
 }).to({
 x: 800
 }, 2000, createjs.Ease.quadIn).call(function () {
 game.animation.callComplete();
 });
 },
 callComplete: function() {
 game.init.resource(game.init.textId[1]);
 game.animation.restartText();
 },
 restartText: function() {
 game.init.resource(game.init.textId[2]);
 var restartBlink = new createjs.Tween.get(game.init.textId[2], {
 loop:true
 }).to({
 scaleX: 1,
 scaleY: 1
 }, 500, createjs.Ease.quadOut)
 .to({
 scaleX: 1.1,
 scaleY: 1.1
 }, 500, createjs.Ease.quadOut)
 .to({
 scaleX: 1,
 scaleY: 1
 }, 500, createjs.Ease.quadOut)
 }
}
game.resetPositions = function() {
 images['circleImg'].x = 0;
}
game.restart = function () {
 stage.removeAllChildren();
 game.resetPositions();
 game.menu();
}
game.menu = function () {
 game.init.resource(game.init.textId[0]);
}
tick = function () {
 stage.update();
}​

JSFiddle

(old version before changes)

Is this a viable basic game structure? How can I improve game data storage (in this basic case text storage) and naming?

EDIT: added repeat functionality and a dedicated namespace.

Answer 1

From a once over:

• Object notation does not require the properties to be quoted, you can simply do this:

  {
   name: "startText",
   content: "START",
   style: "bold 50px Arial",
   color: "red",
   x: 325,
   y: 140,
   scaleX:1,
   scaleY:1
  }
  

  Note that I also removed quotes from the numeric constants, you do not need them.

• I would have named your text array texts instead of text
• There are some variables you are not declaring with var : i, images, and loader, this pollutes the global namespace.
• It is better to use images.circleImg then images['circleImg'].
• There is no need capture the results of new createjs.Tween into circleTween and restartBlink since you do nothing with those variables
• The magic number 500, 2000 and 800 in restartText should be capture in a single constant
• This : this.textId[0].onClick = handleClick; is old skool, please look into addEventListener
• I would have made stage, totalLoaded and manifest part of game
• I would add some error handling to loader especially if you are loading an image from a different domain..
• On a final note, the jsfiddle does not work for me, but then again, this a 2012 question ;)