feat: add shake effect

css/game.css

@@ -5,8 +5,10 @@
   }
   #desktop{
     position: absolute;
-    /*background-image: url('../asset/pic/qinshihuang/desktop.png');*/
     background-repeat: no-repeat;
+  }
+  #desktop img{
+    position: absolute;
     z-index: 1;
   }
   #restaurant .customer img {
@@ -157,3 +159,15 @@
   #kung-pao-chicken img{
     display: none;
   }
+
+/* 定义抖动动画 */
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+    20%, 40%, 60%, 80% { transform: translateX(10px); }
+}
+
+.shake-animation {
+    animation: shake 0.8s; /* 动画持续时间 */
+    animation-timing-function: ease-in-out;
+}

js/game.js

@@ -74,6 +74,7 @@ function handleClick(dishName) {
     } else {
         // 错误答案的处理逻辑
         console.log("不幸，这不是正确答案。");
+        addShakeEffect()
         failedTimes = failedTimes + 1;
         switch (failedTimes) {
             case 1:
@@ -171,3 +172,17 @@ document.addEventListener("DOMContentLoaded", function() {
     document.getElementById("dialogueText").innerHTML = randomQuestion;
     console.log(answers[QAlist[currentIndex]]);
 });
+
+// 为所有元素添加抖动效果
+function addShakeEffect() {
+    const allElements = document.querySelectorAll('body *'); // 选择页面上的所有元素
+    allElements.forEach(el => {
+        el.classList.add('shake-animation');
+    });
+    // 设置定时器以在动画完成后移除抖动效果
+    setTimeout(() => {
+        allElements.forEach(el => {
+            el.classList.remove('shake-animation');
+        });
+    }, 800); // 与 CSS 动画时间相同
+}