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

最新推荐文章于 2025-04-21 14:26:49 发布

DATA5U

最新推荐文章于 2025-04-21 14:26:49 发布

阅读量2.3k

点赞数

分类专栏：小程序源码文章标签：抖音直播无人直播项目猜歌名直播歌曲抖音挤地铁

本文链接：https://blog.youkuaiyun.com/u010978757/article/details/125345018

版权

小程序源码专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一款直播猜歌名的游戏开发，用户从三个选项中猜测正在播放歌曲的名字。页面包含音乐动画效果，并提供实时更新的歌名提示。源代码可在优快云下载，增加了直播间的互动性和趣味性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

优快云地址：https://download.youkuaiyun.com/download/u010978757/85326344
挤地铁项目：https://blog.youkuaiyun.com/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);