script.js

//常量
const width = screen.width;
const height = screen.height;
const updateTime = 1000/60;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//setSize
function setSize(){
    canvas.width = width;
    canvas.height = height;
}
function setPos(){}
setSize();

//sky
const skyColor1 = [40,40,40];
const skyColor2 = [80,40,40];

const skyColor_  = ctx.createLinearGradient(0,0,0,height);
skyColor_.addColorStop(0,`rgb(${skyColor1[0]},${skyColor1[1]},${skyColor1[2]})`);
skyColor_.addColorStop(1,`rgb(${skyColor2[0]},${skyColor2[1]},${skyColor2[2]})`);
function drawSky(){

    ctx.fillStyle = skyColor_;
    ctx.fillRect(0,0,width,height);
}
//star
const starColor = [255,255,255];
const starSize = 3;
const starMove_vector = [0.2,-0.1];

const starColor_max影响范围 = 100;
const starSize_max影响范围 = 2;
var stars = [];
var stars_light = [];
var stars_color = [];
var stars_size = [];
var stars_light_vector = [];
const starDensity = 0.7;//星星密度(颗/100*100)
const starNum = Math.floor(width*height/10000*starDensity);
function setStarLight(){
    return Math.random();
}
function setStarLightVector(){
    return Math.random()*2-1;
}
function setStarColor(){
    let color = [];
    for(var k=0;k<3;k++){
        color.push(Math.random()*starColor_max影响范围
        +(255-starColor_max影响范围));
    }
    return color;
}
function setStarSize(){
    return Math.random()*starSize_max影响范围
    +(starSize-starSize_max影响范围);
}
//生成群星信息
for(var i=0;i<starNum;i++){
    stars.push({
        x:Math.random()*width,
        y:Math.random()*height,
    });
    stars_light.push(setStarLight());
    stars_light_vector.push(setStarLightVector());

    stars_color.push(setStarColor());

    stars_size.push(setStarSize());
}
function drawStar(){
    for(var i=0;i<starNum;i++){
        let 星环数量 = 4;
        for(var k=1;k<=星环数量;k++){
            let a = stars_light[i]*(k/3);//透明度
            if(a>1)a=1;
            let starSize = stars_size[i];
            ctx.fillStyle = `rgba(${stars_color[i][0]},${stars_color[i][1]},${stars_color[i][2]},${a})`;
            ctx.beginPath();
            ctx.arc(stars[i].x,stars[i].y,starSize*(1-(k/星环数量)),0,Math.PI*2);
            ctx.fill();
        }
    }
}
function updateStar(){
    for(var i=0;i<starNum;i++){
        //亮度更新
        stars_light[i] += stars_light_vector[i]/30;
        if(stars_light[i]>=1){
            stars_light[i] = 1;
            stars_light_vector[i] = -Math.abs(stars_light_vector[i]);
        }if(stars_light[i]<=0){
            stars_light[i] = 0;
            stars_light_vector[i] = Math.abs(stars_light_vector[i]);
        }
        //位置更新
        stars[i].x += starMove_vector[0]
        stars[i].y += starMove_vector[1];
        let isReset = false;
        if(stars[i].x>width){stars[i].x = 0;isReset = true;}
        if(stars[i].y>height){stars[i].y = 0;isReset = true;}
        if(stars[i].x<0){stars[i].x = width;isReset = true;}
        if(stars[i].y<0){stars[i].y = height;isReset = true;}
        if(isReset){
            let N = Math.random()>0.5;
            if(N){
                if(starMove_vector[0]>0){
                    stars[i][0] = 0;
                }else{
                    stars[i][0] = width;
                }
                stars[i][1] = Math.random()*height;
            }else{
                if(starMove_vector[1]>0){
                    stars[i][1] = 0;
                }else{
                    stars[i][1] =height;
                }
                stars[i][0] = Math.random()*width;
            }
            stars_light[i] = setStarLight();
            stars_light_vector[i] = setStarLightVector();
            stars_color[i] = setStarColor();
            stars_size[i] = setStarSize();
        }
    }
}
//流星
const MeteorDensity = 0.06;//流星密度(个/100*100)
const MeteorWidth = 5;
const MeteorColor = [255,255,255];
const MeteorSpeed = 5;

const MeteorList = [];
const MeteorColorList = [];
const MeteorWidthList = [];
const MeteorColor_max影响范围 = 100;
const MeteorWidth_max影响范围 = 2;
const Meteor分层数量 = 6;
const MeteorNum = Math.floor(width*height/10000*MeteorDensity);
const Meteor_Length_Zoom=100;

//创建流星
function setMeteorVector(){
    //vector头部向量(流星不可能向上飞)
    let vx = -starMove_vector[0];
    let vy = -starMove_vector[1];
    let rand = Math.random()*2-1;
    const max影响范围 = 0.01;
    vx = vx*max影响范围*rand+(vx*(1-max影响范围));

    const max速度偏移 = 3;
    const add = Math.random()*max速度偏移;

    vx *= (1+add);
    vy *= (1+add);
    return [
        vx*MeteorSpeed,
        vy*MeteorSpeed
    ]
}
function setMeteorColor(){
    let color = [];
    for(var k=0;k<3;k++){
        color.push(Math.random()*MeteorColor_max影响范围
        +(255-MeteorColor_max影响范围));
    }
    return color;
}
function setMeteorWidth(){
    return Math.random()*MeteorWidth_max影响范围
    +(MeteorWidth-MeteorWidth_max影响范围);
}
for(var i=0;i<MeteorNum;i++){
    let x = Math.random()*width;//x
    let y = Math.random()*height;//y
    MeteorList.push([x,y,setMeteorVector()]);

    MeteorColorList.push(setMeteorColor());

    MeteorWidthList.push(setMeteorWidth());
}
function drawMeteor(x,y,vx1,vy1,width,color){//x1,y1为流星尾部向量
    //流星
    ctx.lineCap = 'round';
    vx1*=Meteor_Length_Zoom;
    vy1*=Meteor_Length_Zoom;
    const MFCS = Meteor分层数量+2;
    for(let k=1;k<MFCS;k++){
        const a = k/Meteor分层数量;
        let startColor = `rgba(${color[0]},${color[1]},${color[2]},${a})`;
        let endColor = `rgba(${color[0]},${color[1]},${color[2]},0)`;
        let gradient = ctx.createLinearGradient(x,y,x+vx1,y+vy1);
        gradient.addColorStop(0,startColor);
        gradient.addColorStop(1,endColor);
        ctx.fillStyle = gradient;
        ctx.beginPath();
        const newWidth = width*(1-k/MFCS);
        ctx.arc(x,y,Math.floor(newWidth/2),0,Math.PI*2);
        const headColor = [];
        for(let z=0;z<3;z++){
            let newC_ = color[i];
            newC_ *= 1.2;
            if(newC_>255)newC_=255;
            else if(newC_<0)newC_=0;
            headColor.push(newC_);
        }
        ctx.strokeStyle = `rgb(${headColor[0]},${headColor[1]},${headColor[2]})`;
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+vx1,y+vy1);
        ctx.closePath();
        ctx.strokeStyle = gradient;
        ctx.lineWidth = newWidth;
        ctx.stroke();
    }
}
function updateMeteor(){
    for(var i=0;i<MeteorNum;i++){
        MeteorList[i][0]+=MeteorList[i][2][0];
        MeteorList[i][1]+=MeteorList[i][2][1];
        //如果坐标超出边界
        let x = MeteorList[i][0];
        let y = MeteorList[i][1];
        let x1 = x-MeteorList[i][2][0]*Meteor_Length_Zoom;
        let y1 = y-MeteorList[i][2][1]*Meteor_Length_Zoom;
        
        let newX=undefined;
        let newY=undefined;
        function resetM(){
            MeteorList[i][2] = setMeteorVector();
            MeteorColorList[i] = setMeteorColor();
        }
        //⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
        let isReset = false;
        if(x1 < 0 && MeteorList[i][2][0] < 0){
            isReset = true;
        }if(x1 > width && MeteorList[i][2][0] > 0){
            isReset = true;
        }if(y1 > height && MeteorList[i][2][1] > 0){
            isReset = true;
        }if(y1 < 0 && MeteorList[i][2][1] < 0){
            isReset = true;
        }
        if(isReset){
            resetM();
            //随机决定从顶部还是侧边出现
            let N = Math.random()>0.5;
            if(N){
                if(MeteorList[i][2][0] < 0){
                    newX = width;
                }else{
                    newX = 0;
                }
                newY = Math.random()*height;
            }else{
                if(MeteorList[i][2][1] < 0){
                    newY = height;
                }else{
                    newY = 0;
                }
                newX = Math.random()*width;
            }
        }
        //⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠⚠️⚠️⚠️⚠️⚠️⚠️
        if(newX==undefined){newX=x;}
        if(newY==undefined){newY=y;}
        MeteorList[i][0] = newX;
        MeteorList[i][1] = newY;
    }
    for(var i=0;i<MeteorNum;i++){
        let x = MeteorList[i][0];
        let y = MeteorList[i][1];
        let x1 = -MeteorList[i][2][0];
        let y1 = -MeteorList[i][2][1];
        let width = MeteorWidthList[i];
        let color = MeteorColorList[i];
        drawMeteor(x,y,x1,y1,width,color);
    }
}

setInterval(()=>{
    drawSky();
    drawStar();
    updateMeteor();
    updateStar();
},updateTime);
//full screen
function fullScreen(){
    if(document.fullscreenElement){document.exitFullscreen();
    sayingEl.classList.remove('hide');}else{document.
    documentElement.requestFullscreen();sayingEl.classList.add('hide');}
}canvas.addEventListener('click',fullScreen);