Tiktok抖音最新无人互动直播项目：猜
之前写的文章是关于抖音最新无人互动直播项目：猜成语V1版源代码解析，可以参考之前的文章
今天要讲的是最新的V4版本源码解析，这个版本新增了语音播报和错题显示功能、优化了体验性能。
总体功能包括：排行榜（榜一、榜二、榜三）、用户刷小心心等礼物会播报感谢（播报内容：感谢老铁送来的小心心）、错误答案会显示❌。
V4版本内共有800道成语题目。用户可以自行配置自己的成语题目。
V4源码放到CSDN可下载：
代码后端采用JAVA、前端采用、插件采用.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>看图猜成语V4title>
<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;
display: none;
}
#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: -130px;
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
color: #f00;
font-size: 26px;
font-weight: bold;
}
#refword .answer {
display: inline-block;
min-width: 300px;
width: auto;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 20px;
color: #223445;
font-weight: bolder;
margin: 3%;
background-color: aliceblue;
border: 1px solid #000;
}
#timeLeft {
font-size: 30px;
color: #FFFFFF;
position: relative;
top: -40px;
}
#errorAnswer {
font-size: 30px;
font-weight: bold;
color: #000;
}
.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;">×0p>
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;">×0p>
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;">×0p>
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 id="refword" title="参考文字">div>
<div style="display: flex; flex-direction: row; justify-content: space-around;">
<img id="chengyu-img" class="animate" />
div>
<font id="timeLeft">12 秒font>
<font id="errorAnswer">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;">×0p>
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>
<audio src="audio/xiaoxinxin.wav" id="audioXiaoXinXin">audio>
<audio src="audio/meiguihua.wav" id="audioMeiGuiHua">audio>
<audio src="audio/pijiu.wav" id="audioPiJiu">audio>
<audio src="audio/gift.wav" id="audioGift">audio>
div>
<script type="text/javascript" src="js/util.js">script>
<script type="text/javascript" src="js/v4.js">script>
body>
html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
