JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<canvas id="christmasSnow" width="137px" height="206x"></canvas>
</body>
JavaScript
$(document).ready(function () {
var imageUrl = "https://hup.hu/images/xmas/xmas2.jpg";
makeSnow("christmasSnow", imageUrl);
});
function makeSnow(canvasId, imagePath) {
var christmasSnow = new ChristmasSnow(canvasId, imagePath);
var renderAndUpdateFunc = renderAndUpdate(christmasSnow)
setInterval(renderAndUpdateFunc, 15);
}
function renderAndUpdate(christmasSnow) {
return function() {
christmasSnow.render();
christmasSnow.update();
}
}
function ChristmasSnow(canvasId, imagePath) {
var snowElement = document.getElementById(canvasId);
this.canvasContext = snowElement.getContext("2d");
this.width = snowElement.clientWidth;
this.heigth = snowElement.clientHeight;
this.image = initImage(imagePath);
this.snow = initSnow(this.width, this.heigth);
}
function initImage(imagePath) {
var image = new Image();
image.src = imagePath;
return image;
}
function initSnow(width, height) {
var minRasius = 10,
maxRadius = 1,
minSpeedY = 11,
maxSpeedY = 33,
speedX = 0.5,
minAlpha = 0.5,
maxAlpha = 1.0,
minMoveX = 3,
maxMoveX = 18;
var snowSettings = new SnowSettings(minRasius, maxRadius, width, height, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX);
var snow = [];
var snowNumber = 1500;
for(var i = 0; i < snowNumber; ++i) {
snow[i] = new Snow(snowSettings);
}
return snow;
}
ChristmasSnow.prototype.render = function() {
// render background image
this.canvasContext.drawImage(this.image, 0, 0);
// render snow
for(var i = 0; i < this.snow.length; ++i) {
this.snow[i].render(this.canvasContext);
}
}
ChristmasSnow.prototype.update = function() {
for(var i = 0; i < this.snow.length; ++i) {
this.snow[i].update();
}
}
function SnowSettings(minRadius, maxRadius, maxX, maxY, minSpeedY, maxSpeedY, speedX, minAlpha,...