最近抖音上元宇宙虚拟项目猜成语，直播游戏，用户进入直播间可以发送弹幕互动，模拟真实多人互动场景，可能因为疫情大家憋在家无聊，直播间人数有5000多人，抖音一直不鼓励无人直播，没想到在抖音做猜成语直播居然没有被限流。
微信：data5u
猜成语源码：https://download.csdn.net/download/u010978757/85178184?spm=1001.2014.3001.5503
挤地铁源码：https://blog.csdn.net/u010978757/article/details/124264976
猜歌名源码：https://blog.csdn.net/u010978757/article/details/124659147
类似的弹幕互动游戏除了猜成语，还有挤地铁、广场舞和舞厅蹦迪的，甚至还有冲马桶的。
如果只是想要体验游玩抖音猜成语的话，找一个正在进行这种直播的直播间加入就可以了，发送弹幕即可参与。
而如果是想要自己当主播，在自己的直播间里开启这种互动小游戏的话，目前抖音还没有提供官方内置的模式，需要用户自己准备相应的软件挂在后台上运行。
代码后端采用JAVA、前端采用TypeScript、插件采用JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>看图猜成语V3</title>
<link rel="stylesheet" type="text/css" href="css/index.css" lang="scss"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#bangdan {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 80px;
}
#bangdan .message {
font-size: 22px;
color: #FBF38C;
text-shadow: .2rem 0rem .5rem #FF8F42;
}
#chengyu-img {
position: relative;
top: -100px;
width: 300px;
height: 200px;
border: 1px solid red;
}
#title {
text-align: center;
position: relative;
top: -110px;
color: #FFFFFF;
font-size: 40px;
font-weight: bold;
background-color: #FF8F42;
width: 95%;
padding: 8px;
text-shadow: .2rem 0rem .5rem #000000;
}
#answer {
z-index: 9999;
font-size: 100px;
font-weight: bolder;
color: #09090B;
position: absolute;
top: 0px;
text-shadow: .2rem 0rem .5rem #FFC730,-.2rem 0rem .5rem #FFC730,0rem .2rem .5rem #FFC730,0rem -.2rem .5rem #FFC730;
}
#refword {
position: relative;
top: -90px;
z-index:99;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
#refword .answer {
display: inline-block;
width: 150px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 15px;
color: #223445;
font-weight: bolder;
margin: 3%;
background-color: aliceblue;
border: 1px solid #000;
}
#timeLeft {
font-size: 30px;
color: #FFFFFF;
position: relative;
top: -40px;
}
.prizetitle {
font-size: 18px;
padding: 1px 6px;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow-wrap: normal;
z-index: -1;
max-width: 120px;
}
</style>
</head>
<body style="padding: 0; margin: 0; width: 100%; height: 100vh; background-image: url(img/bg/bg.jpg); overflow: hidden;">
<div style="display: flex; flex-direction: column; height: 100vh; ">
<div title="上边部分" style="display: flex; flex-direction: column; ">
<div id="bangdan">
<p class="message">评论区回复答案，答对可上榜</p>
<div style="display: flex; flex-direction: row; justify-content: space-between; width: 350px;">
<div id="prize1" title="第1名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #FFFF00; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
<div id="prize2" title="第2名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #FBF38C; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
<div id="prize3" title="第3名" style="text-align: center; align-items: center; display: flex; flex-direction: column;">
<p class="info prizetitle">无人上榜</p>
<img src="img/head.gif" style="width: 60px; height: 60px; border-radius: 40px;" />
<p class="info animate rightnum" style="font-size: 32px; z-index: 2; font-weight: bold; color: #F6F4F2; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #000000;">×0</p>
</div>
</div>
</div>
<div style="width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; top: 10px;">
<div title="答案" id="answer"></div>
<p id="title">看图猜成语 你能对几个</p>
<div style="display: flex; flex-direction: row; justify-content: space-around;">
<img id="chengyu-img" class="animate" />
<div id="refword" title="参考文字"></div>
</div>
<font id="timeLeft">12 秒</font>
</div>
</div>
<div title="下边部分" id="user-area" style="width: 100%; display: none;">
</div>
</div>
<div style="display: none;" id="model">
<div class="aPersonModel" style=" position: absolute; width: 60px; text-align: center; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; z-index: 999;">
<p class="info" style="background-color: #FFFFFF; font-size: 12px; width: 100px; border: 1px solid #000000; overflow-wrap: normal; position: absolute; top: -40px; z-index: -1;"></p>
<img class="headimg" style="width: 60px; height: 60px; border-radius: 60px; z-index: 9;" src="img/head.gif" />
<p class="animate rightnum" style="display: none; font-size: 32px; z-index: 2; font-weight: bold; color: #F6F4F2; z-index: 100000000; position: relative;top: -70px; right: -30px; text-shadow: .2rem 0rem .5rem #FFC730,-.2rem 0rem .5rem #FFC730,0rem .2rem .5rem #FFC730,0rem -.2rem .5rem #FFC730;">×0</p>
</div>
</div>
<div id="audio">
<audio src="audio/def.wav" id="audioDef"></audio>
<audio src="audio/welcome.wav" id="audioWelcome"></audio>
<audio src="audio/what.wav" id="audioWhat"></audio>
<audio src="audio/two.wav" id="audioTwo"></audio>
<audio src="audio/comment.wav" id="audioComment"></audio>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/v3.js"></script>
</body>
</html>
扫一扫
3440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
