Developing TicToe HTML5/User interface mock: Difference between revisions
Content deleted Content added
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
Line 8:
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.
Line 13 ⟶ 15:
[[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>
| |||