diff --git a/public/client.js b/public/client.js
index 7615b31..38861ba 100644
--- a/public/client.js
+++ b/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()
 })
diff --git a/public/index.html b/public/index.html
index 292a6e0..75c9505 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/rock-paper-scissors.wav b/public/rock-paper-scissors.wav
new file mode 100644
index 0000000..d9afaf0
Binary files /dev/null and b/public/rock-paper-scissors.wav differ
diff --git a/public/style.css b/public/style.css
index 7b39755..2fdec43 100644
--- a/public/style.css
+++ b/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 {