Developing TicToe HTML5/User interface mock: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
| Line 8: | Line 8: | ||
We start with the main screen. This is the most important part of the game. |
We start with the main screen. This is the most important part of the game. |
||
=== Entities === |
|||
One player uses crosses [[File:Token blue x.png|The token used by one of the players.]] to mark their field and the other player uses noughts [[File:Token red o.png|The token used by the other player.]]. Those tokens are placed or drawn on a 3 x 3 game board. |
One player uses crosses [[File:Token blue x.png|The token used by one of the players.]] to mark their field and the other player uses noughts [[File:Token red o.png|The token used by the other player.]]. Those tokens are placed or drawn on a 3 x 3 game board. |
||
| Line 13: | Line 15: | ||
[[File:Board 3x3.png|The 3 x 3 game board.]] |
[[File:Board 3x3.png|The 3 x 3 game board.]] |
||
In a later version we will add player avatars that will stand left and right of the game board. |
|||
=== Mock of the main game screen === |
|||
With these images, we create the first mock of the main game screen: |
|||
[[File:TicToe-mockup.png|First mock of the main game screen]] |
|||
For the game we use a green background, until we have some nice grass sprites covering the ground later. Then we create img-Tags to load the game board and tokens. We use CSS positing to place the tokens at the correct positions on top of the game board: |
|||
<source lang="html4strict"> |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head><title>TickToe</title></head> |
|||
<body style="background-color:#0A0"> |
|||
<img src="/images/board.png" style="position: absolute; z-index: 0; left: 50px; top: 50px"> |
|||
<img src="/images/x.png" style="position: absolute; z-index: 1; left: 82px; top: 82px"> |
|||
<img src="/images/o.png" style="position: absolute; z-index: 1; left: 50px; top: 50px"> |
|||
</body> |
|||
</html> |
|||
</source> |
|||