j-puls/domain-destroyer

A modern spin-off of the timeless Desktop Destroyer game developed by Miroslav Němeček

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

---

## Installation

npm i domain-destroyer

or

clone the repository and compile the TypeScript yourself with

npm run build

---

## Setup

• Import the Destroyer constructor

import Destroyer from "domain-destroyer";

• Import the included CSS file

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

---

## 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

---

## Usage

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;