Red Market: The Final Release.. Can You Survive the Crash?

After days of drafting, coding, and refining based on feedback, the final version of my interactive narrative game, Red Market, is ready.

⚠️ A Note Before You Play

In some parts of the game, you will notice there is only one choice available. This is intentional. I wanted the simulation to be realistic. In a perfect world, you would always choose the “best” scenario to save your money. But in my real experience back then, I didn’t have that option. I found myself losing money due to external circumstances without even having the chance to stop it. I wanted you to feel that same lack of control.

From Draft to Final Product: How It Evolved

If you read my previous blog post, you know that this game started as a simple idea based on my real-life financial loss in 2020. The first draft was purely text-based and dry.

Based on user testing and feedback from my professor, I made significant changes to increase the emotional impact and realism:

  • Visual Storytelling: Feedback suggested the game needed more “atmosphere.” I added dynamic cartoon illustrations that change based on the scenario. The “Happy Graph” scene feels genuinely hopeful, while the “Game Over” screen uses deep reds and glitch effects to convey panic.
  • “Forced” Scenarios: In the first draft, losing money was always a choice. I realized this wasn’t realistic. Life happens. I added “Forced Events” (like a broken laptop or a family emergency) where the player must spend cash. This forces you to liquidate your crypto at bad times, mirroring real-life financial pressure.
  • Animations & “Juice”: To make the wins feel bigger and the losses hurt more, I added screen shake effects during panic moments and a confetti celebration for the winning ending.

What I Would Do Differently (If I Had More Time)

While I am proud of the result, no software is ever truly finished. If I had another month, I would implement:

  1. A Global Leaderboard: Currently, the game tracks data silently via Netlify Forms (which I developed using HTML form). I would love to build a public scoreboard so players can compare their “Final Portfolio” values with other players’. (the data that will be collected is “Cash on Hand” | “Crypto Wallet” | “Stress Level”) 
    Data Collected

    This is the only data collected [anonymous]

  2. Dynamic Sound Design: Right now, there is a background track. I would have liked to add specific sound effects like a “cha-cha” sound for profits and a jarring alarm noise for the market crash scenarios.
  3. Accessibility Toggle: While I designed several text and images, adding a read mode or a web-reader toggle for users who are visually impaired would improve accessibility.

What I Learned

This project was a crash course in full-stack thinking. I learned how to manage Game State in JavaScript (tracking cash vs. crypto separately) and how to use CSS Animations to convey emotion without words.

Crucially, I spent a lot of time discovering features about Netlify Forms. As a Data Science student, I found that understanding how to collect user data without a traditional database was insightful. I learned to bridge the gap between a frontend game and backend data collection, which is good for my future career.

I also learned the power of AI Collaboration. I used both Gemini and ChatGPT and they acted like having a “Senior Developer” sitting next to me, delivering the product as good as I want it.

References & Credits

  • Content Source: The narrative is based on my personal experience trading during the 2020 market cycle and the 2022 geopolitical market crash.
  • Images: All scenario images were generated using AI (prompts designed by me) specifically for this project. They are unique assets created for Red Market.
  • Audio: Theme audio is copyright-free from chosic.com link
  • Accessibility Note: I utilized a “Dark Mode” aesthetic (Light Gray Text on Dark Navy Background). According to standard Color Contrast Checkers, this provides a high contrast ratio suitable for readability, reducing eye strain compared to stark white backgrounds.
  • Code Assistance: HTML structure and JS logic made with assistance from LLMs (Gemini/ChatGPT).