我已经使用jQuery创建了气泡效果，但我现在想在脊柱中制作它。我已将函数包含在我的主干文件中并仅调用它们错误是bubble未定义。无法弄清楚为什么泡沫未定义。
有人可以帮助我吗？检查下面的代码：
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",
});