Keyracer is a multiplayer typing game that displays player and leader progress in real-time. It uses HTML5 canvas, JavaScript, Firebase, and the Skeleton CSS framework. The game was created to learn touch typing and provide an easy way for players to compete. The server on Firebase stores leader data and text that is pushed to clients. Clients get name, text, and draw a grid to display typing progress. Firebase updates clients when the leader changes. Future improvements include randomizing text each session and adding leaderboards, WPM tracking, and user accounts.

1. Keyracer
Demo: https://vivid-heat-4757.firebaseapp.com/
Github: https://github.com/enitiz/keyracer
Saurabh Mandaokar | smandaok@buffalo.edu

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… :}

4. DEMO
https://vivid-heat-4757.firebaseapp.com/

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.

7. Thanks