DEV Community

loading...
Cover image for Fallout hacking minigame in JS

Fallout hacking minigame in JS

ekeijl profile image Edwin ・2 min read

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! 👇👇👇

Discussion

pic
Editor guide
Collapse
yukimochii profile image
Vivian T.

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

Collapse
kosich profile image
Kostia Palchyk

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

Collapse
ben profile image
Ben Halpern

This is really cool