A Boring Browser Game

Overview

This is a very basic react-based browser game built with React and powered by Next.js to make use of Supabase, a Postgres cloud service for backend/database. While this post focuses on the game's implementation and logic, saving scores to the database via Supabase is covered in a separate post.

Flow

When a user opens the game and presses "Start," the gameplay begins. A countdown timer is set to 10 seconds and decreases by 1 every second. The player's goal is to extend the game by clicking a button, which adds 1 second to the timer with each click.

To prevent continuous clicking, special events occur randomly during gameplay. These events reduce the remaining time, either through division or subtraction, and add a layer of challenge.

The game ends when the timer hits 0. At that point, the player's score (i.e., total number of clicks and total game duration) is saved to a Postgres database via Supabase.

Implementation

The game is implemented in a single Next.js component, leveraging React hooks such as useState, useEffect, and useCallback for managing state, side effects, and performance optimizations. For styling, I’ve used shadcn/ui.

Deployment

The project is deployed on Vercel, taking advantage of its seamless integration with Next.js and is available at game.bimals.net

Future Ideas

While this isn't intended to be a large-scale project, there are a few features I plan to add. The first is user identification, which could be handled using a unique identifier stored in local storage. I want to add a username with the user identification so it would allow for the creation of a leaderboard to track high scores in the future.

Related Post/s

Using Supabase to power a React-based browser game