添加音效和灰色失败特效

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 {