Designing the Visual Design Framework

1. Develop Visual Language Studies

2. Apply choosen visual style to screen archetype

Bagh-Chal (Moving Tigers)

Game Description

The game is played on a five by five point grid, like checkers. Pieces are positioned at the intersection of the lines. Directions of valid movement between these points are connected by lines. The game play takes place in two phases. In the first phase the goats are placed on the board while the tigers are moved. In the second phase both the goats and the tigers are moved. For the tigers, the objective is to "capture" five goats to win. Capturing is performed by jumping over the goats. The goats win by blocking all the tigers' legal moves.

Rules

• At the start of the game all the four tigers are placed on the four corners of the grid, facing the center. All goats start off the board.
• The pieces must be put at the intersections of the board lines and moves follow these lines
• The player controlling the goats moves first by placing a goat onto a free intersection on the board. Then it is the tiger's turn. One tiger is then moved to an adjacent position along the lines that indicates the valid moves. Moves are alternated between players.
• Tigers capture goats by jumping over them to an adjacent free position (as in checkers). Goats cannot move until all 20 have been put on the board.
  
  
  The tiger must move according to these rules:
• They can only start capturing goats any moment after the match has started.
• They can capture only one goat at a time.
• They can jump over a goat in any direction, but it must be to an adjacent intersection an adjacent intersection following any of the lines drawn on the board.
• A tiger cannot jump over another tiger.
  
  The goat must move according to these rules:
• They must leave the board when captured.
• They can not jump over the tigers or other goats.
• They can only move after all 20 have been put on the board.
  
  
  Win
• The tigers win once they have captured five goats.
• Goats try to avoid being captured (jumped over) and they win by blocking the tigers' moves till they are unable to move.

Source: Wikipedia and other sites

Baghchal - Defining the Interaction Framework

Framework

1. Define Form Factor, Posture, and Input Methods

• The game will be played on website. It will be accessed with different resolution monitors. But it will designed on 600 x 800 screen real estate.
• The game will be played using mouse. Mouse move, like click and drag will be the main move to play the game. Other mouse function like Click will be used as well.
  
  

2. Defining Functional and Data Elements

• The Tigers can jump over and kill a Goat if there isn't another Goat or Tiger in next grid.
• A Tiger cannot jump over another Tiger.
• A Goat cannot jump over Tiger and other Goats.
• Once the Goat are on the board they are unmoveable till all the 20 Goats are on the board.
• Once a Goat is killed, it will be moved to diffrent screen real state with reduced alpha.
• Once a Goat is killed, it will not be able to move backed to the board.
• When more than 5 Goats are killed, the Tiger wins the game.
• On a new game first move is of Goat.
• When it is Goats turn, it will highlight Goat and reduce the alpha of Tiger and visa versa.
• I the same matter, when a user mouse overs on one of the button it shoud have some reaction so that they know it's working. When its turn of the player1 (Bag), the Goats should be static or unmoveable.
• There should be a function of timer, so that a user have to make move with in a minute or will loose their turn.
• Way to make it visible what goats are alive and what are killed. Probably a reduced alpha value.
• When the game is finished, or there are no more moves a message on congraluating the winner.
  

3. Determine Functional Groups and Hierarchy

The design is made for 600 x 800 screen real state. It is on 2 panes design. The main game is on 500 x 500 screen real estate on the right hand side. Spacer will be 10 px. Left hand side will have the game name followed by Goats initial position and indicator whose turn it is. Left hand side screen real estate is 270 px.

4. Sketch the Interaction Framework

.
.
.
.
.
.
.
.

5. Construct Key Path Scenarios

Once the page is up the first thing a player will see is the game screen. By default the Goat has to make the first move. Underneath the Players button there will be a game rules button. When clicked it will open a rules in a seperate window so that they can check the rules while playing the game.

6. Check Design with Validation Scenarios

Once the Goat makes its move, i.e. put it on the checker board, the goat button alpha will change to .5 and the alpha of Tiger will change to 1. Hence, giving visual clue to the palyer. And once the Tiger makes its move, its alpha will change to .5 and Goats will 1.
When it's turn of the Tiger and it tries to move the Goat it will give an error message shaking the Goat like in mac when wrong password is entered and visa versa.

Moves:
Moves need to be variable so that works in the dimension of the game is changed.
Something like. _jump = game.height / 4.

Timer Class:
Needs to make move with in a min

Active Player:
Needs to show whos turn it is.

Ganesh Puzzle