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>
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
thisto 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: