Repacaged From Scratch

Inspiration

Strudel Sarah Davis Ted Talk Sarah Davis on X

Live-coding music? Why not not live-code games as well?!

What it does

It's a re-imagination of pac-man with a scratch-like interface, where the user live-codes to control their player. Enemies chase them and try to eliminate them, like in the classic pac-man. The player tries to get all keys while avoiding elimination to progress to the next level. Power-ups are available for the player to use to their advantage.

How I built it

• I started with the game arena using pixi.js for the graphics
• I wrote the code for the players, enemies, keys and power-ups
• I also made the game assets
• Then I wrote the spec for the DSL to control the game
• Then I wrote the interpreter for the DSL
• Then I linked it to the game arena
• I made use of a lot of state management features from a custom UI framework I built

Challenges I ran into

• Making time to do the project was the first challenge. I started about 12 days to the deadline, and I'm currently in the middle of a master's programme. Got a little burned out, especially in the last 3 days, but all in all, I must say that I don't regret it for even a second!
• At first, I wanted to let the user write JavaScript in a CodeMirror editor and call it a day, but that came with a lot of security concerns and a lot less control over what the user could do with the language, hence the DSL
• I didn't want to write a tokenizer and parser, hence the Scratch-like interface

Accomplishments that I'm proud of

• I like how I handled balancing the things I had to do with the project, even though there is some room for improvement
• I'm proud of the interpreter
• I'm also proud of the way the game itself turned out
• I'm proud of UI as well

What I learned

• I've gained a bit more insight on how to handle such projects, especially under pressure
• Building a Scratch-like interface with keyboard controls is more tasking that I initially thought
• I learned a lot about how interpreters work

What's next for Repacaged From Scratch

• Open source it
• Add a leaderboard
• Make it available as a gaming/learning platform

Built With

• bolt
• lit
• netlify
• pixijs
• promethiumjs
• shoelace
• tinykeys