【火爆全网的抖音无人直播项目：挤地铁源代码】

DATA5U

已于 2022-05-28 09:30:37 修改

阅读量1w

点赞数 3

文章标签：抖音无人直播挤地铁元宇宙项目抖音无人直播

于 2022-04-19 09:10:41 首次发布

本文链接：https://blog.csdn.net/u010978757/article/details/124264976

版权

最近抖音上元宇宙虚拟项目挤地铁，直播游戏，用户进入直播间可以发送弹幕互动，模拟真实挤地铁场景，可能因为疫情大家憋在家无聊，直播间人数有5000多人，抖音一直不鼓励无人直播，没想到在抖音做挤地铁直播居然没有被限流。

微信：data5u

提供源码：https://download.csdn.net/download/u010978757/85178184?spm=1001.2014.3001.5503
猜成语项目：https://blog.csdn.net/u010978757/article/details/124658753
猜歌名项目：https://blog.csdn.net/u010978757/article/details/124659147?spm=1001.2014.3001.5502

原文链接：https://code.data5u.com/code/detail-607.html

类似的弹幕互动游戏除了挤地铁模拟器以外还有模拟广场舞和舞厅蹦迪的，甚至还有冲马桶的。

如果只是想要体验游玩抖音挤地铁的话，找一个正在进行这种直播的直播间加入就可以了，发送弹幕即可参与。

而如果是想要自己当主播，在自己的直播间里开启这种挤地铁的互动小游戏的话，目前抖音还没有提供官方内置的模式，需要用户自己准备相应的软件挂在后台上运行。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="plugin/anime/lib/anime.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.info:before {
				content: "";
				position: absolute;
				bottom: -10px;
				left: 95px;
				border-left: 5px solid transparent;
				border-top: 10px solid red;
				border-right: 5px solid transparent;
			}
		</style>
	</head>
	<body style="padding: 0; margin: 0; width: 100%; height: 100vh; overflow: hidden; height: 906px;">
		<div style="display: flex; flex-direction: row; height: 100vh; background-color: #c3c3c3; ">
			<div style="width: calc(100% - 160px); height: 100%; background-color: red; display: flex; flex-direction: column; background-image: url(img/ground.png); border-right: 6px solid #9c7e46;" >
				<div style="width: 100%; height: 50%; display: none;">
					<button id="trainArr">来车了</button>
					<button id="trainGo">开走了</button>
					<button id="openDoor">开门</button>
					<button id="closeDoor">关门</button>
					<button id="personAdd">来个人</button>
					<button id="personIn">进门</button>
					<button id="personSay">说话</button>
				</div>
				<div id="stationIn" style="width: 100%; height: 50%;">
					
				</div>
			</div>
			<div style="overflow: hidden; width: 160px; height: 100%; background-image: url(img/guidao.png);">
				<div class="door" id="door1" style="position: absolute; top: 240px; z-index: 9;">
					<div class="doorLeft" style="position: relative; width: 5px; height: 50px; background-color: #9c7e46;">
					</div>
					<div class="doorRight" style="position: relative; width: 5px; height: 50px; background-color: #9c7e46;">
					</div>
				</div>
				<div class="door" id="door2" style="position: absolute; top: calc(50% + 120px); z-index: 9;">
					<div class="doorLeft" style="position: relative; width: 5px; height: 50px; background-color: #9c7e46;">
					</div>
					<div class="doorRight" style="position: relative; width: 5px; height: 50px; background-color: #9c7e46;">
					</div>
				</div>				
				<div class="bag" id="bag1" style="width: 100%; height: 330px; position: absolute; top: 170px;"></div>
				<div class="bag" id="bag2" style="width: 100%; height: 330px; position: absolute; top: calc(50% + 70px); "></div>
				<div class="train" style="width: 160px; height: 1140px; background-image: url(img/train.png); position: absolute; top: 100%;"></div>
			</div>
		</div>
		
		<div style="display: none;" id="model">
			<div class="aPersonModel" style="position: absolute; text-align: center; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; z-index: 999;">
				<p class="info" style="display: none; background-color: #FFFFFF; font-size: 12px; width: 200px; border: 1px solid #000000; overflow-wrap: normal; position: absolute; top: -60px; z-index: -1;"></p>
				<img class="headimg" style="width: 60px; height: 60px; border-radius: 60px; z-index: 9; border: 1px solid #000;" src="plugin/anime/documentation/assets/img/animejs-v3-header-animation.gif" />
			</div>
		</div>

		<div class="infos">
			<div onclick="window.open('http://www.kuwo.cn/search/list?key=DJ')" style="display: none; position: absolute; top: 150px;left: 50px; right: 200px; background-color: #00000055; color: #FFFFFF; padding: 6px 12px;">
				<marquee>欢迎 <font id="newUserName">啦啦啦</font> 来挤地铁</marquee>
			</div>
			<div onclick="window.open('http://www.kuwo.cn/search/list?key=DJ')" style="display: none; position: absolute; top: 200px;left: 50px; right: 200px; background-color: #00000055; color: #FFFFFF; padding: 6px 12px;">
				<marquee >评论区发送口令：电话, 发火, 拥挤, 运动, 小鸡, 变身, 1, 2, 3, 4, 5, 6</marquee>
			</div>
			<div style="position: absolute; right: 180px; background-color: #00D672; color: #FFFFFF; padding: 0 4px; line-height: 10px; top: 230px; text-shadow: .1rem .2rem .2rem #000000; ">
				<p>排</p>
				<p>队</p>
				<p>候</p>
				<p>车</p>
			</div>
			<div style="position: absolute; right: 180px; background-color: #00D672; color: #FFFFFF; padding: 0 4px; line-height: 10px; top: 570px;  text-shadow: .1rem .2rem .2rem #000000;">
				<p>排</p>
				<p>队</p>
				<p>候</p>
				<p>车</p>
			</div>
			<div style="display: none; font-size: 100px; line-height: 20px; text-align: center; position: absolute; top: 170px; left: calc( (100% - 170px - 120px)/2 ); font-weight: bold; opacity: 0.1;">
				<p>云</p>
				<p>地</p>
				<p>铁</p>
			</div>
			<div style="display: none; font-size: 30px; line-height: 20px; text-align: center; position: absolute; top: 140px; left: calc( (100% - 170px - 120px)/2 + 120px ); font-weight: bold; opacity: 0.1; color: #FF0000;">
				<p>点</p>
				<p>赞</p>
				<p>＋</p>
				<p>关</p>
				<p>注</p>
				<p>坐</p>
				<p>车</p>
				<p>不</p>
				<p>迷</p>
				<p>路</p>
			</div>
			<div id="stationInfo" style="text-align: center; font-size: 13px; width: 140px; position: absolute; right: 8px; top: 400px; background-color: #00D672; color: #FFFFFF; padding: 0 4px; line-height: 10px;  text-shadow: .1rem .2rem .2rem #000000;">
				<p style="display: none;">当前车站：<font id="currStation">西直门</font></p>
				<p style="display: none;">下一车站：<font id="nextStation">大钟寺</font></p>
				<p>
					<svg t="1650691476609" class="icon" viewBox="0 0 1055 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1650" width="32" height="32"><path d="M219.508059 593.933479h600.814167s-23.510324 70.530972-62.694197 70.530972H229.946643l-10.438584-70.530972zM222.109868 348.391655h130.62336v143.663753zM459.830591 356.22843h143.679427l151.500528 122.770912h-148.898719z" fill="#d4237a" p-id="1651"></path><path d="M751.421303 677.536192H224.727351a15.673549 15.673549 0 0 1-15.67355-15.67355V277.89203a15.673549 15.673549 0 0 1 31.347099 0v368.297063h511.020403c22.115378 0 41.5976-12.726922 53.446803-34.920668 14.451013-27.06822 13.353864-60.546921-2.664503-85.938071L576.002939 338.580013a15.01526 15.01526 0 0 1-1.285231-1.175516c-27.397364-28.275083-62.584483-43.838918-99.072506-43.838918H300.493288a15.673549 15.673549 0 0 1 0-31.347098h175.151914c44.763657 0 87.693509 18.714218 120.968454 52.741493l227.407528 187.722101c1.175516 0.97176 2.194297 2.100256 3.040668 3.354139 23.49465 35.093077 25.641927 82.192093 5.470069 119.981021-17.209557 32.256165-47.537875 51.518957-81.110618 51.518957z" fill="#d4237a" p-id="1652"></path><path d="M781.138353 507.117689h-325.226149a15.673549 15.673549 0 0 1-15.67355-15.673549v-141.061944a15.673549 15.673549 0 0 1 15.67355-15.67355h69.230067a15.673549 15.673549 0 0 1 0 31.347099h-53.556518v109.714846h309.5526a15.673549 15.673549 0 0 1 0 31.347098zM353.673641 507.117689H236.357124a15.673549 15.673549 0 0 1 0-31.347098h101.642968v-109.714846H236.357124a15.673549 15.673549 0 0 1 0-31.347099h117.316517a15.673549 15.673549 0 0 1 15.67355 15.67355v141.061944a15.673549 15.673549 0 0 1-15.67355 15.673549zM305.71258 612.898474h-80.985229a15.673549 15.673549 0 0 1 0-31.347099h80.985229a15.673549 15.673549 0 0 1 0 31.347099zM404.973168 612.898474h-36.56639a15.673549 15.673549 0 0 1 0-31.347099h36.56639a15.673549 15.673549 0 0 1 0 31.347099zM827.014832 612.898474H467.667366a15.673549 15.673549 0 0 1 0-31.347099h359.347466a15.673549 15.673549 0 0 1 0 31.347099zM765.464803 761.781519h-536.819065a15.673549 15.673549 0 0 1 0-31.347098h536.819065a15.673549 15.673549 0 0 1 0 31.347098z" fill="#d4237a" p-id="1653"></path></svg>
					<span style="position: relative; top: -13px;">候车时间：<font id="leftArrTime">00:15</font></span>
				</p>
			</div>
			
			<div style="text-align: center;  position: absolute; bottom: 6px; color: #ffffff; font-weight: bold; left: calc( 50% - 180px ); background-color: #0000003b; padding: 0 20px; font-weight: bold;">
				<p id="currTime">2022-04-04 12:33:00</p>
				<p id="currDay">星期三</p>
			</div>
			
			<audio id="audio"></audio>
			<audio src="video/zaoyin.mp3" id="audioZaoYin" autoplay loop></audio>
			<audio src="video/yiqing.wav" id="audioYiQing"></audio>
		</div>
		
		<script type="text/javascript" src="js/util.js"></script>
		<script type="text/javascript" src="js/train-v2.js"></script>
		<script type="text/javascript" src="js/control.js"></script>
	</body>
</html>