jquery - 将 jQuery 气泡效果代码转换为主干

Question

我已经使用 jQuery 创建了气泡效果，但我现在想在主干中制作它。我已经在我的主干文件中包含了函数，并且只调用它们错误是气泡未定义。无法弄清楚为什么气泡未定义。

有人可以帮我吗？在下面检查我的代码：

class bubble {
  constructor(canvasWidth, canvasHeight) {
    this.maxHeight = canvasHeight;
    this.maxWidth = canvasWidth;
    this.randomise();
  }

  generateDecimalBetween(min, max) {
    return (Math.random() * (min - max) + max).toFixed(2);
  }

  update() {
    this.posX = this.posX - this.movementX;
    this.posY = this.posY - this.movementY;

    if (this.posY < 0 || this.posX < 0 || this.posX > this.maxWidth) {
      this.randomise();
      this.posY = this.maxHeight;
    }
  }

  randomise() {
    this.colour = "255, 255, 255";
    this.size = this.generateDecimalBetween(10, 15);
    this.movementX = this.generateDecimalBetween(-1, 1);
    this.movementY = this.generateDecimalBetween(1, 2);
    this.alpha = this.generateDecimalBetween(0.1, 1);
    this.posX = this.generateDecimalBetween(0, this.maxWidth);
    this.posY = this.generateDecimalBetween(0, this.maxHeight);
  }
}

class background {
  constructor() {
    this.canvas = document.getElementById("floatingbubbles");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.height = window.innerHeight;
    this.canvas.width = window.innerWidth;
    this.bubblesList = [];
    this.generateBubbles();
    this.animate();
  }

  animate() {
    let self = this;
    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
    self.bubblesList.forEach(function(bubble) {
      bubble.update();
      self.ctx.beginPath();
      self.ctx.arc(bubble.posX, bubble.posY, bubble.size, 0, 2 * Math.PI);
      self.ctx.strokeStyle = "rgba(" + bubble.colour + "," + bubble.alpha + ")";
      self.ctx.stroke();
    });

    requestAnimationFrame(this.animate.bind(this));
  }

  addBubble(bubble) {
    return this.bubblesList.push(bubble);
  }

  generateBubbles() {
    let self = this;
    for (let i = 0; i < self.bubbleDensity(); i++) {
      self.addBubble(new bubble(self.canvas.width, self.canvas.height));
    }
  }

  bubbleDensity() {
    return Math.sqrt((this.canvas.height, this.canvas.width) * 1);
  }
}

window.onload = function() {
  new background();
};

window.requestAnimFrame = (function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();

body {
  margin: 0;
  overflow: hidden;
  background: #88151e;
}

#floatingbubbles {
  width: 100%;
  height: 100%;
}

<canvas id="floatingbubbles"></canvas>

var Achievement = CcCarousel.extend({
  render: function() {
    var courseData = this.gameData ? this.gameData : this.app.courseData;
    if (courseData.getStatus() == Status.COMPLETED) {
      this.app.router.next();
    } else {
      CcCarousel.prototype.render.call(this);
      this.showStaggerAnimation();
      this.changeLockedChaptersImage();
      this.setupButtonListeners();
      this.backgroundSetupVariables();
    }
  },

  getCanvasLength: function(canvasWidth, canvasHeight) {
    this.maxHeight = canvasHeight;
    this.maxWidth = canvasWidth;
    Logger.info("called---------------------", this.maxWidth);
    this.randomise();
  },

  generateDecimalBetween: function(min, max) {
    return (Math.random() * (min - max) + max).toFixed(2);
  },

  updatePostions: function() {
    this.posX = this.posX - this.movementX;
    this.posY = this.posY - this.movementY;

    if (this.posY < 0 || this.posX < 0 || this.posX > this.maxWidth) {
      this.randomise();
      this.posY = this.maxHeight;
    }
  },

  randomise: function() {
    this.colour = "255, 255, 255";
    this.size = this.generateDecimalBetween(10, 15);
    this.movementX = this.generateDecimalBetween(-1, 1);
    this.movementY = this.generateDecimalBetween(1, 2);
    this.alpha = this.generateDecimalBetween(0.1, 1);
    this.posX = this.generateDecimalBetween(0, this.maxWidth);
    this.posY = this.generateDecimalBetween(0, this.maxHeight);
  },

  backgroundSetupVariables: function() {
    this.canvas = document.getElementById("floatingbubbles");
    this.ctx = this.canvas.getContext("2d");
    // Logger.info("called---------------------", this.canvas, this.ctx, window.innerWidth, window.innerHeight);
    this.canvas.height = window.innerHeight;
    this.canvas.width = window.innerWidth;
    this.bubblesList = [];
    this.generateBubbles();
    this.animate();
  },

  generateBubbles: function() {
    var self = this;
    for (i = 0; i < this.bubbleDensity(); i++) {
      Logger.info("called---------------------", this.getCanvasLength(this.canvas.width, this.canvas.height));
      this.addBubble(this.getCanvasLength(this.canvas.width, this.canvas.height));
    }
  },

  addBubble: function(bubble) {
    return this.bubblesList.push(bubble);
  },


  bubbleDensity: function() {
    return Math.sqrt((this.canvas.height, this.canvas.width) * 1);
  },
  animate: function() {
    var self = this;
    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
    self.bubblesList.forEach(function(bubble) {
      bubble.updatePostions();
      self.ctx.beginPath();
      self.ctx.arc(bubble.posX, bubble.posY, bubble.size, 0, 2 * Math.PI);
      self.ctx.strokeStyle = "rgba(" + bubble.colour + "," + bubble.alpha + ")";
      self.ctx.stroke();
    });

    this.requestAnimationFrame(this.animate.bind(this));
  },

  windowAnimation: function() {
    return (
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      }
    );
  },

  checkinfoImage: function() {},

  setupButtonListeners: function() {
    this.continueButton = new Button({
      el: this.$el.find(".action-button"),
    });
    this.listenTo(this.continueButton, "onClick", this.handleContinueClick);
  },

  handleContinueClick: function() {
    this.complete();
    this.app.router.next();
  },

  changeLockedChaptersImage: function() {
    for (i = 0; i < this.data.items.length; i++) {
      // if (this.data.items[i].className === Achievement.STATUS_LOCKED) {
      //     this.$el.find("#chapter-progress-" + i).css("background-image", "url(" + this.data.items[i].feedbackImage + ")");
      // }
      if (this.data.items[i].className === Achievement.STATUS_PROGRESS) {
        this.$el.find('#chapter-' + i).css("background-color", "white");
      }
    }
  },

  showStaggerAnimation: function() {
    var $elements = this.$el.find('.main-title, .main-text');
    TweenMax.staggerFrom($elements, 0.3, {
      y: 5,
      opacity: 0,
      ease: Back.easeIn,
      force3D: true,
    }, 0.1);
    this.chapterAnimation();
    // this.drawProgress();
  },

  chapterAnimation: function() {
    var self = this;
    $chapter = this.$el.find(".chapter");
    _.each($chapter, function($chapter, i) {
      TweenMax.fromTo($chapter, 0.5, {
        y: 10,
        opacity: 0,
      }, {
        y: 0,
        opacity: 1,
        delay: (0.2 * (i + 1)),
        ease: Power4.easeOut,
        // onComplete: function() {
        //     self.drawCompletedProgress(i);
        // },
      });
    });
  },


  animateCompletedMark: function($elements) {
    TweenMax.fromTo($elements, 0.3, {
      opacity: 0,
      scale: 0.3,
    }, {
      delay: 0.4,
      opacity: 1,
      scale: 1,
      ease: Power4.easeOut,
    });
  },

  getContent: function(data) {
    return Handlebars.templates["achievement/achievement"](data);
  },

  getData: function($xml, language) {
    var data = {
      title: this.blockData.title(),
      items: [],
      image: ""
    };

    data.mainText = $xml.find("mainText").text();

    var className = "";
    var check = false;

    $xml.find("items").find("item").each(function(i) {
      var isCharacter = ($(this).find("isActive").text() == "true") ? true : false;
      if (isCharacter === true) {
        className = Achievement.STATUS_PROGRESS;
        check = true;
      } else if (isCharacter === false && check === true) {
        className = Achievement.STATUS_LOCKED;

      } else if (isCharacter === false && check === false) {
        className = Achievement.STATUS_COMPLETED;
      }

      data.items.push({
        id: i,
        isActive: isCharacter,
        title: $(this).find("title").text(),
        image: $(this).find("image").text(),
        className: className,
        // feedbackImage: $(this).find("feedbackImage").text(),
        continueButton: LanguageManager.getString("enter"),
        ribbonText: $xml.find("image:last").text(),
      });
    });

    return data;
  },
}, {
  STATUS_COMPLETED: "completed",
  STATUS_PROGRESS: "progress",
  STATUS_LOCKED: "locked",
});

标签： jqueryhtmlbackbone.jshtml5-canvas