The game is an infinite runner type, the mechanics of which is based on the once popular game Flappy Bird. There is no set goal, other than to earn as many points as you can by evading the obstacles.
The standout feature of this project is the weather API implementation that dynamically changes the background of the game, making it an obstacle itself.
The rules of the game are simple: evade the obstacle and earn points doing so.
The underlying rendering framework is the canvas-based p5.js. It is an easy-to-use library that provides hardware accelerated graphics, an update loop and input handling.
For the backend server I use Heroku and the client-server connection is handled by Express.js framework.
To make the experience more user-friendly I implemented sessions (an Express.js module) to retain the user data between reloads and reconnections.
The other function of the server is to fetch weather using an OpenWeather API.
Most APIs have a limited number of calls, so the way I account for that is a server-side weather buffer array. When a client requests weather data from a new geolocation, the server fetches and puts it into the buffer. On a subsequent request, any client with the same geolocation is going to instantly get the weather forecast without an unnecessary API call.
As for the database, I use MongoDB. It has its own Node module which makes it simple to use. I structured the database to be split in two collections: one for login info and another for all other user data like score and site theme
Overall, I use 6 APIs, but they perform only three distinct tasks, with one backup solution per each, in the following order:
- Determine the client’s IP address
- Determine the geolocation, assigned to that IP address
- Make a request to the weather service API to get a 7-day forecast.
APIs list:
- IP: Cloudflare (Backup: ipify)
- Geolocation: ip-api (Backup: Techniknews)
- Weather service: OpenWeather (Backup: 7timer)
After downloading the repository run the node install command in the root directory.
npm install
In the root directory run the following command:
npm run server
This method will produce a delay (black screen for several seconds) on first page load due to the inner functionality of the
server.js. It tries to connect to an OpenWeather API, however, without the key it switches to a much slower public API.
If you have browser-sync installed, use the following command:
cd client
npx browser-sync start -sw
This method is prefered for quick local runs, however, it completely omits the server and default weather will be loaded from the
settings.js