论坛 › 欢乐水吧 › 红袖《窗外飘落相思雨》（学习马老师代码）

梦缘 发表于 2022-9-1 21:20

红袖《窗外飘落相思雨》（学习马老师代码）

本帖最后由 梦缘 于 2022-9-1 22:09 编辑 <br /><br /><style>
#papa { left: -242px; top:120px; width: 1080px; height: 680px; background: url('https://www.huachaowang.com/data/attachment/forum/202209/01/210709h9ul900hr6d9h9zb.jpg') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 700px; height: 580px;left:320px;top:10px;opacity: .15; }
#disc { position: absolute; width: 40px; height: 40px; right: 150px; bottom: 12px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; right: 266px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightgray; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <span id="disc"></span>
        <span id="tit">天空漂起绵绵相思雨，让我爱上你</span>
<div style="position: absolute; left:10px; bottom: 0px; width:450px;">
                <img alt="" src="https://www.huachaowang.com/data/attachment/forum/202209/01/210648ftztouyu9yuwj17y.jpg">
                </div>
</div><br><br><br><br><br><br>

<script>

let aud = new Audio();
aud.src = 'http://txcdn-file-m.mvbox.cn/upload/d979554eab31b5b107c4553e7017b803.m4a';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

(function main() {
        let canv = document.getElementById('canv');
        let ctx = canv.getContext('2d');
        canv.width = canv.clientWidth;
        canv.height = canv.clientHeight;
        let dropList = [], linelist = [], mousePos = ;
        let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;

        window.onmousemove = function (e) {
                mousePos = e.clientX - offset(canv).x;
                mousePos = e.clientY - offset(canv).y;
                maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
        }

        function createLine(e) {
                let temp = 0.25 * (50 + Math.random() * 100);
                let line = {
                        speed: 5.5 * (Math.random() * 6 + 3),
                        die: false,
                        posx: e,
                        posy: -50,
                        h: temp,
                        corlor: '#eee'
                };
                linelist.push(line);
        }

        function createDrop(x, y) {
                let drop = {
                        die: false,
                        posx: x,
                        posy: y,
                        vx: (Math.random() - 0.5) * 8,
                        vy: Math.random() * (-6) - 3,
                        radius: Math.random() * 1.5 + 1
                };
                return drop;
        }

        function madedrops(x, y) {
                let maxi = Math.floor(Math.random() * 5 + 5);
                for (let i = 0; i < maxi; i++) {
                dropList.push(createDrop(x, y));
                }
        }

        window.requestAnimationFrame(update);

        function update() {
                if (dropList.length > 0) {
                        dropList.forEach(function (e) {
                                e.vx = e.vx + (speedx / 2);
                                e.posx = e.posx + e.vx;
                                e.vy = e.vy + gravity;
                                e.posy = e.posy + e.vy;
                                if (e.posy > canv.clientHeight) {
                                e.die = true;
                                }
                        });
                }
                for (let j = dropList.length - 1; j >= 0; j--) {
                        if (dropList.die) {
                                dropList.splice(j, 1);
                        }
                }
                speedx = speedx + (maxspeedx - speedx) / 50;
                for (let i = 0; i < lineNum; i++) {
                        createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
                }
                let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
                linelist.forEach(function (e) {
                        let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h)

- mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
                        if (dis < mouseDis) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if ((e.posy + e.h) > endLine) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if (e.posy >= canv.clientHeight) {
                                e.die = true;
                        } else {
                                e.posy = e.posy + e.speed;
                                e.posx = e.posx + e.speed * speedx;
                        }
                });
                for (let j = linelist.length - 1; j >= 0; j--) {
                        if (linelist.die) {
                                linelist.splice(j, 1);
                        }
                }
                render();
                window.requestAnimationFrame(update);
        }

        function render() {
                ctx.fillRect(0, 0, canv.width, canv.height);
                ctx.lineWidth = 1;
                linelist.forEach(function (line) {
                        ctx.strokeStyle = line.color;
                        ctx.beginPath();
                        ctx.moveTo(line.posx, line.posy);
                        ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
                        ctx.stroke();
                });
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "#fff";
                dropList.forEach(function (e) {
                        ctx.beginPath();
                        ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
                        ctx.stroke();
                });
        }

        function offset(ele) {
                let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
                while(pa != null) {
                        x += pa.offsetLeft;
                        y += pa.offsetTop;
                        pa = pa.offsetParent;
                }
                return {x,y};
        }
})();

</script></td></tr>

加林森 发表于 2022-9-1 21:26

制作漂亮。梦缘好像你最后的一组代码没有对。论坛都变形了。

红影 发表于 2022-9-1 21:28

代码的最后多了点td tr之类的东东，帮你删掉了。制作很漂亮，欣赏梦缘好帖{:4_187:}

加林森 发表于 2022-9-1 21:30

雨打芭蕉的音乐没有啊？能不能上点音乐。

梦缘 发表于 2022-9-1 22:11

加林森 发表于 2022-9-1 21:30
雨打芭蕉的音乐没有啊？能不能上点音乐。

已添了音乐，问好老师！

加林森 发表于 2022-9-1 22:18

梦缘 发表于 2022-9-1 22:11
已添了音乐，问好老师！

这样就挺好的。

小辣椒 发表于 2022-9-1 22:22

刚才没有音乐，现在有音乐了{:4_199:}

青青子衿 发表于 2022-9-1 23:57

这是画中画。。。。美贴呢，欢迎新朋友。。{:4_204:}

梦缘 发表于 2022-9-2 16:38

红影 发表于 2022-9-1 21:28
代码的最后多了点td tr之类的东东，帮你删掉了。制作很漂亮，欣赏梦缘好帖

谢谢老师的欣赏支持和修改，感谢！{:4_187:}

梦缘 发表于 2022-9-2 16:39

小辣椒 发表于 2022-9-1 22:22
刚才没有音乐，现在有音乐了

谢谢老师的欣赏支持，问好！{:4_191:}

梦缘 发表于 2022-9-2 16:40

青青子衿 发表于 2022-9-1 23:57
这是画中画。。。。美贴呢，欢迎新朋友。。

感谢老师的支持，问好！{:4_191:}

东篱闲人 发表于 2022-9-2 18:56

好看好听。。。。{:4_187:}

红影 发表于 2022-9-2 19:43

梦缘 发表于 2022-9-2 16:38
谢谢老师的欣赏支持和修改，感谢！

太客气了，一起学习，一起开心{:4_187:}

梦缘 发表于 2022-9-3 19:17

东篱闲人 发表于 2022-9-2 18:56
好看好听。。。。

感谢老师的欣赏支持，问好！{:4_191:}

查看完整版本: 红袖《窗外飘落相思雨》（学习马老师代码）