Developing TicToe HTML5/Implementing Client Entities: Difference between revisions
imported>Hendrik Brummermann No edit summary |
imported>Hendrik Brummermann No edit summary |
||
| Line 30: | Line 30: | ||
In the later live game, Marauroa has to create the objects based on the information it gets from the server. In order to store the prototpyes it has a factory called marauroa.rpobjectFactory. |
In the later live game, Marauroa has to create the objects based on the information it gets from the server. In order to store the prototpyes it has a factory called marauroa.rpobjectFactory. |
||
As a first step, we setup our inheritance hierarchy. Entity is the class at the root. Gameboard, Token and Player are specializations |
As a first step, we setup our inheritance hierarchy by defining prototypes. Entity is the class at the root. Gameboard, Token and Player are specializations of it. |
||
<source lang=" |
<source lang="javascript"> |
||
/** Abstract entity */ |
/** Abstract entity */ |
||
marauroa.rpobjectFactory.entity = marauroa.util.fromProto(marauroa.rpobjectFactory._default); |
marauroa.rpobjectFactory.entity = marauroa.util.fromProto(marauroa.rpobjectFactory._default); |
||
| Line 45: | Line 45: | ||
marauroa.rpobjectFactory.player = marauroa.util.fromProto(marauroa.rpobjectFactory.entity); |
marauroa.rpobjectFactory.player = marauroa.util.fromProto(marauroa.rpobjectFactory.entity); |
||
</source> |
</source> |
||
== Drawing the gameboard == |
|||
{{TODO|write this subsection}} |
|||
Revision as of 19:52, 18 December 2011
Development log of TicToe HTML5
After drawing a rough entity class diagram in the previous article, we are now going to implement the client side. We need to start with a html page that hosts the required java script files.
HTML page as container
Note: If you are using a development version of marauroa, you may need to include all the marauroa .js files in stead of marauroa.compiled.js.
<source lang="html4strict"> <!doctype html> <html> <head> <title>TicToe</title> <style type="text/css"> body {color: #FFF; font-family: Arial; background-color:#0A0} </style> </head>
<body> <script type="text/javascript" src="marauroa.compiled.js"></script> <script type="text/javascript" src="src/js/entities.js"></script> </body> </html> </source>
Implementing the entity hierarchy
In Java we would implement a class per entity type. JavaScript, however, is not class but prototype based.
In the later live game, Marauroa has to create the objects based on the information it gets from the server. In order to store the prototpyes it has a factory called marauroa.rpobjectFactory.
As a first step, we setup our inheritance hierarchy by defining prototypes. Entity is the class at the root. Gameboard, Token and Player are specializations of it.
<source lang="javascript"> /** Abstract entity */ marauroa.rpobjectFactory.entity = marauroa.util.fromProto(marauroa.rpobjectFactory._default);
/** game board */ marauroa.rpobjectFactory.gameboard = marauroa.util.fromProto(marauroa.rpobjectFactory.entity);
/** token */ marauroa.rpobjectFactory.token = marauroa.util.fromProto(marauroa.rpobjectFactory.entity);
/** player */ marauroa.rpobjectFactory.player = marauroa.util.fromProto(marauroa.rpobjectFactory.entity); </source>
Drawing the gameboard
TODO: write this subsection