DEV Community

loading...
Cover image for How to Destroy a Web Page - (Digital Ocean Hackathon Blog: Part 3 - Finale)

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

jpuls profile image Jeff Puls ・3 min read

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

screenshot 1

screenshot 2

screenshot 3

screenshot 4

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!

Discussion (6)

pic
Editor guide
Collapse
szhabolcs profile image
Nagy Szabolcs

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

Collapse
jpuls profile image
Jeff Puls Author

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!

Collapse
szhabolcs profile image
Nagy Szabolcs

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

Thread Thread
jpuls profile image
Jeff Puls Author

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...

Thread Thread
szhabolcs profile image
Nagy Szabolcs

Oh nice! Good to know, thank you :)

Thread Thread
jpuls profile image
Jeff Puls Author

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