DEV Community

Cover image for Fallout hacking minigame in JS

Posted on

Fallout hacking minigame in JS

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)

yukimochii profile image
Vivian T.

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

konky profile image

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!

kosich profile image
Kostia Palchyk • Edited

Great work, Edwin! πŸ‘
Very atmospheric look and feel!
I didn't understand how to win in it though... :)

ben profile image
Ben Halpern

This is really cool