node package manager

match

Simplest way to create match memory games.

match.js

Simplest way to create match memory games.

Check out the dist directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it from npm and require it:

$ npm i --save match
(function () {
    var game = new Match(".game", {
        templateElm: ".templates > div"
      , autoremove: false
      , size: {
            x: 4
          , y: 3
        }
      , step: {
            x: 100
          , y: 100
        }
    }, [
        {
            number: "1"
          , name: "One"
        }
      , {
            number: "2"
          , name: "Two"
        }
      , {
            number: "3"
          , name: "Three"
        }
      , {
            number: "4"
          , name: "Four"
        }
      , {
            number: "5"
          , name: "Five"
        }
      , {
            number: "6"
          , name: "Six"
        }
      , {
            number: "7"
          , name: "Seven"
        }
      , {
            number: "8"
          , name: "Eight"
        }
      , {
            number: "9"
          , name: "Nine"
        }
      , {
            number: "10"
          , name: "Ten"
        }
      , {
            number: "11"
          , name: "Eleven"
        }
      , {
            number: "12"
          , name: "Twelve"
        }
      , {
            number: "13"
          , name: "Thirteen"
        }
      , {
            number: "14"
          , name: "Fourteen"
        }
      , {
            number: "15"
          , name: "Fifteen"
        }
      , {
            number: "16"
          , name: "Sixteen"
        }
      , {
            number: "17"
          , name: "Seventeen"
        }
      , {
            number: "18"
          , name: "Eighteen"
        }
    ]);
 
    game.on("render", function (e, d, c) {
        e.children[0].children[0].children[c].remove();
    });
 
    game.on("win", function () {
        setTimeout(function () {
            alert("You won!");
            window.location = "https://github.com/IonicaBizau/match.js";
        }, 1000);
    });
 
    game.on("activate", function (elm) {
 
        elm.children[1].classList.remove("flipInY");
        elm.children[0].classList.remove("flipOutY");
 
        elm.children[0].classList.add("flipInY", "animated");
        elm.children[1].classList.add("flipOutY", "animated");
    });
 
    game.on("deactivate", function (elm) {
 
        elm.children[0].classList.remove("flipInY");
        elm.children[1].classList.remove("flipOutY");
 
        elm.children[1].classList.add("flipInY", "animated");
        elm.children[0].classList.add("flipOutY", "animated");
    });
 
    game.on("success", function (elm1, elm2) {
        setTimeout(function() {
            elm1.classList.add("zoomOut", "animated");
            elm2.classList.add("zoomOut", "animated");
            setTimeout(function() {
                elm1.remove();
                elm2.remove();
            }, 500);
        }, 1000);
    });
 
    var timeEl = document.getElementsByClassName("time")[0];
    game.on("time", function (time) {
        var sec = time / 1000
          , min = Math.floor(sec / 60)
          ;
 
        sec = Math.floor(sec - min * 60);
        sec = (sec < 10 ? "0" : "") + sec;
        min = (min < 10 ? "0" : "") + min;
 
        timeEl.innerHTML = min + ":" + sec;
    });
 
    var pairsCountEl = document.getElementsByClassName("pairs-count")[0];
    game.start();
    game.on("pair-flip", function () {
        pairsCountEl.innerHTML = game.flippedPairs;
    });
})();

Creates a new Match instance.

Events you can listen to:

  • deactivate (HTMLElement): Triggered when the block is deactivated.
  • activate (HTMLElement): Triggered when the block is activated.
  • pair-flip (HTMLElement, HTMLElement): After a pair flip.
  • success (HTMLElement, HTMLElement): When a match is found.
  • win (Number): Emitted when the game is over (the first argument is a number representing the number of miliseconds from the moment the game was started to now).
  • render (currentElement, data, isDuplicate): Emitted on render–the HTML element can be modified which will end in the editing the HTML. The data object is the current data object reference. The isDuplicate parameter takes a value of 0 or 1 (when the match is rendered).
  • time (Number): Like win, but emitted every second, during the game.
  • Element|String elm: The HTML element or the query selector.
  • Object options: An object containing the following fields:
  • autoremove (Boolean): If true, the blocks will be removed when they are matching (default: true).
  • size (Object):
    • x (Number): How many blocks per row (default: 4).
    • y (Number): How many blocks per column (default: 4).
  • classes (Object):
    • active (String): The active class added the active block elements (default: "active").
  • step (Object):
    • x (Number): How much should be increased the x coordinate for each block.
    • y (Number): How much should be increased the y coordinate for each block.
  • Array data: Array of objects used in the templating.
  • Match The Match instance.

Checks if two elements match together.

  • HTMLElement elm1: The first element.
  • HTMLElement elm2: The second element.
  • Boolean true if the elements make a match or false otherwise.

Attaches a new event listener (on("some-event", fn)).

  • Match The Match instance.

Emits an event data data as arguments (emit("some-event", and, data, here)).

  • Match The Match instance.

Shuffles a given array.

  • Array arr: The array to shuffle (default: this.data).
  • Array The shuffled array.

Clears the container HTML.

  • Match The Match instance.

Deactivates the element.

  • HTMLElement elm: The block element.
  • Match The Match instance.

Activates the element.

  • HTMLElement elm: The block element.
  • Match The Match instance.

This is the internal click handler.

  • HTMLElement elm: The block element.
  • Match The Match instance.

Adds the DOM handlers (e.g. click) and internal handlers (e.g. pair-flip).

  • Match The Match instance.

This function when the game is ended.

  • Match The Match instance.

Renders the game UI.

  • Boolean clear: If true, the container will be cleared.
  • Match The Match instance.

Starts the game (renders the UI, starts the timer etc).

  • Match The Match instance.

Have an idea? Found a bug? See how to contribute.

Another way to support the development of my open-source modules is to set up a recurring donation, via Patreon. 🚀

PayPal donations are appreciated too! Each dollar helps.

Thanks! ❤️

If you are using this library in one of your projects, add it in this list. ✨

  • octimatch—A matching game with GitHub's Octicons.

MIT © Ionică Bizău