diff --git a/css/game.css b/css/game.css index a215c29..b612bc8 100644 --- a/css/game.css +++ b/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; +} diff --git a/js/game.js b/js/game.js index cde4770..34cabc2 100644 --- a/js/game.js +++ b/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 动画时间相同 +}