Developing TicToe HTML5/Implementing Client Entities: Difference between revisions
Content deleted Content added
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
| (58 intermediate revisions by the same user not shown) | |||
Line 1:
<noinclude>{{Navigation TicToe HTML5}}__NOTOC__</noinclude>
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.
Line 71 ⟶ 70:
== Testing and Debugging ==
[[File:TicToe-Firebug.png|right|Firebug used for testing]]
Okay, now it is time to test our code. The easiest way is, to use the Firefox extension [https://getfirebug.com/ Firebug].
Line 102 ⟶ 103:
== Generalizing the drawing code ==
We need very similar code to draw the crosses and noughts, that are placed by the player. Therefore we should move the drawing code from Gameboard up in the inheritance hierarchy to Entity. This, however, poses a problem: The name of the image file depends on the concrete object. We create a new method getImageName() to solve this issues. Depending on the concrete object, it will either return "board.png" or the name of the correct token image.
<source lang="javascript">
marauroa.rpobjectFactory.entity.draw = function() {
if (typeof(this.img) == "undefined") {
this.img = document.createElement('img');
document.getElementsByTagName("body")[0].appendChild(this.img);
}
this.img.src = "images/" + this.getImageName();
this.img.style.position = "absolute";
this.img.style.zIndex = this.z;
this.img.style.left = this.x + "px";
this.img.style.top = this.y + "px";
}
/** gameboard and token */
marauroa.rpobjectFactory.gameboard.getImageName = function() {
return "board.png";
}
marauroa.rpobjectFactory.token.getImageName = function() {
return this.tokenType + ".png";
}
</source>
For simplicity, we ensure that the token-type matches the filename.
== Drawing players ==
Our main goal is to get the core game working. Therefore we do not bother to create full player avatars, yet. Instead we just display the name at the correct position. We override the draw method as follows:
<source lang="javascript">
marauroa.rpobjectFactory.player.draw = function() {
if (typeof(this.div) == "undefined") {
this.div = document.createElement('div');
document.getElementsByTagName("body")[0].appendChild(this.div);
}
this.div.innerHTML = this.playerName;
this.div.style.position = "absolute";
this.div.style.zIndex = this.z;
this.div.style.left = this.x + "px";
this.div.style.top = this.y + "px";
}
</source>
This does have some redundancy with the code in the draw method of the Entity prototype. But we will completely rewrite it at a later time. Therefore it is okay for now, not to refactor it.
| |||