Design

Interface Design

I think simplicity is really useful when it comes to designing game interfaces, especially if it is going to be played by people of different ages.

Here is a wireframe of the interface of my game:

The interface of my game is mainly formed by two cards (player 1 and player 2). On the middle of the screen, there are the buttons to select the gamemode (single player, multiplayer, simulation)and one to reset the game. On te side of each card there will be a WINS counter.

Cards: each card has six buttons to pick among the following stats:

• First Flight
• Cruise Speed
• Range
• Wingspan
• Seats
• Payload

The buttons show when it's the player's turn and hide when it isn't.
Each card represents a plane, on top of each card the name of the plane and its picture will update after every round.
On the bottom of the cards there is a cards counter to show to the player how many cards has left.

Simplified Flowchart, Use of Abstraction

My game is coded using Javascript, and runs on an HTML website styled with CSS.

The game has 5 states:

• Idle: allows to select a game mode and a same amount of cards are given to each player.
• Single Player: play against the computer. Computer response time gets faster as it wins cards.
• Multiplayer: two players.
• Simulation: computer vs computer. Response time gets faster as they wins cards, else the game could last hours.
• Game Over: when a player wins the game is over, the game state is switched to Idle and the cards are shuffled and given over again.

The game can be reset at any time by pressing the reset button, which changes the game state to Idle to start playing a new game.

When a stat button is pressed the two cards' stats are compared, wins the highest value except the First Flight stat, the smallest wins.

Eg. Player 1 First Flight: 1967 | Player 2 First Flight: 2000 | Player 1 wins.

Eg. Player 1 Range: 8500 | Player 2 Range: 12300 | Player 2 wins.

Classes:

There are to classes: State (game states) and Input (game mode buttons)

Function library:

• stateMachine(): changes the game states.
• processState(): change the visibility of the buttons according to the game state.
• whoWins(): compares stats and returns the winner.
• shuffleDeck(): shuffles the deck card.
• pickRandom(): generates a random index value.
• renderStatsTable(): generates table with statistics.
• showExplanation(): shows the game instructions.
• resetDataValues(): reset the data values in the chart.

Meeting advanced requirements:

• In order to meet the first advanced requirement, my Top Trumps will store data about the last three games played. The data will be stored in the window local storage. The reason why I am using the window local storage data insted of a database such as "Firebase" is to avoid third party services/systems.
Note: when the game is opened for first time the local storage will be empty.

• To meet the second advanced requirement, my game will perform a statistical analysis on how many times each clicked stat won the turn. The data recorded during the game will be shown on a pie chart. This data will be deleted after each game.

• For the third advanced requirement the idea is to give to one of the simulated players the ability of differentiating among cards so that they can choose stats which are more likely to win.