Simon

Simon is a pattern-matching game where the player must remember an increasingly long series of inputs. The game features low-latency sound effects and a leaderboard.

Tech Stack

• SvelteKit
• SQLite
• Drizzle
• Tailwind
• Docker

State Management

The app uses Svelte’s state management tools to track the user’s actions and produce effects such as changing the appearance of the buttons and producing sound effects. The game logic also interacts with the UI via Svelte.

Data Persistence

The leaderboard requires some read and write operations, and I decided to use an embedded database to simplify deployment and maintenance of the app. The app uses cookies to persist the user’s name and high score in their browser. The database and cookie operations are accessed through a set of API endpoints.

Design & Testing

For the aesthetic of the app, I wanted to create something that was similar to the original simon game, but put my own spin on it. I changed the shapes and colors of the buttons, but kept a skeuomorphic style to give it a tactile feeling. Through user testing, I discovered and fixed some bugs in the game logic. I also found that people were accidentally zooming the page a lot, so I disabled zooming to improve the feel of the app.

Audio

After adding sound effects to the game, I noticed they were very laggy. I did some research and found that the Web Audio API is a good choice for high-performance audio in web apps. I used Copilot in VSCode to help me implement the sound effects with the Web Audio API, and the resulting audio experience is very low-latency.