1.0.0 • Published 5 years ago

ocean-clip-doll v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

ocean-clip-doll

Travis npm version npm downloads JavaScript Style Guide

The command line app for ocean-clip-doll

Installation

$ npm i ocean-clip-doll

Features

  • sample demo for caught gift game
  • 简易版的demo,爪子横移,点击时停止移动,并向下抓取底部礼物,抓取成功可调用回调函数

Browser Support

Modern browsers and Internet Explorer 10+.

IE / EdgeFirefoxChromeSafariiOS SafariSamsungOpera
IE10, IE11, Edgelast 10 versionslast 10 versionslast 10 versionslast 5 versionslast 10 versionslast 10 versions

Notice

little bug, if you resize the screen, you must call restart method and then call init method to reset game, otherwise it will use before resize data to judge

Usage

$ ocean-clip-doll

  var clipDoll = new ClipDoll({
    giftSelector: ".gift-item", ## gift class
    pawWrapperSelector: ".game-paw-wrapper", ## paw content selector
    pawRopeSelector: ".game-paw-rope", ## paw rope selector
    downActiveClass: "down", ## paw rotate active class
    judegRange: 40, ## the judging distance between each gift center position
    buttonSelector: "", ## start paw down
    successCallback: function() {
      alert("xixi");
    } ## catch gift callback
  });
  ## restart button
  document.querySelector(".restart").addEventListener("click", function(e) {
    clipDoll.restart(function() {
      alert("restart");
    });
    e.stopPropagation();
    e.cancelBubble = true;
  });
  ## resize events
  window.addEventListener("resize", function() {
    setTimeout(function() {
      clipDoll.restart();
      clipDoll.init();
    }, 100);
  });