添加音效和灰色失败特效

package.json

@@ -15,6 +15,7 @@
     "author": "Zhao Xin <7176466@qq.com>",
     "license": "MIT",
     "dependencies": {
+        "compression": "^1.7.4",
         "express": "^4.18.1",
         "socketio": "^1.0.0"
     },

public/client.js

@@ -28,4 +28,7 @@ player.on('status', (status) => {
     document.querySelector('#player2 .score').innerText = status.player2.score
     document.querySelector('#player1 .shape').style.backgroundImage = status.player1.shape ? `url(${status.player1.shape}.png)` : ''
     document.querySelector('#player2 .shape').style.backgroundImage = status.player2.shape ? `url(${status.player2.shape}.png)` : ''
+    document.querySelector('#player1 .shape').style.filter = status.player1.result == 'defeated' ? 'grayscale(75%)' : ''
+    document.querySelector('#player2 .shape').style.filter = status.player2.result == 'defeated' ? 'grayscale(75%)' : ''
+    document.querySelector('audio').play()
 })

public/index.html

@@ -23,6 +23,7 @@
             <div class="name">玩家乙</div>
         </div>
     </div>
+    <audio src="rock-paper-scissors.wav"></audio>
     <p><kbd>S</kbd>出剪刀 <kbd>D</kbd>出石头 <kbd>F</kbd>出布 点击自己的名字可以改名</p>
     <script src="socket.io/socket.io.js"></script>
     <script src="client.js"></script>

public/style.css

@@ -59,7 +59,7 @@ body {
     border: 1px solid #777;
     background-repeat: no-repeat;
     background-size: 200px 200px;
-    transition: background-image 1s; /* 为什么没有作用？ */
+    transition: filter 1s;
 }
 
 #player2 .shape {

server.js

@@ -2,6 +2,7 @@ const express = require('express')
 const app = express()
 const host = '0.0.0.0'
 const port = 3000
+app.use(require('compression')())
 app.use(express.static('public'))
 const server = app.listen(port, host, () => console.info(`包剪锤 http://${host}:${port}`))
 const io = require('socket.io')(server)
@@ -12,6 +13,7 @@ const status = {
         name: '玩家甲',
         score: 0,
         shape: '',
+        result: '',
         current: '',
     },
     player2: {
@@ -19,6 +21,7 @@ const status = {
         name: '玩家乙',
         score: 0,
         shape: '',
+        result: '',
         current: '',
     },
 }
@@ -29,12 +32,14 @@ io.on('connection', (client) => {
         status.player1.name = '玩家甲'
         status.player1.score = 0
         status.player1.shape = ''
+        status.player1.result = ''
         status.player1.current = ''
     } else if (!status.player2.id) {
         status.player2.id = client.id
         status.player2.name = '玩家乙'
         status.player2.score = 0
         status.player2.shape = ''
+        status.player2.result = ''
         status.player2.current = ''
     }
     io.emit('status', status)
@@ -57,9 +62,11 @@ io.on('connection', (client) => {
         }
         status.player1.score = 0
         status.player1.shape = ''
+        status.player1.result = ''
         status.player1.current = ''
         status.player2.score = 0
         status.player2.shape = ''
+        status.player2.result = ''
         status.player2.current = ''
         io.emit('status', status)
     })
@@ -78,14 +85,22 @@ io.on('connection', (client) => {
                 // 平局各加0.5分
                 status.player1.score += 0.5
                 status.player2.score += 0.5
+                status.player1.result = 'draw'
+                status.player2.result = 'draw'
             } else if (
+                // 玩家1胜利
                 (status.player1.shape == 'rock' && status.player2.shape == 'scissors') ||
                 (status.player1.shape == 'scissors' && status.player2.shape == 'paper') ||
                 (status.player1.shape == 'paper' && status.player2.shape == 'rock')
             ) {
                 status.player1.score++
+                status.player1.result = 'win'
+                status.player2.result = 'defeated'
             } else {
+                // 玩家2胜利
                 status.player2.score++
+                status.player1.result = 'defeated'
+                status.player2.result = 'win'
             }
             io.emit('status', status)
             console.table(status)