Tiktok抖音最新无人互动直播项目：猜成语V4版（带语音感谢用户送礼物功能）源代码解析

之前写的文章是关于Tiktok抖音最新无人互动直播项目：猜成语V1版源代码解析，可以参考之前的文章https://blog.csdn.net/u010978757/article/details/124658753

今天要讲的是最新的V4版本源码解析，这个版本新增了语音播报和错题显示功能、优化了体验性能。

总体功能包括：排行榜（榜一、榜二、榜三）、用户刷小心心等礼物会播报感谢（播报内容：感谢老铁送来的小心心）、错误答案会显示❌。

V4版本内共有800道成语题目。用户可以自行配置自己的成语题目。

V4源码放到CSDN可下载：https://download.csdn.net/download/u010978757/85841069

在这里插入图片描述

代码后端采用JAVA、前端采用TypeScript、插件采用JavaScript.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>看图猜成语V4</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;
			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;">×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 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;">×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>
			
			<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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

相关阅读:
前端一面经典vue面试题（持续更新中）
【VR开发】【Unity】0-课程简介和概述
 k8s 知识点 pod，deployment，service，ingrss他们的关系
 Mybiosource丨Mybiosource兔抗人磷脂酶 A2 多克隆抗体
 npm 命令
 OpenJDK提案将提供Java类文件API
ECMAScript 6.0
创邻科技Galaxybase—激活数据要素的核心引擎
 利用 React 和 Bootstrap 进行强大的前端开发
 C语言用awtk开发界面访问http接口
原文地址：https://blog.csdn.net/u010978757/article/details/125549836