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.
- 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
chunit (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: autoproperty 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-allproperty, 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
dataattributes to the span to keep track of which word is being clicked and highlighted.
What should I build next? Know any other games with terminal screens like these? Let me know! 👇👇👇