67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
|
const canvas = document.getElementById("canvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
let cw = window.innerWidth;
|
||
|
|
let ch = window.innerHeight;
|
||
|
|
|
||
|
|
window.onresize = () => {
|
||
|
|
canvas.width = window.innerWidth;
|
||
|
|
canvas.height = window.innerHeight;
|
||
|
|
cw = window.innerWidth;
|
||
|
|
ch = window.innerHeight;
|
||
|
|
maxColumns = cw/fontSize;
|
||
|
|
};
|
||
|
|
|
||
|
|
let charArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '€', '$', '£', 'µ', '§'];
|
||
|
|
let maxCharCount = 100;
|
||
|
|
let fallingCharArr = [];
|
||
|
|
let fontSize = 15;
|
||
|
|
let maxColumns = cw/fontSize;
|
||
|
|
|
||
|
|
canvas.width = cw;
|
||
|
|
canvas.height = ch;
|
||
|
|
|
||
|
|
let frames = 0;
|
||
|
|
|
||
|
|
class FallingChar {
|
||
|
|
|
||
|
|
constructor(x, y) {
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
}
|
||
|
|
|
||
|
|
draw(ctx) {
|
||
|
|
this.value = charArr[Math.floor(Math.random() * (charArr.length - 1))].toUpperCase();
|
||
|
|
this.speed = Math.random() * fontSize * 3 /4 + fontSize * 3 /4;
|
||
|
|
|
||
|
|
ctx.fillStyle = "rgba(0, 255, 0)";
|
||
|
|
ctx.font = fontSize + "px Courier";
|
||
|
|
ctx.fillText(this.value, this.x, this.y);
|
||
|
|
this.y += this.speed;
|
||
|
|
|
||
|
|
if (this.y > ch) {
|
||
|
|
this.y = Math.random() * ch/2 - 50;
|
||
|
|
this.x = Math.floor(Math.random() * maxColumns) * fontSize;
|
||
|
|
this.speed = - Math.random() * fontSize * 3 /4 + fontSize * 3 /4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let update = () => {
|
||
|
|
if (fallingCharArr.length < maxCharCount) {
|
||
|
|
let fallingChar = new FallingChar(Math.floor(Math.random() * maxColumns) * fontSize, Math.random() * ch/2 - 50);
|
||
|
|
fallingCharArr.push(fallingChar);
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
||
|
|
ctx.fillRect(0, 0, cw, ch);
|
||
|
|
|
||
|
|
for (let i = 0; i < fallingCharArr.length && frames % 2 == 0; i++){
|
||
|
|
fallingCharArr[i].draw(ctx);
|
||
|
|
}
|
||
|
|
|
||
|
|
requestAnimationFrame(update);
|
||
|
|
frames++;
|
||
|
|
}
|
||
|
|
|
||
|
|
update();
|