Submit your best music themed repls!

← Back to all posts
Synthrogue πŸ€–βŒ¨πŸŽΆπŸ₯ - Program a robot to escape using a sequencer
antonmata (21)

Synthrogue πŸ€–βŒ¨πŸŽΆπŸ₯

Program a robot to escape using a sequencer

Play the game πŸš€

β›‘ If you are having issues running the game, you can also use this link as an alternative: mirror link

Gameplay video πŸ“Ό

What is it?

Synthrogue is a game where you indirectly control a robot by programming its moves in advance via a step sequencer.

Program the robot's moves to get the key and then find the exit to escape a level.

The challenge is to escape the levels, but have fun with the sequencer to find cool melodies that go well with the beats played by the accompanying drum machine in the background.

If you are a musician, you can think of this as a programmable toy synth with a game visualizer 😁.

Get Started

Just press [ play ] to hear the beat and start adding notes! 😎

How to play

  • Use the step sequencer grid at the bottom of the page to place notes.
  • The arrows on the leftmost part of the sequencer pertains to the direction you want the robot to go.
  • Click [ play ] to start (and stop) the sequencer.
  • You can still place and remove notes while the sequencer is playing.
  • Guide the robot to get the key first before going to the exit.
  • The game's display (The grid with lots of dots), is a top-down view of a room (very similar to classic roguelikes).
  • The 3 enemy types (Zombies, Skeletons, Vampires) move in different speeds and have varying sight ranges. If your robot is within their sight range, they will try to chase your robot.
  • When the robot touches any enemy, the game ends.
  • My suggestion is to stop the sequencer if your robot is in any imminent danger. There are no limits to doing this.
  • Details about the game's display characters can be found in the game's splash screen.
  • Every level has a specific drum pattern (and tempo) played by the drum machine in the background.

Legend

Visual Components

Display

Level 2 pictured above

Sequencer

Hint: The sequencer pictured above is a possible solution to level 1 πŸ˜‰

Inspiration

The game was insipired by the minimalistic aesthetics of roguelikes and music trackers. The terminal-like UI was based on the visual programming language Orca.

The indirect gameplay is reminiscent of games from Zachtronics (ie. TIS-100, EXAPUNKS, etc.) wherein planning and writing instructions is a huge gameplay component.

The sleek tutorial websites from Ableton also provided tons of inspiration (learningmusic, learningsynths).

Implementation Notes

  • Tested in both Chrome 75 and Firefox 68 (I recommend you use Chrome)
  • The game was designed for desktop browsers.
  • Developed using React and Tone.js.
  • Drum samples are from TriSamples' free 808 sample packs (1, 2).

Hack your own drum patterns and levels

Fork the project and start hacking!

Drum patterns are found in src/logic/patterns.js. There are 4 samples available: kick, clap, closed hi-hat, open hi-hat. Patterns are in 16th notes. Just make sure to add your new patterns to the export default { ... } object at the very bottom of the file.

To use your new patterns and also create new levels, you can edit src/logic/levels.js. Just follow the same style as how the other levels are created. Just also make sure to add your new levels to the export default [ ... ] list at the very bottom of the file.

The characters used in building the levels are the same as the Legend listing above, however, the exit character is x.

What's next?

I had fun writing the game and having a concrete target certainly focused me to finish it. But I did scope out a couple of features due to lack of time.

I have plans of improving on this prototype/jam version.

Please, feel free to provide feedback.

Hand made with ❀ by anton

Commentshotnewtop
snowboardsheep (8)

This is really cool, much better than mine! (https://repl.it/talk/challenge/Repl-Hero-a-fun-music-arcade-game/16400) Wish I could upvote!

hayaodeh (153)

OMG 😡😡so cool, got my upvote

abc3354 (111)

This game is cool !
I love that the beat changes each level

A little feedback (I played the two first levels) : The robot is a little far from the exit, you can maybe add a clickdown + hover feature to fill many squares

antonmata (21)

@abc3354 Thank you! I'm glad that you enjoyed it.

Yeah, the sequencer can use a number of quality of life updates. I'll work on your suggestion.

vvc (61)

@antonmata cool i think this design is similar to @ggzor 's scenemachine

rediar (101)

How does th8s work?

antonmata (21)

@rediar I suggest playing it on a new tab. The embedded repl cuts off the step sequencer.

Use the step sequencer (the grid) to place in "notes". The arrows on the left pertains to the direction you want the robot to go.

Click [ play ] to start the sequencer. You can still add notes while it is playing.

Additional instructions are on the splash screen (or click [ ? ]). Click anywhere on the splash screen to dismiss it.