Użytkownik:SH3VEK/common.js: Różnice pomiędzy wersjami
Z Nonsensopedii, polskiej encyklopedii humoru
M Znacznik: edytor źródłowy |
M Znacznik: edytor źródłowy |
||
| Linia 1: | Linia 1: | ||
// Mała zabawka z Vue.js |
|||
// KOD NA ŚNIEG |
|||
(function() |
setTimeout(function(){ |
||
// To pojawi się na samym dole |
|||
'use strict'; |
|||
$('<div class="n-user">{{name}}</div>').appendTo("body"); |
|||
var NUM_FLAKES = 40; |
|||
window.zabawka = new Vue({el: ".n-user", data: {name: mw.config.get("wgUserName")}}); |
|||
var flakes, Flake, PI_2, canvas, context, drawCircle, i, range, resizeWindow, xpos; |
|||
// W konsoli (CTRL-K lub CTRL-J) wpiszcie: zabawka.name = "Kaczuszka" |
|||
PI_2 = 2 * Math.PI; |
|||
| ⚫ | |||
canvas = $('<canvas style="z-index: 500; pointer-events: none; position: fixed; top: 0; left: 0;" id="snieg"></canvas>').appendTo("body")[0]; |
|||
context = canvas.getContext("2d"); |
|||
window.w = 0; |
|||
window.h = 0; |
|||
resizeWindow = function() { |
|||
window.w = canvas.width = window.innerWidth; |
|||
return (window.h = canvas.height = window.innerHeight); |
|||
}; |
|||
window.addEventListener('resize', resizeWindow, false); |
|||
$(function() {return setTimeout(resizeWindow, 0);}); |
|||
range = function(a, b) {return (b - a) * Math.random() + a;}; |
|||
drawCircle = function(x, y, r) { |
|||
context.beginPath(); |
|||
context.arc(x, y, r, 0, PI_2, false); |
|||
context.fill(); |
|||
context.stroke(); |
|||
}; |
|||
xpos = 0.5; |
|||
document.onmousemove = function(e) {return (xpos = e.pageX / w);}; |
|||
window.requestAnimationFrame = (function() { |
|||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { |
|||
return window.setTimeout(callback, 1000 / 60); |
|||
}; |
|||
})(); |
|||
Flake = (function() { |
|||
function Flake() { |
|||
this.r = ~~range(4, 8); |
|||
this.r2 = 2 * this.r; |
|||
this.replace(); |
|||
} |
|||
Flake.prototype.replace = function() { |
|||
this.x = range(-this.r2, w - this.r2); |
|||
this.y = range(-20, h - this.r2); |
|||
this.xmax = w - this.r; |
|||
this.ymax = h - this.r; |
|||
this.vx = range(0, 2) + 8 * xpos - 5; |
|||
this.vy = 0.5 * this.r + range(-0.5, 0.5); |
|||
}; |
|||
Flake.prototype.draw = function() { |
|||
var f; |
|||
this.x += this.vx; |
|||
this.y += this.vy; |
|||
if (this.y > this.ymax) { |
|||
this.replace(); |
|||
} |
|||
if (!((0 < (f = this.x) && f < this.xmax))) { |
|||
this.x = (this.x + this.xmax) % this.xmax; |
|||
} |
|||
drawCircle(~~this.x, ~~this.y, this.r); |
|||
}; |
|||
return Flake; |
|||
})(); |
|||
flakes = (function() { |
|||
var i, a = []; |
|||
for (i = 0; i < NUM_FLAKES; i++) |
|||
a.push(new Flake()); |
|||
return a; |
|||
})(); |
|||
window.step = function() { |
|||
var i, len; |
|||
requestAnimationFrame(step); |
|||
context.clearRect(0, 0, w, h); |
|||
context.fillStyle = "rgba(255,255,255,1)"; |
|||
context.lineWidth = 2; |
|||
context.strokeStyle = "rgba(0,0,0,0.25)"; |
|||
for (i = 0, len = flakes.length; i < len; i++) |
|||
flakes[i].draw(); |
|||
}; |
|||
step(); |
|||
console.log("Załadowano śnieg"); |
|||
| ⚫ | |||
