Developing TicToe HTML5/Implementing Client Entities: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
| (45 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Navigation TicToe HTML5}}__NOTOC__ |
<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. |
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: | Line 70: | ||
== Testing and Debugging == |
== 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]. |
Okay, now it is time to test our code. The easiest way is, to use the Firefox extension [https://getfirebug.com/ Firebug]. |
||
| Line 131: | Line 132: | ||
== Drawing players == |
== 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: |
|||
{{TODO|write this sub-section}} |
|||
<source lang="javascript"> |
|||
== Actions == |
|||
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. |
|||
{{TODO|write this sub-section}} |
|||