2. About Keyracer
A multiplayer typing game.
Display your progress vs the leader in real time.
Minimal.
Technologies used:
HTML5 (Canvas and JS)
Firebase
Skeleton CSS Framework
3. Motivation
Learning touch typing myself.
Easy to join and compete.
Quick turnaround.
Firebase was also a huge factor.
Touching web development after a while… :}
5. How does it work?
At Server - Firebase Database:
Stores information about the leader in the race. When this gets updated, the new information
pushed to every client.
Also stores the text used for typing for now.
At Client - HTML5 & JS:
When player’s page is loaded, get name from user. Now get text from server and draw a grid in
canvas.
As the player types, update his position on grid. As firebase pushes information about leader - If
someone else is leading, also display his position in canvas. Otherwise let Firebase know that
you are leading.
6. Things to add and improve..
Random text at each new session (Scrape / API / Database)
Leaderboard.
Words per minute.
User accounts.