CODEWITHSUNDEEP
javascriptobjectnestedjavascript-objects
Michael Taufen
Michael Taufen

Reputation: 1704

Objects inside objects in javascript

I'm somewhat new to Javascript, so maybe this is just a noob mistake, but I haven't found anything that specifically helps me while looking around. I'm writing a game, and I'm trying to build an object for the pause menu.

One of the things I would like to do is have the buttons on the menu be objects inside of the pause_menu object for the sake of organization. I'm eventually going to add event handlers to these objects, and I'd like to do that inside the pause_menu object as well. Some of the button's aren't fully coded yet, but I'd like to get at least something working before I keep going.

I'm using Raphael.js v1.5.2 to render the shapes. The Raphael stuff works for the rest of the interface, but the code for that is not as pleasant to look at as this, so something similar to this would be preferable to me.

My current problem is that nothing actually renders when I do var pause_menu = new pause_menu();

This is the code I have so far for the pause menu:

//Pause Menu Object:
function pause_menu() {

    function pause_button() {
        this.button = game.rect(0, 350, 150, 50, 5);
        this.text =  game.text(75, 375, 'PAUSE');
    }
    function resume_button() {
        this.button;
        this.text;
    }
    function quit_button() {
        this.button;
        this.text;
    }
    this.pause_button = new pause_button(); //the button that the user presses to pause the game (I want an event handler on this to trigger .show() method for presently hidden menu items)
    this.resume_button = new resume_button();
    this.quit_button = new quit_button();
    this.box = game.rect(150, 50, 400, 300, 5).hide(); //the box that surrounds the menu when it appears
}
var pause_menu = new pause_menu();

OK, so here's the solution (with an event handler):

var pause_menu = {

    pause_button: { button : game.rect(0, 350, 150, 50, 5).click(function (event){
                       pause_menu.menu_box.show();
                  }), text : game.text(75, 375, 'PAUSE') },
    menu_box: game.rect(150, 50, 400, 300, 5).hide(),
    resume_button: {},
    quit_button: {}

};

Upvotes: 35

Views: 213473

Answers (2)

João Pimentel Ferreira
João Pimentel Ferreira

Reputation: 16233

You may have as many levels of Object hierarchy as you want, as long you declare an Object as being a property of another parent Object. Pay attention to the commas on each level, that's the tricky part. Don't use commas after the last element on each level:

{el1, el2, {el31, el32, el33}, {el41, el42}}

var MainObj = {

  prop1: "prop1MainObj",
  
  Obj1: {
    prop1: "prop1Obj1",
    prop2: "prop2Obj1",    
    Obj2: {
      prop1: "hey you",
      prop2: "prop2Obj2"
    }
  },
    
  Obj3: {
    prop1: "prop1Obj3",
    prop2: "prop2Obj3"
  },
  
  Obj4: {
    prop1: true,
    prop2: 3
  }  
};

console.log(MainObj.Obj1.Obj2.prop1);

Upvotes: 26

Jonathan
Jonathan

Reputation: 1892

var pause_menu = {
    pause_button : { someProperty : "prop1", someOther : "prop2" },
    resume_button : { resumeProp : "prop", resumeProp2 : false },
    quit_button : false
};

then:

pause_menu.pause_button.someProperty //evaluates to "prop1"

etc etc.

Upvotes: 40

Related Questions