【最近抖音上元宇宙虚拟项目猜歌名，互动无人直播游戏源代码解析】

玩抖音的人可能会发现，时不时就刷到音乐类直播：真人唱歌、KTV、单纯播放音乐。

其中“单纯播放音乐”（带字幕）这种直播，同时在线人数竟然能达到2W＋，真是不可思议。

所以，本次开发了一款直播猜歌名的游戏，页面会给用户三个歌名选项，同时播放这首歌的高潮部分，每隔30秒（可配置）会公布歌名。这样直播会很有意思，收看的人也是听着音乐不愿意离开直播间。

CSDN地址：https://download.csdn.net/download/u010978757/85326344
挤地铁项目：https://blog.csdn.net/u010978757/article/details/124264976

下面看下代码部分，index.html，包含一个音乐动画：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>看图猜成语V3</title><link rel="stylesheet" type="text/css" href="css/index.css" lang="scss"/><link rel="stylesheet" type="text/css" href="css/music.css" lang="scss"/><link rel="stylesheet" type="text/css" href="css/star.css" lang="scss"/><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body style="padding: 0; margin: 0; width: 100%; height: 100vh; background-image: url(img/bg/1.jpg); overflow: hidden;"><div style="display: flex; flex-direction: column; height: 100vh; align-items: center; "><div id="answer"></div><div id="refword" style="margin-top: 120px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding: 0 20px "><span class="answer">A：怒火中烧</span><span class="answer">B：百里挑一</span><span class="answer">C：梦寐以求</span></div><div id="timeLeft" style="position: absolute; top: 300px; font-size: 60px; line-height: 60px; font-weight: bolder; opacity: 0.3; color: #ffffff;"></div><div style="font-size: 100px; line-height: 330px; font-weight: bolder; opacity: 0.3; color: #ffffff;">猜歌名</div><div style="width: 100%; height: 200px; margin-top: 0px;"><div class="music active"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>              </div><img style="display: none; width: 200px; height: 200px; margin-top: 20px;" src="img/music.png" /></div><audio id="music" src="" autoplay></audio><script type="text/javascript" src="js/util.js"></script><script type="text/javascript" src="js/v1.js"></script><script type="text/javascript" src="js/snow.js"></script><script type="text/javascript" src="js/star.js"></script></body>
</html>

页面飘雪花动画JS：

(function(){function k(a,b,c){if(a.addEventListener)a.addEventListener(b,c,false);else a.attachEvent&&a.attachEvent("on"+b,c)}
function g(a){if(typeof window.onload!="function")window.onload=a;else{var b=window.onload;window.onload=function(){b();a()}}}
function h(){var a={};for(type in{Top:"",Left:""}){var b=type=="Top"?"Y":"X";if(typeof window["page"+b+"Offset"]!="undefined")a[type.toLowerCase()]=window["page"+b+"Offset"];else{b=document.documentElement.clientHeight?document.documentElement:document.body;a[type.toLowerCase()]=b["scroll"+type]}}return a}
function l(){var a=document.body,b;if(window.innerHeight)b=window.innerHeight;else if(a.parentElement.clientHeight)b=a.parentElement.clientHeight;else if(a&&a.clientHeight)b=a.clientHeight;return b}
function i(a){this.parent=document.body;this.createEl(this.parent,a);this.size=Math.random()*5+5;this.el.style.width=Math.round(this.size)+"px";this.el.style.height=Math.round(this.size)+"px";this.maxLeft=document.body.offsetWidth-this.size;this.maxTop=document.body.offsetHeight-this.size;this.left=Math.random()*this.maxLeft;this.top=h().top+1;this.angle=1.4+0.2*Math.random();this.minAngle=1.4;this.maxAngle=1.6;this.angleDelta=0.01*Math.random();this.speed=2+Math.random()}
var j=false;g(function(){j=true});var f=true;window.createSnow=function(a,b){if(j){var c=[],m=setInterval(function(){f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));!f&&!c.length&&clearInterval(m);for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)if(c[d])if(c[d].top>1500||c[d].top+c[d].size+1>e+n){c[d].remove();c[d]=null;c.splice(d,1)}else{c[d].move();c[d].draw()}},40);k(window,"scroll",function(){for(var e=c.length-1;e>=0;e--)c[e].draw()})}else g(function(){createSnow(a,b)})};window.removeSnow=function(){f=false};i.prototype={createEl:function(a,b){this.el=document.createElement("img");this.el.setAttribute("src","img/snow/snow"+Math.floor(Math.random()*4)+".gif");this.el.style.position="absolute";this.el.style.display="block";this.el.style.zIndex="99999";this.parent.appendChild(this.el)},move:function(){if(this.angle<this.minAngle||this.angle>this.maxAngle)this.angleDelta=-this.angleDelta;this.angle+=this.angleDelta;this.left+=this.speed*Math.cos(this.angle*Math.PI);this.top-=this.speed*Math.sin(this.angle*Math.PI);if(this.left<0)this.left=this.maxLeft;else if(this.left>this.maxLeft)this.left=0},draw:function(){this.el.style.top=Math.round(this.top)+"px";this.el.style.left=Math.round(this.left)+"px"},remove:function(){this.parent.removeChild(this.el);this.parent=this.el=null}}})();
createSnow('', 200);

篇幅有限，先写这么多吧。详细代码可以到CSDN：https://download.csdn.net/download/u010978757/85326344

【最近抖音上元宇宙虚拟项目猜歌名，互动无人直播游戏源代码解析】相关推荐

【最近抖音上元宇宙虚拟项目猜成语，互动无人直播游戏挤地铁】
最近抖音上元宇宙虚拟项目猜成语,直播游戏,用户进入直播间可以发送弹幕互动,模拟真实多人互动场景,可能因为疫情大家憋在家无聊,直播间人数有5000多人,抖音一直不鼓励无人直播,没想到在抖音做猜成语直播居 ...
【最近抖音上元宇宙虚拟项目七国争霸，直播互动游戏源码解析】
最近抖音上元宇宙虚拟项目七国争霸,直播互动游戏,用户进入直播间可以发送弹幕互动,可能因为疫情大家憋在家无聊,直播间人数有5000多人,使用OBS做无人直播,不仅不会被限流,一天轻松赚个几百块也是玩一样 ...
抖音+今日头条副业项目，新玩法，后期收益月入过万
之前浩哥有给大家分享过今日头条和抖音相关的副业项目,有些小伙伴操作后就赚到了一些收益-- 那么,今天浩哥给大家介绍一个新的玩法,就是将抖音和今日头条结合起来操作. 这个副业项目操作简单,非常适合新手. ...
抖音短视频开发项目跨入社交圈，头条实现社交梦？
"1月15日下午,抖音在新品发布会上正式宣布升级私信功能,并推出了自己的独立视频社交产品-多闪,定位于增进亲密关系,这意味着抖音正式进军社交领域." 今日头条的公众号发文介绍了全新 ...
抖音短视频开发项目跨入社交圈，头条实现社交梦？...
"1月15日下午,抖音在新品发布会上正式宣布升级私信功能,并推出了自己的独立视频社交产品-多闪,定位于增进亲密关系,这意味着抖音正式进军社交领域." 今日头条的公众号发文介绍了全新 ...
抖音音乐号副业项目，创新玩法解密
今天和朋友讨论抖音音乐号. 朋友:抖音音乐号现在蛮难做的,还能做吗? 浩哥:可以做,但需要一些小技巧. 现在抖音平台规则更新非常快,之前的去重技术已经满足不了目前的视频要求.所以,需要做一些创新. 顺 ...
老罗直播带货，抖音依然没有准备好和快手、淘宝直播的PK
文 |iihahe 来源 | 螳螂财经(ID:TanglangFin) 老罗离"带货一哥"越来越远. 老罗直播带货已经进行了三场.在线人数.销售额均在下降.尤其是第三场中,要不是一 ...
抖音上那些升100级提现1000块的游戏是什么套路？
昨天,正要入睡,一个朋友给我微信说了一件事,那就是抖音点赞赚钱,说自己刚开始赚了十几块钱,但是后面感觉不对劲了,于是就收手了,因为她知道我在捣鼓网赚项目,所以问问我是不是真的?以下便是这个朋友被套路的 ...
抖音小程序开发：CEO们涌进直播间带货
抖音小程序开发:CEO们涌进直播间带货一场大型实验正在百万CEO中展开. 原本在后方排兵布阵的CEO们,齐刷刷地把战场迁移到直播间,他们不讲段子,没有强大的粉丝基数,很多人第一次开播还有些不适应. ...

【最近抖音上元宇宙虚拟项目猜歌名，互动无人直播游戏源代码解析】

【最近抖音上元宇宙虚拟项目猜歌名，互动无人直播游戏源代码解析】相关推荐

最新文章

热门文章