CODEWITHSUNDEEP
javascriptoop
JaPerk14
JaPerk14

Reputation: 1664

JavaScript OOP assistanced needed

I have some JavaScript code that I can't get to work. I've tried moving some stuff around, and changing up some keywords, but nothing has worked so far. I'll let you guys take a crack at it.

This is the javascript file:

    var GAME = {

  /////////////////////////////
  // GAME PROPERTIES         //
  /////////////////////////////

  /* LAYOUT PROPERTIES */
  ROWS: 3,
  COLS: 3,
  CELLS: {
    TOTAL: ROWS * COLS,
    CELL_SIZE: 25,
  },

  /////////////////////////////
  // GAME METHODS            //
  /////////////////////////////

  display: function() {

    alert( "ROWS: " + ROWS );
  }

};

On a separate HTML web page, I am using the following code:

<script type="text/javascript">
<!--
GAME.display();
//-->
</script>

I've run the code on firebug and I've gotten the following error:

TypeError: GAME is undefined

I've tried, but I can't get the error to go away. Help!

COMPLETE HTML PROVIDED:

<!doctype html>
<html>
  <head>

    <meta charset="utf-8">
    <title>JavaScript Canvas | Tic-Tac-Toe</title>

    <style type="text/css">
    #canvas01 {
      border: 1px solid #000;
    }
    </style>


    <!-- JQUERY -->

  </head>
<body>


<div id="canvas01"></div>

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.min.js"></script>

<script type="text/javascript" src="game/core.js"></script>

<script type="text/javascript">

GAME.display();


</script>

</body>
</html>

Upvotes: -1

Views: 115

Answers (3)

Stuart
Stuart

Reputation: 9858

The previous answers are good but I just want to suggest that you consider making the game object this way instead:

function Game() {
    var rows = 3,
        cols = 3,
        cells = {
            total: rows * cols, // no problem here
            cellSize: 25
        };
    this.display = function () {
        alert('ROWS: ' + rows); // or here
    };
}    
GAME = new Game();

That way you can write programme logic in a sequential way, and define variables and functions without them always being publicly accessible properties of the object. Of course you could go further with complicated design patterns, but to me this is a good place to start and less counter-intuitive if you are just starting out with OO javascript.

Upvotes: 1

LetterEh
LetterEh

Reputation: 26696

@danronmoon is on the right track, here.

First, if this is going to be one BIG object full of nested objects, you can't access the values for assigning to other properties until after the object is created.

var obj = {
    a : 1,
    b : 2,
    c : a + b // won't work for 2 reasons
};

Second, you can't reference properties without either assigning them to a variable in a function, or referencing the full chain:

var obj = { a : 1, b : 2, c : null };

obj.c = obj.a + obj.b;
obj.c; // 3

Now it works.

Alternatively:

var obj = {
    a : 1,
    b : 2,
    c : null,
    initialize : function () {
        obj.c = obj.a + obj.b;
    }
};

obj.initialize();

or

var obj = {
    // ...
    initialize : function () {
        this.c = this.a + this.b;
    }
};

One caveat of the last form: this points to one-level higher than the function, so you can only access siblings of the function.

var obj = {
    level : 1,
    init : function () {
        // this === obj
    },
    nested : {
        level : 2,
        init : function () {
            // this === obj.nested
        },
        nested : {
            level : 3,
            init : function () {
                // this === obj.nested.nested
            }
        }
    }
};

There is no way to access a level higher in the chain using this, unless you store a reference to parent in the object, or reference it directly:

console.log( obj.nested.nested.level );

Hope that helps.

Upvotes: 1

danronmoon
danronmoon

Reputation: 3873

You can't define a property of an object based on another property inside the same object at the point of instantiation. Right now, the culprit that is preventing GAME from being defined is the assignment of TOTAL (your JS runtime will throw a TypeError saying ROWS is undefined since it appears first). You should always use local variables to define the properties of your object, because who knows when your game will need different requirements? Also, take note that you should use this to point to the context of the object for when you want to display the number of rows. You would have to do something like this:

var rows = 3, cols = 3, cellSize = 25;

var GAME = {



/////////////////////////////
  // GAME PROPERTIES         //
  /////////////////////////////

  /* LAYOUT PROPERTIES */
  ROWS: rows,
  COLS: cols,
  CELLS: {
    TOTAL: rows * cols,
    CELL_SIZE: cellSize,
  },

  /////////////////////////////
  // GAME METHODS            //
  /////////////////////////////

  display: function() {
    alert( "ROWS: " + this.ROWS );
  }
};

Upvotes: 1

Related Questions