添加音效和灰色失败特效

package-lock.json

@@ -9,6 +9,7 @@
             "version": "0.1.0",
             "license": "MIT",
             "dependencies": {
+                "compression": "^1.7.4",
                 "express": "^4.18.1",
                 "socketio": "^1.0.0"
             },
@@ -229,6 +230,47 @@
             "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
             "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
         },
+        "node_modules/compressible": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+            "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+            "dependencies": {
+                "mime-db": ">= 1.43.0 < 2"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/compression": {
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+            "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+            "dependencies": {
+                "accepts": "~1.3.5",
+                "bytes": "3.0.0",
+                "compressible": "~2.0.16",
+                "debug": "2.6.9",
+                "on-headers": "~1.0.2",
+                "safe-buffer": "5.1.2",
+                "vary": "~1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/compression/node_modules/bytes": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+            "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/compression/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -870,6 +912,14 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/on-headers": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+            "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/options": {
             "version": "0.0.6",
             "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
@@ -1526,6 +1576,40 @@
             "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
             "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
         },
+        "compressible": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+            "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+            "requires": {
+                "mime-db": ">= 1.43.0 < 2"
+            }
+        },
+        "compression": {
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+            "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+            "requires": {
+                "accepts": "~1.3.5",
+                "bytes": "3.0.0",
+                "compressible": "~2.0.16",
+                "debug": "2.6.9",
+                "on-headers": "~1.0.2",
+                "safe-buffer": "5.1.2",
+                "vary": "~1.1.2"
+            },
+            "dependencies": {
+                "bytes": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+                    "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
+                },
+                "safe-buffer": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                    "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+                }
+            }
+        },
         "concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2027,6 +2111,11 @@
                 "ee-first": "1.1.1"
             }
         },
+        "on-headers": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+            "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+        },
         "options": {
             "version": "0.0.6",
             "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",

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)