├── readme.md
├── package.json
├── .gitignore
├── public
├── images
│ ├── go.svg
│ ├── back.svg
│ ├── pen.svg
│ ├── ok.svg
│ ├── account.svg
│ ├── close.svg
│ ├── eraser.svg
│ ├── clear.svg
│ ├── submit.svg
│ ├── new.svg
│ ├── size.svg
│ ├── send.svg
│ ├── wait.svg
│ ├── newroom.svg
│ ├── draw.svg
│ ├── drap.svg
│ ├── chat.svg
│ ├── color.svg
│ └── home.svg
├── index.css
└── index.html
├── server.js
└── yarn.lock
/readme.md:
--------------------------------------------------------------------------------
1 | # webrtc+socket.io+canvas实现的你画我猜小游戏
2 | ### [项目掘金文章](https://juejin.im/post/5cd3c94d6fb9a03214377acb)
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "koa": "^2.7.0",
4 | "koa-socket": "^4.4.0",
5 | "koa-static": "^5.0.0",
6 | "path": "^0.12.7",
7 | "socket.io": "^2.2.0"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/public/images/go.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/back.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/pen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/ok.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/account.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/eraser.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/clear.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/submit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/new.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/size.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/send.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/wait.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/newroom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/draw.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/drap.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/chat.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/color.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/home.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | import Koa from 'koa'
2 | import { join } from 'path'
3 | import Static from 'koa-static'
4 | import Socket from 'socket.io'
5 |
6 | // 保存user
7 | const users = {}
8 | // 保存房间
9 | const rooms = {}
10 | // 保存socket
11 | const sockets = {}
12 |
13 | // 题目
14 | const question = ['花','对牛弹琴', '冰糖葫芦', '刻舟求剑', '口红', '七上八下', '放风筝', '台灯',"理发师", "雷人", "不入虎穴焉得虎子", "仙人掌", "耳机", "打火机", "汉堡", "画饼充饥", "虎头蛇尾", "泪流满面", "捧腹大笑", "画蛇添足", "一手遮天", "掩耳盗铃", "布娃娃", "娃哈哈", "CD", "落地灯", "内裤", "烟斗", "鹦鹉", "钻戒", "网址", "牛肉面"]
15 |
16 | // 用户类
17 | class User {
18 | constructor(name, socre = 0, state=false, isoption=false) {
19 | this.name = name
20 | this.socre = socre
21 | this.state = state
22 | this.isoption = isoption
23 | }
24 | addSocre() {
25 | this.socre += 2
26 | }
27 | }
28 | // 房间类
29 | class Room {
30 | constructor(name) {
31 | this.name = name
32 | this.users = []
33 | this.index = 0
34 | this.question = ''
35 | }
36 | addUser(user) {
37 | this.users.push(user)
38 | }
39 | deleteUser(user) {
40 | this.users.splice(this.users.indexOf(user), 1)
41 | }
42 | init() {
43 | this.index = 0
44 | for (let user of this.users) {
45 | user.state = false
46 | user.socre = 0
47 | user.isoption = false
48 | }
49 | this.question = ''
50 | }
51 | }
52 | // 创建一个socket.io
53 | const io = new Socket({
54 | options : {
55 | pingTimeout: 10000,
56 | pingInterval: 5000
57 | }
58 | })
59 | // 创建koa
60 | const app = new Koa()
61 | // socket注入app
62 | io.attach(app)
63 |
64 | // 添加指定静态web文件的Static路径
65 | // Static(root, opts) 这里将public作为根路径
66 | app.use(Static(
67 | // join 拼接路径
68 | // __dirname返回被执行文件夹的绝对路径
69 | join( __dirname, './public')
70 | ))
71 |
72 | function getRoomList(rooms) {
73 | let r = Object.keys(rooms)
74 | let room = r.map(room => {
75 | return {room: room, length: rooms[room].users.length}
76 | })
77 | return room
78 | }
79 | function getRoomUsers(data) {
80 | let roomusers
81 | if (data.room && Object.keys(rooms).length) {
82 | roomusers = rooms[data.room].users
83 | }
84 | return roomusers || []
85 | }
86 |
87 | io.on('connection', socket => {
88 | // 初始化
89 | socket.on('init', (data) => {
90 | socket.emit('init', {room: getRoomList(rooms), roomusers: getRoomUsers(data)})
91 | })
92 | // 创建账户
93 | socket.on('createUser', data => {
94 | let user = new User(data)
95 | users[data] = user
96 | sockets[data] = socket
97 | })
98 | // 创建房间
99 | socket.on('createRoom', data => {
100 | socket.join(data.room, () => {
101 | let room = new Room(data.room)
102 | rooms[data.room] = room
103 | })
104 | })
105 | // 加入房间
106 | socket.on('joinRoom', data => {
107 | // socket api 加入房间 (房间名字， 回调)
108 | socket.join(data.room, () => {
109 | let user = new User(data.user)
110 | rooms[data.room].addUser(user)
111 | socket.emit('broadcast', {msg: '你已经加入了房间'})
112 | socket.to(data.room).emit('broadcast', {msg: `${data.user}已经加入了房间`})
113 | io.in(data.room).emit('joinedRoom', {roomusers: getRoomUsers(data), joinUser: data.user})
114 | io.emit('roomChange', {room: getRoomList(rooms)})
115 | })
116 | })
117 | // 离开房间
118 | socket.on('leaveRoom', data => {
119 | socket.leave(data.room, () => {
120 | rooms[data.room].deleteUser(data.user)
121 | if (!rooms[data.room].users.length) {
122 | delete rooms[data.room]
123 | }
124 | socket.emit('broadcast', {msg: '你已经离开了房间'})
125 | socket.to(data.room).emit('broadcast', {msg: `${data.user}已经离开了房间`})
126 | io.emit('roomChange', {room: getRoomList(rooms)})
127 | socket.to(data.room).emit('leaveRoom', {roomusers: getRoomUsers(data), leaveUser: data.user})
128 | })
129 | })
130 | // 准备
131 | socket.on('stateChange', (data) => {
132 | let users = rooms[data.room].users
133 | let index = users.findIndex((user) => {
134 | return user.name === data.user
135 | })
136 | users[index].state = data.state
137 | let allStated = users.every((user) => {
138 | return user.state === true
139 | })
140 | if (allStated && rooms[data.room].users.length === 2) {
141 | let room = data.room
142 | let index = rooms[room].index
143 | let users = rooms[room].users
144 | let random = Math.floor(Math.random() * 32)
145 | users[index].isoption = true
146 | rooms[room].question = question[random]
147 | sockets[users[index].name].to(room).emit('broadcast', {msg: `游戏已经开始，本轮你为猜题者`})
148 | sockets[users[index].name].emit('broadcast', {msg: `游戏已经开始，本轮你为画手`})
149 | io.to(room).emit('gameStart', {roomusers: getRoomUsers(data)})
150 | sockets[users[index].name].to(room).emit('guessPage', {question: rooms[room].question.length})
151 | sockets[users[index].name].emit('paintStart', {index: index, room: room, question: rooms[room].question})
152 | } else {
153 | io.to(data.room).emit('stateChanged', {roomusers: getRoomUsers(data)})
154 | }
155 | })
156 | socket.on('paintEnd', data => {
157 | socket.to(data.room).emit('guessStart')
158 | socket.to(data.room).emit('broadcast', {msg: '已经绘画完成，请开始猜吧'})
159 | })
160 | socket.on('submitAnswer', data => {
161 | let users = rooms[data.room].users
162 | let index = users.findIndex((user) => {
163 | return user.name === data.user
164 | })
165 | users[index].isoption = true
166 | if (data.answer === rooms[data.room].question) {
167 | users[index].addSocre()
168 | }
169 | let allOptioned = users.every((user) => {
170 | return user.isoption === true
171 | })
172 | console.log(allOptioned)
173 | if (allOptioned) {
174 | if (rooms[data.room].index === 1) {
175 | console.log('gameEnd')
176 | io.to(data.room).emit('gameEnd', {roomusers: getRoomUsers(data)})
177 | io.to(data.room).emit('broadcast', {msg: `本次游戏已经结束，请观看积分`})
178 | rooms[data.room].init()
179 | } else {
180 | rooms[data.room].index++
181 | io.to(data.room).emit('guessEnd', {roomusers: getRoomUsers(data)})
182 | io.to(data.room).emit('broadcast', {msg: `第${rooms[data.room].index}轮已经结束，答案已经公布`})
183 | }
184 | sockets[users[index].name].to(data.room).emit('showAnswer', {answer: rooms[data.room].question})
185 | }
186 | })
187 |
188 | // 关于房间nat穿透
189 | // 转发offer
190 | socket.on('offer', data => {
191 | socket.to(sockets[data.toUser].id).emit('offer', data)
192 | })
193 | // 转发answer
194 | socket.on('answer', data => {
195 | socket.to(sockets[data.toUser].id).emit('answer', data)
196 | })
197 | // 转发iceCandidate
198 | socket.on('ice', data => {
199 | socket.to(sockets[data.toUser].id).emit('ice', data)
200 | })
201 |
202 | })
203 | // 断开连接
204 | io.on('disconnect', socket => {
205 | // 当该io断开，将user在users中去除
206 | users.splice(users.indexOf(socket[socket.id]), 1)
207 | // 删除socket
208 | delete sockets[socket.id]
209 | })
210 | io.listen(app.listen(3000, () => {
211 | console.log('server start at port: ' + 3000)
212 | }))
--------------------------------------------------------------------------------
/public/index.css:
--------------------------------------------------------------------------------
1 | /* 基本配置 */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | ul li {
8 | list-style: none
9 | }
10 |
11 | html, body {
12 | background-color: #f7f7f7;
13 | position: relative;
14 | }
15 | /* 基本配置 */
16 |
17 |
18 | /* 布局 */
19 | .container {
20 | display: flex;
21 | margin: 0 auto;
22 | width: 1200px;
23 | height: 600px;
24 | border: 2px solid #f7f7f7;
25 | background-color: #fff;
26 | border-radius: 5px;
27 | }
28 |
29 | .left {
30 | width: 200px;
31 | height: 100%;
32 | position: relative;
33 | overflow: hidden;
34 | }
35 |
36 | .right {
37 | width: 350px;
38 | height: 100%;
39 | position: relative;
40 | overflow: hidden;
41 | }
42 |
43 | .center {
44 | flex: 1;
45 | background-color: #f7f7f7;
46 | position: relative;
47 | overflow: hidden;
48 | display: none;
49 | }
50 | .shade {
51 | position: fixed;
52 | display: none;
53 | width: 100vw;
54 | height: 100vh;
55 | left: 0;
56 | top: 0;
57 | z-index: 100;
58 | background-color: rgba(0, 0, 0, 0.5);
59 | }
60 | .new {
61 | margin-top: 200px;
62 | margin-left: 550px;
63 | }
64 | .new input {
65 | width: 200px;
66 | height: 30px;
67 | padding: 3px 0 3px 10px;
68 | box-sizing: border-box;
69 | position: relative;
70 | outline: none;
71 | border: 1px solid #707070;
72 | top: -10px;
73 | left: 5px;
74 | color: #707070;
75 | border-radius: 5px;
76 | }
77 | .new input + span {
78 | content: url(./images/submit.svg);
79 | width: 30px;
80 | height: 30px;
81 | margin-top: 5px;
82 | margin-left: 20px;
83 | cursor: pointer;
84 | }
85 | .shade i {
86 | content: url(./images/close.svg);
87 | width: 30px;
88 | height: 30px;
89 | margin-left: 90%;
90 | margin-top: 4%;
91 | cursor: pointer;
92 | }
93 | /* 布局 */
94 |
95 | /* 头部 */
96 | .header {
97 | width: 1200px;
98 | margin: 50px auto 0;
99 | height: 50px;
100 | border: 1px solid #fff;
101 | border-bottom: 0;
102 | overflow: hidden;
103 | text-align: right;
104 | position: relative;
105 | }
106 | .header .createUser {
107 | float: left;
108 | content: url(./images/new.svg);
109 | width: 40px;
110 | height: 40px;
111 | margin-top: 5px;
112 | margin-left: 30px;
113 | cursor: pointer;
114 | }
115 | .createUser:hover + P{
116 | top: 50%;
117 | }
118 | .createUser + p {
119 | position: absolute;
120 | top: -100%;
121 | left: 11%;
122 | transform: translate(-50%,-50%);
123 | color: #707070;
124 | font-size: 20px;
125 | transition: all 0.3s;
126 | }
127 |
128 | .user {
129 | content: url(./images/account.svg);
130 | right: 13%;
131 | width: 40px;
132 | height: 40px;
133 | margin-right: 10px;
134 | margin-top: 5px;
135 | float: right;
136 | }
137 | .user + p {
138 | font-size: 26px;
139 | height: 40px;
140 | line-height: 40px;
141 | width: 500px;
142 | float: right;
143 | text-align: right;
144 | padding-right: 20px;
145 | color: #707070;
146 | position: relative;
147 | top: 5px;
148 | }
149 | /* 头部 */
150 |
151 |
152 | /* 左侧房间列表 */
153 | .home {
154 | content: url(./images/home.svg);
155 | margin-top: 10px;
156 | margin-left: 10px;
157 | width: 35px;
158 | height: 35px;
159 | }
160 | .home:hover + span {
161 | top: 3%;
162 | }
163 | .left span {
164 | position: absolute;
165 | top: -20%;
166 | left: 30%;
167 | height: 30px;
168 | color: #707070;
169 | line-height: 30px;
170 | transform: translate(-10%, 0%);
171 | transition: all 0.3s;
172 | }
173 |
174 | .list {
175 | text-align: center;
176 | }
177 | .userList {
178 | height: 160px;
179 | }
180 | .list p {
181 | height: 40px;
182 | line-height: 40px;
183 | cursor: pointer;
184 | position: relative;
185 | }
186 |
187 | .list p:first-child {
188 | margin-top: 10px;
189 | }
190 |
191 | .list p:nth-of-type(n) {
192 | background-color: #f7f7f7;
193 | }
194 |
195 | .list p:nth-of-type(2n) {
196 | background-color: #ffffff;
197 | }
198 |
199 | .list p span {
200 | position: absolute;
201 | top: 50%;
202 | left: 80%;
203 | transform: translate(-50%, -50%);
204 | display: inline-block;
205 | border: 1px solid #707070;
206 | color: #707070;
207 | font-size: 11px;
208 | text-align: center;
209 | line-height: 20px;
210 | border-radius: 2px;
211 | height: 20px;
212 | width: 40px;
213 | }
214 | .userList p{
215 | cursor: default;
216 | }
217 | .left-bottom {
218 | position: absolute;
219 | bottom: 10px;
220 | width: 100%;
221 | height: 100px;
222 | }
223 | .roomops {
224 | float: left;
225 | width: 100%;
226 | height: 50px;
227 | position: relative;
228 | overflow: hidden;
229 | }
230 | .roomop {
231 | margin-top: 5px;
232 | cursor: pointer;
233 | }
234 | .roomop:hover + p{
235 | top: 0%;
236 | }
237 | .roomop + p {
238 | position: absolute;
239 | width: 100px;
240 | top: -100%;
241 | left: 30%;
242 | transition: all 0.3s;
243 | transform: translateY(-30%,0%);
244 | line-height: 50px;
245 | text-align: center;
246 | color: #707070;
247 | font-size: 16px;
248 | }
249 | .createRoom {
250 | margin-left: 20px;
251 | width: 40px;
252 | height: 40px;
253 | content: url(./images/newroom.svg);
254 | }
255 | .drap {
256 | width: 35px;
257 | height: 35px;
258 | margin-left: 25px;
259 | content: url(./images/drap.svg);
260 | }
261 | /* 左侧房间列表 */
262 |
263 | /* 画板区域 */
264 |
265 | .draw {
266 | content: url(./images/draw.svg);
267 | width: 35px;
268 | height: 35px;
269 | margin-top: 10px;
270 | margin-left: 50px;
271 | position: relative;
272 | }
273 |
274 | .center head {
275 | height: 55px;
276 | position: relative;
277 | overflow: hidden;
278 | }
279 | .draw:hover + p {
280 | top: 3%;
281 | }
282 |
283 | .head p {
284 | position: absolute;
285 | top: -20%;
286 | left: 15%;
287 | height: 35px;
288 | line-height: 35px;
289 | color: #707070;
290 | transition: top 0.3s;
291 | }
292 |
293 | .center ul {
294 | width: 450px;
295 | float: right;
296 | height: 40px;
297 | margin-top: 10px;
298 | }
299 |
300 | ul li {
301 | position: relative;
302 | cursor: pointer;
303 | float: left;
304 | width: 35px;
305 | height: 35px;
306 | margin-left: 15px;
307 | border-radius: 5px;
308 | border: 2px solid #707070;
309 | text-align: center;
310 | overflow: hidden;
311 | }
312 |
313 | ul li:hover {
314 | box-shadow: 1px 0px 5px #707070;
315 | }
316 | .center .head ul li:hover span {
317 | top: 50%;
318 | }
319 | .center .head ul li:nth-of-type(6):hover + .weight-select{
320 | display: inline-block;
321 | }
322 | ul li img {
323 | position: absolute;
324 | top: 50%;
325 | left: 50%;
326 | transform: translate(-50%, -50%);
327 | width: 80%;
328 | height: 80%;
329 | }
330 | .center .head ul li span {
331 | background-color: #fff;
332 | width: 30px;
333 | height: 30px;
334 | color: #707070;
335 | text-align: center;
336 | line-height: 30px;
337 | position: absolute;
338 | top: 150%;
339 | left: 50%;
340 | transform: translate(-50%,-50%);
341 | font-size: 14px;
342 | z-index: 10;
343 | transition: top 0.3s;
344 | }
345 |
346 | .weight-select {
347 | width: 40px;
348 | height: 100px;
349 | position: absolute;
350 | top: 7%;
351 | left: 74.5%;
352 | display: none;
353 | transition: all 0.3s;
354 | }
355 | .weight-select:hover {
356 | display: inline-block;
357 | }
358 | .weight-select p{
359 | position: relative;
360 | top: 0;
361 | left: 0;
362 | width: 40px;
363 | height: 20px;
364 | margin-bottom: 3px;
365 | line-height: 20px;
366 | text-align: center;
367 | background-color: #fff;
368 | cursor: pointer;
369 | }
370 | .weight-select p:first-child {
371 | margin-top: 10px;
372 | }
373 | .weight-select p:hover {
374 | background-color: #707070;
375 | color: #f7f7f7;
376 | }
377 | .center-footer {
378 | position: absolute;
379 | bottom: 5px;
380 | right: 0;
381 | width: 300px;
382 | margin-left: 10px;
383 | height: 100px;
384 | }
385 | .questionTip {
386 | font-size: 20px;
387 | color: #707070;
388 | text-align: center;
389 | /* display: inline-block; */
390 | width: 250px;
391 | height: 50px;
392 | line-height: 50px;
393 | /* position: relative; */
394 | /* top: 20px; */
395 | }
396 | .answer {
397 | outline: none;
398 | border: 1px solid#bfbfbf;
399 | border-radius: 5px;
400 | height: 25px;
401 | line-height: 25px;
402 | box-sizing: border-box;
403 | padding-left: 10px;
404 | }
405 | .answerBtn {
406 | width: 25px;
407 | height: 25px;
408 | content: url(./images/ok.svg);
409 | cursor: pointer;
410 | position: relative;
411 | margin-left: 20px;
412 | top: 8px;
413 | }
414 | .paintEnd {
415 | width: 35px;
416 | height: 35px;
417 | content: url(./images/ok.svg);
418 | cursor: pointer;
419 | margin-left: 120px;
420 | }
421 | /* 画板区域 */
422 |
423 | /* 右侧房间信息 */
424 | .right {
425 | display: none;
426 | }
427 | .right .head {
428 | vertical-align: center;
429 | }
430 | .right .head i {
431 | content: url(./images/wait.svg);
432 | width: 45px;
433 | height: 45px;
434 | margin-top: 10px;
435 | margin-left: 10px;
436 | }
437 | .right .head i:hover + p {
438 | top: 3%;
439 | }
440 | .right .head p {
441 | position: absolute;
442 | top: -20%;
443 | left: 15%;
444 | color: #707070;
445 | transition: top 0.3s;
446 | }
447 |
448 | .chat {
449 | position: relative;
450 | overflow: hidden;
451 | }
452 | .chat i {
453 | content: url(./images/chat.svg);
454 | width: 35px;
455 | height: 35px;
456 | margin-left: 20px;
457 | }
458 | .chat i:hover + p {
459 | top: 3%;
460 | }
461 | .chat i + p {
462 | position: absolute;
463 | top: -100%;
464 | left: 18%;
465 | color: #707070;
466 | transition: top 0.3s;
467 | }
468 | .chatList {
469 | margin: 0 auto;
470 | width: 310px;
471 | height: 280px;
472 | background-color: #f7f7f7;
473 | overflow:auto;
474 | }
475 | .chatList p {
476 | width: 95%;
477 | box-sizing: border-box;
478 | padding-left: 15px;
479 | display: inline-block;
480 | color: #707070;
481 | font-size: 14px;
482 | line-height: 1;
483 | word-break: normal;
484 | word-wrap: break-word;
485 | }
486 | .submit i {
487 | content: url(./images/send.svg);
488 | width: 25px;
489 | height: 25px;
490 | cursor: pointer;
491 | margin-left: 50px;
492 | }
493 | .submit {
494 | margin: 0 auto;
495 | width: 310px;
496 | height: 40px;
497 | background-color: #f7f7f7;
498 | position: relative;
499 | }
500 | .submit input {
501 | width: 200px;
502 | height: 25px;
503 | padding: 3px 0 3px 10px;
504 | color: #bfbfbf;
505 | box-sizing: border-box;
506 | position: relative;
507 | outline: none;
508 | border-radius: 5px;
509 | border: 1px solid #bfbfbf;
510 | top: -5px;
511 | left: 30px;
512 | }
513 | /* 右侧房间信息 */
514 | /* 广播 */
515 | .broadcast {
516 | position: fixed;
517 | top: 0;
518 | height: 50px;
519 | line-height: 50px;
520 | font-size: 25px;
521 | color: #707070;
522 | background-color: #f7f7f7;
523 | border-radius: 5px;
524 | text-align: right;
525 | z-index: 10;
526 | animation: broadcast 3s forwards ease-in-out;
527 | transition: all 3s;
528 | }
529 | @keyframes broadcast {
530 | 0% {
531 | right: 0;
532 | opacity: 0;
533 | }
534 | 50% {
535 | right: 50px;
536 | opacity: 1;
537 | }
538 | 75% {
539 | right: 50px;
540 | opacity: 1;
541 | }
542 | 100% {
543 | right: 0;
544 | opacity: 0;
545 | }
546 | }
547 | /* 广播 */
548 | /* video */
549 | .video {
550 | position: absolute;
551 | background-color: #fff;
552 | width: 600px;
553 | height: 400px;
554 | left: 25px;
555 | top: 70px;
556 | }
557 | /* video */
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 你画我猜
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
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 |
1px
74 |
5px
75 |
10px
76 |
30px
77 |
-
79 | 颜色
80 |
81 |
82 |
83 |
84 |
85 |
86 |
88 |
89 |
90 |
95 |
96 |
97 |
98 |
99 |
等待
100 |
准备中...
101 |
102 |
103 |
104 |
聊天
105 |
聊天室...
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |