qmgame/h5/water/game.js

import Waterful from "./waterful";
import "./water.css";
export default class Game {
  constructor({ containerId, onWon, onLose }) {
    const waterful = new Waterful();
    const container = document.getElementById(containerId);
    const containerWH = container.clientWidth;
    const bg = document.createElement("div");
    bg.style.transform = `scale(${containerWH / 2160})`;
    bg.className = "bg";
    ["left", "right"].forEach((name) => {
      const button = document.createElement("div");
      button.className = "button " + name;
      bg.appendChild(button);
    });
    container.appendChild(bg);
    const meta = document.createElement("div");
    meta.className = "meta";
    bg.appendChild(meta);
    this.loaded = false;
    this.options = {
      container: bg,
      red: 6,
      yellow: 6,
      green: 6,
      score: {
        left: [],
        right: [],
      },
      callbacks: {
        score(score) {
          console.log("score: ", score, score.total);
        },
        end(score) {
          onWon(score.total);
        },
        step(step) {
          if (step === 0) onLose();
          meta.textContent = `剩余 ${step} 次机会`;
        },
      },
    };
    waterful.preload().then(() => {
      this.loaded = true;
      waterful.init(this.options);
    });
    this.waterful = waterful;
  }
  dispose() {}
  restart() {
    this.loaded && this.waterful.restart(this.options);
  }
  pause() {
    this.loaded && this.waterful.pause();
  }
  resume() {
    this.loaded && this.waterful.resume();
  }
}