script.js

//constants
const width = screen.width;
const height = screen.height;
const updateTime = 50;

const bgColor = [0,0,0];
const textColor = [0,255,0];
const fontSize = 20;
const textTypes = 100000000;//将会被用于生成随机字符
const displayableCharRanges = [
    [33,126],//ASCII可打印字符
    [19968,40869],//CJK
    [44032,55203],//HIRAGANA
    [63744,64255],//CJK 扩展 A
];
const 字体 = `宋体  monospace`;

const fadeOutTime = 500;//ms
//otherConstants
const bgColor_text = `rgb(${bgColor[0]},${bgColor[1]},${bgColor[2]})`;
const textColor_text = `rgb(${textColor[0]},${textColor[1]},${textColor[2]})`;
const fadeOut_a = updateTime/fadeOutTime;//每一帧遮罩的透明度
//cvs
const cvs = document.getElementById("canvas");
const ctx = cvs.getContext("2d");
const bufferEl = document.createElement("canvas");
const buffer = bufferEl.getContext("2d");
//setCVS
function setCVSsize(){
    cvs.width = width;
    cvs.height = height;
    bufferEl.width = width;
    bufferEl.height = height;
}
setCVSsize();
//setCodeRain
const textXNum = Math.ceil(width/fontSize);
const textYNum = Math.ceil(height/fontSize);
const textYPos = [];
const whereTextFadeOut = [];
function setCodeRain_textYPos_getPos(){
    return 0;
}
function setCodeRain_textYPos(){
    for(let i = 0;i<textXNum;i++){
        textYPos.push(setCodeRain_textYPos_getPos());
    }
}
function setCodeRain_whereTextFadeOut_getRandomPos(){
    return Math.floor(Math.random()*textYNum);
}
function setCodeRain_whereTextFadeOut(){
    for(let i = 0;i<textXNum;i++){
        whereTextFadeOut[i] = 
        setCodeRain_whereTextFadeOut_getRandomPos();
    }
}
setCodeRain_textYPos();
setCodeRain_whereTextFadeOut();
//bg
function drawBG(){
    buffer.fillStyle = bgColor_text;
    buffer.fillRect(0,0,width,height);
}
drawBG();
//drawText
function createRandomText(){
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    const rand_i = Math.floor(Math.random()*displayableCharRanges.length);
    const rand = getRandomInt(
        displayableCharRanges[rand_i][0],
        displayableCharRanges[rand_i][1]
    );
    //const rand = Math.floor(Math.random() * (126 - 33 + 1)) + 33;
    //const rand = Math.floor(Math.random()*textTypes);
    return String.fromCharCode(rand);
}
function drawText(i){
    buffer.fillStyle = textColor_text;
    buffer.font = `${fontSize}px ${字体}`;
    buffer.fillText(createRandomText(),i*fontSize,textYPos[i]*fontSize);
}

//FadeOut
function fadeOut(){
    buffer.globalAlpha = fadeOut_a;
    buffer.fillStyle = bgColor_text;
    buffer.fillRect(0,0,width,height);
    buffer.globalAlpha = 1;
}
//updateText
function updateText(){
    for(let i = 0;i<textXNum;i++){
        textYPos[i]++;
        let isReset = false;
        if(textYPos[i]>textYNum){isReset=true;}
        if(textYPos[i]>whereTextFadeOut[i]){isReset=true;}
        if(isReset){
            textYPos[i] = 0;
            whereTextFadeOut[i] = 
            setCodeRain_whereTextFadeOut_getRandomPos();
        }
        drawText(i);
    }
    fadeOut();
}
//renderFrame
function renderFrame(){
    ctx.clearRect(0,0,width,height);
    ctx.drawImage(bufferEl,0,0);
}
setInterval(()=>{
    updateText();
    renderFrame();
},updateTime);
//全屏
function fullScreen(){
if(document.fullscreenElement){document.exitFullscreen();}
else{document.documentElement.requestFullscreen();}}
cvs.addEventListener('click',fullScreen);