Domain-destroyer NPM

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

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

Save your desired parent container to a variable

const myParent = document.querySelector("#myParent");

Create an instance of the Destroyer object, passing it the parent and options arguments
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;