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 |

npm i domain-destroyer

or

clone the repository and compile the TypeScript yourself with

npm run build

• Import the Destroyer constructor

import Destroyer from "domain-destroyer";

• Import the included CSS file

import "domain-destroyer/dist/css/destroyer.min.css";

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 |

1. Save your desired parent container to a variable

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

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.

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;