Multiplayer Game Development | Hiragana Karuta Log

Web DevelopmentGame, Project Log

hiragana karuta top

This is a documentation of Hiragana Karuta- a multiplayer game developed for uni assignment. This game was re-designed as a single player game and available to play at mottonihongo.com (2019-08-12).

  1. Overview
  2. Background Research
  3. Competitor Analysis
  4. Game Design
  5. Implementation
  6. Networking Utilisation
  7. Critical Review
  8. Conclusion
  9. Reference

1. Overview

Hiragana Karuta is a real-time card game for two players. The game involves a set of 46 cards 2 sided cards; a hiragana letter (Japanese alphabet) on the front and a pattern on the back, which is displayed when the card is not played.

During each round, 12 cards are randomly generated for players to select. 1 card is the ‘reading card’ which players are required to find from the rest of the pack. When a player selects the correct reading card, they receive 20 points. If a player grabs any other card, their opponent is awarded 10 points.

I conducted competitor analysis to investigate the elements required for an efficient design. Some of the findings were applied to the conceptual design such as screen map and framework for the game.

I developed the game with HTML/CSS, vanilla JavaScript and socket.io. I was planning to develop the game with Phaser 3 but changed to JavaScript when I realised that the amount of time required to learn two new languages was unrealistic.

I developed the game without networking at first to enable a clear interaction between server and clients. Once the game was fully developed for single players, I then applied networking parts. Implementation process may seem inefficient; however, it helped me to picture where network interactions are required.

The game works as described above but with a vulnerability, most likely caused by the inefficient network design that relates to each player’s connection and disconnection to the game. Currently, players who are waiting are required to refresh their browser each time another player has logged out. To play game, type in node server.js to command prompt.

2. Background Research

About Karuta

Karuta is a popular card game in Japan. It was originally introduced by Portuguese in mid-16th century (Francisco, 2014). There are two types of Karuta which are:

  • Uta Garuta
  • Iroha Karuta

Uta Garuta involves Japanese poems while Iroha Karuta involves Iroha, the old name for Hiragana. The game I developed is based on Iroha Karuta as I believe it is easier for non-Japanese speakers to play.

How to play

Karuta requires a minimum of three people; one reader and two players, and two sets of decks called reading cards and grabbing cards. The game runs as follows;

  1. Place the reading deck face down to the floor
  2. Spread grabbing cards face up on the floor
  3. Reader draws a card from the deck and reads it
  4. Players have to grab a matching card from the spread
  5. A player who collects the most cards is the winner

3. Competitor analysis

Pros
-Card design is simple and clear
-Grabbing cards consist of a letter and an image (which name begins with that letter)
Cons
-46 cards in a screen makes the game too difficult for beginners
-Too small to select/grab
-A reading card is not displayed

Hiragana-Karuta

Pros
-Acceptable number of cards
-Displays collected cards: a player’s cards are displayed on left side and enemy on the other side
-Able to play at a player’s pace
-Play guide is available
Cons
-Not designed for multi players (can play with AI)
-A reading card is not displayed

Pros
-Simple and clear card design
-Displays collected cards
-Visible cursor design
Cons
A reading card is not displayed

4. Game Design

Conceptual design 1: Screen map

Screen map shows my initial idea for my screen map; there are 5 screens; a login, top, game, end and guide. Although, I found it more user friendly to have a user guide, it was excluded from the game due to lack of time. Other elements were scrapped for the same reason such as:

  • input name: creating a user account
  • list of level: having multiple levels (easy, moderate, hard etc.)

I replaced a “display collected cards” feature to simply “display scores” as this was considered visually clearer for each player to better understand their current achievements.

Conceptual design 2: Wireframe

00-wireframe-hiragana-karuta

Wireframe consists of a play area on the left and a display area on the right. There are 9 grabbing cards in the framework (although there will be 12 in the final game) since displaying all 46 cards in Hiragana-Karuta would be too visual. The layout was inspired by Hiragana Japanese as their layout is simple and understandable. None of the web competitor sites display reading cards for Japanese. Since I was designing the game for non-Japanese speakers, I felt that it was vital to display a reading card.

Asset design

I created a set of 46 hiragana cards, a back of card and a pattern for background. Hiragana cards are used for both reading and grabbing. Cards were designed following a concept of simple yet appealing.

The backside of the card was inspired by asa no ha (hemp leaves) from a traditional Japanese pattern called edo komon which I interspersed to resemble a Japanese style tatami mattress. I made the pattern less intricate since detailed colour and patterns can make the game visually distractive.

Selecting audios

The game consists of 4 audios including:

  • BGM: Kashi no Mai (Akino, n.d.)
  • ENTER: Wafu sound logo 1 (Notzan ACT, 2019)
  • CORRECT: Kaasoru idou 1 (Killy, n.d.)
  • WRONG: Kuizu de fuseikai (Killy, n.d.)

All audio files were downloaded from the royalty free site.

BGM and ENTER are wafu (Japanese) music which creates wafu atmosphere. The upbeat BGM also creates exciting and competitive game environment. CORRECT and WRONG are used for the sound effect when grabbing a card.

Storyboard

Top page 'allowed’: Press play game to enter the game page

Top page 'denied’: If there are more than 2 players, 3rd player cannot enter.

Game page 'waiting’:

  • Total scores of previous games are displayed
  • A player sees a waiting message until another player enters
  • Back of cards is displayed until another player enters

Game page 'countdown’: Once another player enters, count down starts

Game page 'started’:

  • When countdown ends, message displays ‘Start!’
  • Players need to grab the matching card. If a player grabs a right card, they get 20 points
  • If a player grabs a wrong card, 10 points are given to the opponent
  • Whatever card is grabbed, next round will start

End page:

  • When the game is over, a result and final score are displayed
  • Press ‘Continue to play’ to play again. Total scores will be carried to the next game.

5. Implementation

Flowchart 1

Flowchart 1 shows the game flow process. Blue squares indicate server-side script, orange squares indicate client-side script, bold bordered square indicates that the process termination and read diamond indicates conditionals.

Once a player enters the game the following two functions occur; the client set ups the user interface and the server checks numbers of players to make decision on allowing them to enter or denying their entry.

When a player enters the game-page, the server acknowledges their entrance and checks how many players have entered the site. If only one player has entered the game, the client then displays a “waiting” message until they are joined by another. Once two players have entered the client begins a 3 second count down to the game.

Client displays a ‘start’ message after counting down while the server is getting ready to play, generating random numbers. The selected numbers are passed to client to generate cards. A timer for each round of the game is also begins at the same time.

Once a player grabs a card the client checks if the grabbed card is correct or incorrect. Each player gains 20 points if the card is correct. If the card is wrong, the opponent receives 10 points. The data of the grabbed card (correct or incorrect) is sent to the server which updates the opponent’s scores. Server regenerates new random numbers for the next turn until the timer for each round end. Currently, the timer is set to 30 seconds for testing; it should be longer for actual play.

Flowchart 2 shows inner process for the end of round. This is the end of one round of the game and client displays default card (design of back card), change message from ‘start’ to ‘end’, and show top-page where displays result of the game (win, lose or draw) and scores that a player gained. A player can continue to play by pressing a continue button.

6. Network Utilisation

Diagram 1

Diagram 1 shows client and server communications when multiple players connected to the game. Only first and second players are allowed to enter the game.

Diagram 2

Diagram 2 shows client and server communications when one player has entered the game. Interaction between client and server only occurs for players who have entered the game.

Diagram 3

Diagram 3 shows how interactions occur when both players are entered to the game. p0 and p1 send data to server individually. Server sends back entry states to clients. Clients then ask server to generate 12 numbers to get ready for a round. The server sends data back to clients and sets a timer for each round. The diagram indicates that there is possibility to eliminate couple process; it might be possible for the server to generate 12 numbers when both players have entered the game.

Diagram 4

Diagram 4 shows the interactions that occur when a player grabs a card. When a server receives data about the grabbed card, another player will receive that data to update scores. The server also generates 12 random numbers for the next turn and send them to both players.

Diagram 5

When the timer has run down, the server sends data to both clients to end each game round.

Diagram 6

If one player enters the next round, the server sends back entry states.

Diagram 7

Diagram 7 shows what happens when a player disconnects from the app. I did not fully develop all events for disconnection. Ideally, players who are denied access to the game (see diagram 1 page 15) should be allowed to enter the game to enable the entered player to keep playing the game. Currently, all denied players are required to refresh the browser in order to gain access to the game.

7. Critical Review

Hiragana Karuta is an easy and competitive game to learn and play. As the game is simple enough to understand players can enjoy the game straight away. The game consists of three sections; entrance (top-page), play area and display area (both on game-page), each of them deals with distinct elements which makes it easier for players to learn the game. Displaying an opponent’s scores and results at the end of the game creates competitiveness which encourages other players to continue to play. I believe the minimal Japanese style design also helps to make the game enjoyable to play.

Whilst the game consists of positive elements, some areas require further improvement. Firstly, the game lacks user guide; even though, game is easy enough to learn quickly, it is more user friendly to have user guide (Nielsen, 2012). Currently, players who are connected but not allowed to enter the game are not automatically invited to the entry when player is disconnected. This problem is related to networking element with connection and disconnection. The game would benefit from use of external storage to keep their username and their total scores. Some people might find it difficult to play due to playing with unfamiliar letters. It can be solved by creating some different levels such as:

  • beginners: only display 2 grabbing cards
  • elementary: display 4 grabbing cards
  • intermediate: display 9 grabbing cards
  • advanced: display 12 grabbing cards

8. Conclusion

The game still requires further improvements, especially with the networking architecture. It was challenging for me to set up the developing environment and the interactions between server and client; I had to develop the game without it to understand where networking was required. However, I believe the game has good working basic features and a good UI for players to enjoy the game.  

9. Reference

Posted by Aiko Ohakoda