Forum Discussion

Jonathan_Hill's avatar
Jonathan_Hill
Super Hero
2 months ago

Using Javascript to run complex mathematical simulations in a 'space survival' game

As a learning designer, I'm always looking for new ways to engage learners and create immersive experiences. I'm a big fan of board games like Catan and 7 Wonders, where you have to manage resources and make strategic decisions. It struck me that similar game mechanics could make corporate e-learning more compelling and realistic and help people refine their decision-making skills.

I started experimenting with this waaaay back in E-Learning Heroes Challenge #314, with my Usable Suspects game:

In that game, the player has to pick the best gang member to crack a safe within 20 seconds.

Fast forward to E-Learning Heroes Challenge #430, and I took this 'resource management' concept much further in No Sushi!:

This game involved a lot of complex math that nearly broke Storyline and me. (Yes, I did it all with triggers and, no, I wouldn't do that again!)

Recently, I've discovered that large language models are great at writing code - it's just another language after all - which makes it astonishingly easy to write  custom Javascript for use in Storyline. No more triggers! No more headaches!

With the help of Claude.ai, I built this 'space survival' game:

PLAY SURVIVAL HERE!

The Concept

The game is a first-person survival scenario set on a remote planet. Players must choose two out of three specialists, each with unique skills, to awaken from cryosleep and keep everyone alive for 90 days until rescue arrives. The challenge? Managing four critical resources: Food, Shelter, Security, and Communications.

Collaborating with Claude

To create the game's underlying simulation, I explained my idea to Claude, outlined what I wanted the code to do, and then defined the specific outcomes I was seeking in Storyline.

The Development Process

  1. Establishing the Basics: We started by defining the core mechanics – how resources would deplete over time and how each specialist would influence these rates.
  2. Creating the Simulation: Claude generated JavaScript code that would run within Storyline, simulating the daily resource changes and determining the mission's outcome.
  3. Balancing Act: One of our biggest challenges was fine-tuning the resource depletion rates to ensure each team combination (A+B, A+C, B+C) presented unique challenges and outcomes. This required multiple iterations and careful adjustments.
  4. Implementing Cascading Effects: We introduced more complex mechanics, such as security breaches leading to rapid resource loss, and the effects of malnutrition on the crew's ability to maintain systems.
  5. Crafting Narratives: For each possible outcome, we developed detailed feedback messages to provide players with a clear understanding of their mission's fate.
  6. Debugging and Refinement: Throughout the process, we encountered and solved various issues, from unexpected behaviour in certain scenarios to ensuring the correct triggers for different endings.
All of the variables you see on screen are dynamically adjusted using Javascript, based on the strengths and weaknesses of your chosen team. The simulation runs at rate of 1 day / 0.4 secs.

Lessons Learned

  1. Iterative Development is Key: Our back-and-forth process, constantly testing and refining the simulation, was crucial to creating a balanced and engaging game.
  2. Claude as a Collaborative Tool: Claude proved helpful in rapidly prototyping ideas, generating code, and problem-solving. However, human oversight and creative direction were essential in shaping the final product.
  3. Balancing Realism and Gameplay: We often had to strike a balance between realistic outcomes and maintaining engaging gameplay. For instance, we adjusted how quickly resources depleted to create tension without making the game overly difficult.
  4. The Importance of Narrative: While the underlying mechanics were crucial, we found that crafting compelling narratives for each outcome enhanced the player experience. The characters define the mechanic and vice versa.
  5. Flexibility in Design: Being open to unexpected outcomes led to more interesting gameplay. For example, we implemented a system where the communication beacon could continue functioning even after the crew had perished, adding a thoughtful touch to certain failure scenarios.

Technical Challenges and Solutions

One particular challenge we faced was ensuring that for certain team combinations (like A+B), security would fail before other resources reached critical levels. This required careful adjustment of depletion rates and the implementation of conditional penalties.

We also had to be mindful of some limitations, particularly how Storyline displays text generated by variables. This led to problem-solving sessions, where Claude and I used the console log to dig into what was happening.  

PRO TIP

Use shapes rather than text boxes if you're trying to display variables without formatting errors.

Conclusion

While collaborating with Claude felt very natural, we did at times have to go back a few steps to debug the code. I am not a coder, so I don't know whether 12 iterations to get this to work as I liked is unreasonable by human standards.

But I'm really pleased with the results. SURVIVAL teaches resource management and strategic thinking while also telling a story of survival against the odds. And it conveys this lesson in just two slides and a few minutes of your time.

I haven't shared my master file as I'm still tinkering with the visual design and this will likely become a portfolio piece, but I'm happy to share what I've learned and answer any questions you may have. 

For anyone interested, here's the latest version of the code that powers the simulation. If you want to know more about any part of this demo, please ask.



(A copy of this article also appears here, in the 'Javascript' group.)

  • This is inspiring Jon! And the game is amazing! Appreciate you sharing your experience with the lessons learned and how many iterations it took.