win-destroyer-ts
Version:
A modern recreation of the timeless Desktop Destroyer game developed by Ing. Miroslav Nemecek, written in TypeScript.
146 lines (103 loc) • 6.57 kB
Markdown
# domain-destroyer
A modern recreation of the timeless Desktop Destroyer game developed by Miroslav Němeček, written in TypeScript for the web.
## Controls
| 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** |
<hr/>
## Installation
```bash
npm i domain-destroyer
```
or
[clone the repository](https://github.com/J-Puls/domain-destroyer.git) and compile the TypeScript yourself with
```bash
npm run build
```
<hr/>
## Setup
- Import the `Destroyer` constructor
```javascript
import Destroyer from "domain-destroyer";
```
- Import the included CSS file
```javascript
import "domain-destroyer/dist/css/destroyer.min.css";
```
<hr/>
## API
The **`Destroyer`** constructor takes two arguments:
- **`parent`**: `HTMLDivElement` - the element to act as the bounding container for the game contents
- **`options`**: `object` - optional parameters for controlling different aspects of the game upon instantiation
- **`defaultVolume`**: `number (0 - 1)` - the initial volume
- **`onDamage`**: `(pageHealth) => {}` - a callback function that will be called when a weapon _"inflicts damage"_ to the page
- **`pageHealth`**: `number` - the total amount of _"health"_ the page has (this is decremented every time a weapon fires)
- **`particleLimit`**: `number` - the maximum number of particles allowed to exist at one time (only effects the animation phase of rendering, not how many particles are persisted on screen)
- **`volumeChangeDelta`**: `number (0 - 1)` - how much the volume is incremented / decremented when calling `volumeUp()` or `volumeDown()`
- **`zIndexStart`**: `number` - the z-index at which game elements should begin layering
Once instantiated, you will have access to the following noteworthy properties and methods:
| property | description |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`clear()`** | clears all currently rendered particles |
| **`currentWeaponID`** | the numeric ID for the current weapon in use |
| **`fire()`** | triggers the weapon to fire a single shot |
| **`inject()`** | injects the visible contents of the game into the parent element |
| **`isFiring`** | boolean relating to the current state of the weapon |
| **`mousePos`** | tracks the x / y coordinates of the mouse within the viewport |
| **`particleLimit`** | the number of particle animators allowed to exist at one time (for animation performance only, does not limit how many particles are persisted on the screen) |
| **`setVolume()`** | explicitly sets a certain volume level (from 0 to 1) |
| **`setWeapon()`** | explicitly sets the weapon by its numeric ID |
| **`updateCSS()`** | updates the CSS variables pertaining to the current weapon |
| **`volume`** | the volume level (from 0 to 1) |
| **`volumeDown()`** | lowers the volume by .1 until min volume is reached |
| **`volumeUp()`** | raises the volume by .1 until max volume is reached |
| **`weaponDown()`** | sets the current weapon to the previous in the list |
| **`weaponUp()`** | sets the current weapon to the next in the list |
<hr/>
## Usage
1. Save your desired parent container to a variable
```javascript
const myParent = document.querySelector("#myParent");
```
2. Create an instance of the `Destroyer` object, passing it the `parent` and `options` arguments
3. Inject the `Destroyer` game components into your selected parent container using the `inject()` method
```javascript
const options = { particleLimit: 20, zIndexStart: 5 };
const myDestroyer = new Destroyer(myParent, options);
myDestroyer.inject();
```
### Example
Below is an example of how to use domain-destroyer in a **`React`** component.
```javascript
import React, { useEffect, useState } from "react";
import Destroyer from "domain-destroyer";
import "domain-destroyer/dist/css/destroyer.min.css";
const App = () => {
let myParent;
const [destroyer, setDestroyer] = useState(null);
const options = {
defaultVolume: 0.5,
particleLimit: 20,
zIndexStart: 5,
onDamage: (pageHealth) => console.log(pageHealth),
pageHealth: 200,
volumeChangeDelta: 0.5,
};
useEffect(() => {
myParent && setDestroyer(new Destroyer(myParent, options));
}, [myParent]);
useEffect(() => {
destroyer && destroyer.inject();
}, [destroyer]);
return <div className="myParent" ref={(el) => (myParent = el)} />;
};
export default App;
```