Question

I am attempting to make a HTML5/JavaScript game with EnchantJS which involves a 6×6 grid of colored squares. I got 1 image to show but rather than having 36×4 lines of code to display all of the images i wanted to move it all to a function. The code breaks at line 62 this.addChild(block);. I can’t seem to figure out why this is not working. I’ve spent the past days reading up on what functions are and how to call info between functions. I can’t figure out what I’m doing wrong and I can’t find answers from searching. I come from a purely Java and c++ background so I think I’m messing up the syntax and not understanding something.

enchant();

window.onload = function() {

    /*
     *  Game width and height.
     *  Note: Game scale is half so actual width=width/2 and 
     *  actual heigh it height/2.
     */
    var game = new Game(1280,768);

    /*
     *  Game Preload Vars
     */
    game.preload('res/bg2x.png',
     'res/block.png');

    game.fps = 30;
    game.scale = 0.5;

    game.onload = function() {

      console.log("Game Loaded");
      var scene = new SceneGame;
      game.pushScene(scene);

    }

    game.start();
    window.scrollTo(0, 0);

    var SceneGame = Class.create(Scene, {

      initialize: function() {

        var game, bg;
        Scene.apply(this);
        game = Game.instance;

        // Background
        bg = new Sprite(1280,768);
        bg.image = game.assets['res/bg2x.png'];

        // Populate Screen
        this.addChild(bg);

        gridBuilder(500,75);

      }

    });

    var gridBuilder = function(x,y) {

      this.x=x;
      this.y=y;

      block = new Block;
      block.x = x;
      block.y = y;
      this.block = block;

      this.addChild(block); // THIS IS WHERE THE ERROR IS OCCURING.

    };

    var Block = Class.create(Sprite, {

        // The player character.     
        initialize: function() {
         // 1 - Call superclass constructor
         Sprite.apply(this,[100, 100]);
         this.image = Game.instance.assets['res/block.png'];
         // 2 - Animate
         this.animationDuration = 0;
         this.addEventListener(Event.ENTER_FRAME, this.updateAnimation);
        },

        updateAnimation: function (evt) {        
          this.animationDuration += evt.elapsed * 0.001;       
          if (this.animationDuration >= 0.25) {
              this.frame = (this.frame + 1) % 4;
              this.animationDuration -= 0.25;
          }
        },

    });

}

Answer 1

gridBuilder is a function, nothing more. It has no addChild method. The reason addChild works in SceneGame is because SceneGame is created by Class.create which I assume has an addChild method inherently in it. Either create gridBuilder the same way you create the class SceneGame or rethink what you actually want gridBuilder to do. One way or the other, something you’re doing isn’t adding up and you need to think about what you’re actually expecting your JS to accomplish.