前端小demo：星星闪烁

小demo:

星星闪烁+自定义滚动条样式

当鼠标放上去就会有星星：

考虑了星星的重生判断和位移等。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 改变滚动条 */
        ::-webkit-scrollbar{
            width: 5px;
        }
        /* 定义滚动条轨道 */
        ::-webkit-scrollbar-track{
            border-radius: 10px;
            background-color: rgba(0, 0, 0, .1);
        }

        /* 定义滑块 */
        ::-webkit-scrollbar-thumb{
            border-radius: 10px;
            -webkit-box-shadow: inset  0 0 6px rgba(0,0,0,.3);
            background-color: #2ecc71;
        }

    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <div>
        <p>
            其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！
        </p>
        <p>
            其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！
        </p>
        <p>
            其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！
        </p>
        <p>
            其实我一直在你身边守候，等你靠在我肩上诉说，会不会有那么一天，你的温柔都属于我，我不会再让你难过，让你的泪再流！
        </p>
    </div>
    <script>
        let can;
        var ctx;
        let w;
        let h;
        var girlPic = new Image();
        var starPic = new Image();
        var number = 60;
        var stars = [];
        var lastTime;
        var deltaTime;
        var switchy = false;
        var life = 0;
        function init(){
            can = document.querySelector('#canvas');
            ctx = can.getContext('2d');
            
            w = can.width;
            h = can.height;

            document.addEventListener('mousemove',mousemove,false);

            girlPic.src = 'src/girl.jpg';
            starPic.src = 'src/star.png';

            for(let i=0;i<number;i++){
                var obj = new starObj();
                stars.push(obj);
                stars[i].init();
            }

            lastTime = Date.now();
            gameloop();
        }
        document.body.onload = init;

        function gameloop(){
            window.requestAnimationFrame(gameloop)
            let now = Date.now();
            deltaTime = now -lastTime;
            lastTime = now;

            drawBackground();
            drawGirl();
            drawStarts();
            aliveUpdate();
        }

        function drawBackground(){
            ctx.fillStyle = "#393550";
            ctx.fillRect(0,0,w ,h);
        }

        function drawGirl(){
            ctx.drawImage(girlPic, 100,150,600,300);
        }

        function mousemove(e){
            if(e.offsetX || e.layerX){
                let px = e.offsetX == undefined ? e.layerX:e.offsetX;
                let py = e.offsetY == undefined ? e.layerY:e.offsetY;

                if(px > 100 && px < 700&& py > 150 && py<450){
                    switchy = true;
                }else{
                    switchy = false;
                }
            }
        }
    </script>
    <script src="js/stars.js"></script>
</body>
</html>

stars.js:

var starObj = function(){
    this.x;
    this.y;
    this.picNo;
    this.timer;

    this.xSpd;
    this.ySpd;
}

starObj.prototype.init = function(){
    this.x = Math.random()*600 + 100;
    this.y = Math.random()*300 + 150;
    this.picNo = Math.floor(Math.random() * 7);
    this.timer = 0;

    this.xSpd = Math.random() * 3 -6;
    this.ySpd = Math.random() * 3 -6;
}

starObj.prototype.update = function(){
    this.x += this.xSpd * deltaTime *0.002;
    this.y += this.ySpd * deltaTime *0.002;

    if(this.x<100 || this.x > 700){
        this.init();
        return;
    }

    if(this.y<150|| this.y > 550){
        this.init();
        return;
    }

    this.timer += deltaTime;
    if(this.timer > 50){
        this.picNo += 1;
        this.picNo %= 7;
        this.timer = 0;
    }
}

starObj.prototype.draw = function(){
    ctx.save();

    //  全局透明度
    ctx.globalAlpha = life;

    //drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
    ctx.drawImage(starPic,this.picNo*7,0,7,7, this.x,this.y,7,7);

    ctx.restore();
}

function drawStarts(){
    for(let i=0;i<number;i++){
        stars[i].draw();
        stars[i].update();
    }
}

function aliveUpdate(){
    if(switchy){
        //show stars
        life += 0.03 *deltaTime * 0.05;
        if(life>1){
            life = 1;
        }
    }else{
        //hide stars
        life -= 0.03 *deltaTime * 0.05;
        if(life < 0){
            life = 0;  
        }
    }
}

所爱隔山海。

发布了356 篇原创文章 · 获赞 67 · 访问量 14万+

私信关注

前端小demo：星星闪烁

小demo:

猜你喜欢