How to Destroy a Web Page - (Digital Ocean Hackathon Blog: Part 3 - Finale)
Tags: dohackathon, gamedev, javascript, react
Published: 2021-01-02 19:48:45

## 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](https://dev-to-uploads.s3.amazonaws.com/i/ccxxlobpc0m7fvq53hxd.png)

![screenshot 2](https://dev-to-uploads.s3.amazonaws.com/i/7tt1ksq0q6e900fimy4j.png)

![screenshot 3](https://dev-to-uploads.s3.amazonaws.com/i/i2lll0tgutkg2cgkulm5.png)

![screenshot 4](https://dev-to-uploads.s3.amazonaws.com/i/hcinwtapqy1b5e75tipl.png)

### 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](https://github.com/J-Puls/domain-destroyer)

[demo application source code](https://github.com/J-Puls/domain-destroyer-demo)

### 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.](https://www.npmjs.com/package/domain-destroyer)

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.](https://howlerjs.com/)

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!