Introduction

First I want to thank Hashnode for this opportunity, I've never written an article or participated in a hackathon before, so this is my first and i'm excited.

I was practicing to type properly and to increase my typing speed and so while I was getting better at typing at my computer (using the keyboards), I also wanted to be able to type really fast on my mobile device (using my mobile keypads). So I came up with the idea to build a typing game that I can play both on desktop and on mobile devices.

Typo is a simple typing game that not only lets you fun but also helps increase your typing speed. Typo is built with Html, Css and Javascript. The UI for the application was designed using Adobe XD and then the logo was designed using Adobe Illustrator.

How it works

Typo is very easy to play and here is how it works: A set of texts is given as well as a time limit within which the texts should be completely typed. If the player is able to type all of the given texts, a score is given and another set of texts as well as a new time limit is given. As long as the player is able to completely type the given texts, a new set of texts and time limit will always appear until the player is unable to type the given texts before the given time elapses, hence game over.

There are 3 difficulties:

Newbie: 5secs for every 5 letter word,

Master: 3secs for every 5 letter word,

Pro: 2secs for every 5 letter word

So for the word GAMER , it will take 5s for newbie, 3s for master and 2s for pro difficulty. Each letter of the word awards 1 point, so the word GAMER yields 5 score points.

Like other games, the game can be paused, resumed and restarted. Also the time limits have colour indicators to denote the amount of time left; green indicates fairly more time, yellow indicates half the time while red indicates closeness to game over.

Game Logic

As soon as the player starts the game, a random set of texts and a calculated time limit based on the total number of characters in the texts is given and it starts counting down. While typing, the input bar has colour and gesture feature that alerts a user when a wrong input is inserted (the input field displays a red background, shakes and vibrates). If all of the texts inputted by the user matches the given texts exactly, a green background is displayed, a success sound pings, the calculated score is added to the score board at the top of the screen and then a new set of texts as well as a new time limit is served.

The player can choose to halt or quit the game at anytime. When the restart button is clicked, the given time limit is paused and a confirmation modal pops, asking the player to confirm the decision. If the player goes ahead with the decision, the game is restarted and all of the inputs are reset. When the pause button is clicked, again the time is paused and a modal overlays the screen with a resume button and the current score so far. The player must resume the game before taking any other action.

If the time limit elapses and the player is unable to type all of the given texts, the Game Over modal overlays the screen displaying the difficulty selected, the total score accumulated and a Play Again button for player to restart or replay the game.

Future plans for Typo

I intend to make Typo a multiplayer game such that one could create a game league and share game league code to friends to join the tournament. The tournament time will be set by the host. When the set of texts is given, the player who completely types the texts first is awarded the score points for that text round. After the game (after the tournament time is elapsed), the player with the highest score is ranked at the top of the league followed by the next highest and so on.

Wrap Up

I had fun building this application and I learnt a lot building while it too. I faced some challenges like finding an API where I can draw game texts but I ended up hard-coding the texts. If you're reading this and can help improve this application, you are welcome to contribute to the code.

My github link is Narudesigns.

Play Typo here

Thank you for your time ❤️

Snapshots