web-dev-qa-db-fra.com

Objets à l'intérieur d'objets en javascript

Je suis un peu nouveau pour Javascript, alors peut-être que c'est juste une erreur noob, mais je n'ai rien trouvé qui m'aide spécifiquement en regardant autour. J'écris un jeu et j'essaie de créer un objet pour le menu de pause.

Une des choses que je voudrais faire est que les boutons du menu soient des objets à l'intérieur de l'objet pause_menu pour des raisons d'organisation. Je vais éventuellement ajouter des gestionnaires d'événements à ces objets, et j'aimerais également le faire à l'intérieur de l'objet pause_menu. Certains boutons ne sont pas encore entièrement codés, mais j'aimerais au moins que quelque chose fonctionne avant de continuer.

J'utilise Raphael.js v1.5.2 pour rendre les formes. Le truc Raphael fonctionne pour le reste de l'interface, mais le code pour cela n'est pas aussi agréable à regarder que celui-ci, donc quelque chose de similaire à cela serait préférable pour moi.

Mon problème actuel est que rien ne s'affiche réellement lorsque je fais var pause_menu = new pause_menu ();

Voici le code que j'ai jusqu'à présent pour le menu pause:

//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, voici donc la solution (avec un gestionnaire d'événements):

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: {}

};
javascriptobjectnestedjavascript-objects
25
Michael Taufen
var pause_menu = {
    pause_button : { someProperty : "prop1", someOther : "prop2" },
    resume_button : { resumeProp : "prop", resumeProp2 : false },
    quit_button : false
};

puis:

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

etc.

29
Jonathan

Vous pouvez avoir autant de niveaux de hiérarchie d'objets que vous le souhaitez, tant que vous déclarez un objet comme étant la propriété d'un autre objet parent. Faites attention aux virgules à chaque niveau, c'est la partie délicate. N'utilisez pas de virgules après le dernier élément de chaque niveau:

{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);
11
João Pimentel Ferreira