How to Destroy a Web Page - (Digital Ocean Hackathon Blog: Part 3 - Finale)

What I built

The domain-destroyer npm package and its accompanying React demo application.

Category Submission:

Random Roulette

App Link

https://domain-destroyer-demo-95ini.ondigitalocean.app/

Screenshots

Description

Welcome back to 1995!

As anyone who was into computers throughout the 90s will know, there was one type of software commonplace in every household. Shareware games. There were free-to-play versions of everything from AAA blockbuster titles like the Duke Nukem series and (literal) hidden gems like Crystal Caves, to one-man-band side projects, all available free of charge. One such program that spread like wildfire in this time was Desktop Destroyer (which went by several pseudonyms, depending who you ask and from which region they resided).

And so, I would like to introduce domain-destroyer, a (limited) clone of that iconic program, this time catering to stressed-out web devs who need to blow off some steam. Written in TypeScript, and available for hassle-free inclusion with Node based projects via npm.

In addition to the development of the npm package itself which contains the core game logic, assets, and mechanics, I developed an accompanying demo application utilizing React to showcase the game in all its intended nostalgic glory.

Brandishing 3 of the original 8 (well, 9 if you count the "washing" tool) implements of destruction, use your mouse to mercilessly inflict damage to the web page before you! Personal project got you stressed out? Quickly implement the npm package and smash it to smithereens with the Hammer, blast it to bits with the Machine Gun, or decimate it with the defacing powers of the giant Stamp. You'll feel better in no time, I promise!

Hotkeys:

key	function
mouse	fire weapon
1 key	hammer
2 key	machine gun
3 key	stamp
c key	clear screen
- key	previous weapon
= key	next weapon
; key	volume down
' key	volume up

Link to Source Code

domain-destroyer source code

demo application source code

Permissive License

MIT License

Background

I wanted to build something unique from the sea of TODO List apps and recycled Web Dev Bootcamp blogs that will no doubt be present. In addition, and in light of what an absolute horror-show stress-fest that 2020 was for nearly everyone (myself included), I figured I would take this opportunity to harken back to simpler times, if only for a fleeting moment. What better way I thought, than with a game that lets you literally take out your aggressions, while hitting you with a wave of nostalgia for those rose-tinted glory days at the same time.

How I built it

The core domain-destroyer package was written from scratch in TypeScript, and made publicly available via npm here.

The demo application was created utilizing React and is hosted via the Digital Ocean App Platform. The process of importing the React application via GitHub could not have been more straight-forward.

Additional Resources/Info

I would like to give credit to the developer of the original Desktop Destroyer game, Miroslav Němeček (and any others involved, this being the only name I could find in direct association).

The spatial audio effect was achieved using Howler.

If you love this project, and would like to help improve it (sadly I wasn't able to implement all the weapons/features from the original that I had intended), please feel free to fork the repositories and make it happen!

Comments

[Nagy Szabolcs]

Amazing!! Honestly the added spatial audio is amazing! 😁

[Jeff Puls]

Thanks :)

It was something present in the original application, so I made it a point to find a way to replicate the effect for that extra bit of added authenticity!

[Nagy Szabolcs]

Really nice! How did you manage to pull it off?

[Jeff Puls]

It actually ended up being a very simple solution.

So Howler includes built-in spatial audio features (for both 2D and 3D). For basic 2D which is obviously what this project uses, when instantiating the Howl object, there is an optional parameter stereo that takes a value of -1 to 1 (-1 being full left, 1 being full right) that controls the stereo-channel bias for the sound.

When the weapon fires and generates a particle, this bias value is calculated based on the relative position of the cursor from the center of the viewport (so the left half of the screen gives a value between 0 and -1, the right half gives 0 to 1). Pass this value to the Howl object's stereo property, and you get basic 2D spatial audio!

I might actually write up a quick post explaining the code behind it...

[Nagy Szabolcs]

Oh nice! Good to know, thank you :)

[Jeff Puls]

I made a more detailed post on the subject if you would like to learn more 😎