What I built
npm package and its accompanying React demo application.
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
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!
Link to Source Code
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
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.
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!
Top comments (6)
Amazing!! Honestly the added spatial audio is amazing! 😁
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!
Really nice! How did you manage to pull it off?
It actually ended up being a very simple solution.
Howlerincludes built-in spatial audio features (for both 2D and 3D). For basic 2D which is obviously what this project uses, when instantiating the
Howlobject, there is an optional parameter
stereothat 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
stereoproperty, and you get basic 2D spatial audio!
I might actually write up a quick post explaining the code behind it...
Oh nice! Good to know, thank you :)
I made a more detailed post on the subject if you would like to learn more 😎