A modern recreation of the timeless Desktop Destroyer game developed by Miroslav Němeček, written in TypeScript for the web.

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:

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();

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;