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
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!
Top comments (6)
Amazing!! Honestly the added spatial audio is amazing! π
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!
Really nice! How did you manage to pull it off?
It actually ended up being a very simple solution.
So
Howlerincludes built-in spatial audio features (for both 2D and 3D). For basic 2D which is obviously what this project uses, when instantiating theHowlobject, there is an optional parameterstereothat 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
Howlobject'sstereoproperty, 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 π