Fallout hacking minigame in JS

#showdev #javascript #css #sideprojects

Here is a follow-up of my completely pointless but incredibly fun side-project to create a retro CRT screen in JS and CSS.

This time I decided to build the hacking minigame from the Fallout game series, which was also the inspiration to start this project in the first place.

Check the full Sandbox for a bigger screen.

The goal of the game is to find the password that is hidden in this garbled mess of characters. You can click a word or move with the arrow keys and use the enter key to confirm. Incorrect guesses will result in a hint indicating how many letters the password has in common with your guess.

Some of the stuff I've learned

Hexadecimal numbers (0xffff) can be used as regular numbers in JS, so you can easily add and subtract them. Seems obvious, just never thought about it.
The CSS ch unit (width of one character) combined with a monospace font is super useful for building these kind of text based interfaces, where I want to have a maximum of exactly 80 characters on every line.
CSS columns is something I rarely use, but works perfectly here. The column-fill: auto property was crucial for filling columns one by one, instead of in a balanced manner.
To word-break the passwords and highlight them over multiple lines, I first tried putting a password in a single span with the word-break: break-all property, but later switched to one <span> per character, since that makes the whole thing easier to control using JS and also easier to position. I then assign some data attributes to the span to keep track of which word is being clicked and highlighted.

Any cool ideas?

What should I build next? Know any other games with terminal screens like these? Let me know! 👇👇👇

Top comments (4)

Vivian T. • Jun 26 '20

This is amazing, Edwin! I loved the hacking mini game from Fallout :D Congratulations!

Chris • Aug 13 '21

Yoo this is really cool! I wanted to ask some questions about this in private if you would be willing to I'm a little newer to JavaScript. I wanted to make something similar that is solely text based and I had a bit of trouble trying to reverse engineer what you did. If you wouldn't mind it would be awesome if you could shoot a reply back!