domain-destroyer

    0.2.0 • Public • Published

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

    2. 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;

    Install

    npm i domain-destroyer

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    197 kB

    Total Files

    65

    Last publish

    Collaborators

    • j-puls