diff --git a/alexgame.html b/alexgame.html index d00473b..7bc150e 100644 --- a/alexgame.html +++ b/alexgame.html @@ -4,25 +4,29 @@ 亚历山大餐厅 - + +
- desktop + desktop
-
- louis16 +
+ alex
-
- 砍头台 +
+ alex
-
- 死 +
+ 死
@@ -90,7 +94,7 @@
- + diff --git a/alexlose.html b/alexlose.html new file mode 100644 index 0000000..dbe1817 --- /dev/null +++ b/alexlose.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/alexwin.html b/alexwin.html new file mode 100644 index 0000000..f0d7cfc --- /dev/null +++ b/alexwin.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/asset/music/bgm.mp3 b/asset/music/bgm.mp3 new file mode 100644 index 0000000..b8fe13a Binary files /dev/null and b/asset/music/bgm.mp3 differ diff --git a/choice.html b/choice.html new file mode 100644 index 0000000..3f3b798 --- /dev/null +++ b/choice.html @@ -0,0 +1,42 @@ + + + + + + 角色选择 + + + + +
+ 选择角色 + + + + + +
+ + + diff --git a/css/alexgame.css b/css/alexgame.css new file mode 100644 index 0000000..c9f975b --- /dev/null +++ b/css/alexgame.css @@ -0,0 +1,169 @@ + body { + background-image: url('../asset/pic/alexander/background.png'); + background-repeat: no-repeat; + background-color: rgb(0, 136, 109); + } + #desktop{ + position: absolute; + background-repeat: no-repeat; + } + #desktop img{ + left: -10px; + top: -10px; + position: absolute; + z-index: 2; + } + #restaurant .customer img { + position: absolute; + z-index: 0; + width: 1024px; + height: 1024px; + top:50px; + left: -100px; + } + #restaurant .dish img { + position: absolute; + top: 750px; + width: 150px; + height: 150px; + z-index: 3; + } + + #restaurant .empire img { + position: absolute; + width: 800px; + height: 800px; + z-index: 4; + } + + #alex img{ /* louis 16 */ + top: 235px; + left: 1050px; + display: none; + } + #alex1 img{ /* 断头台 */ + top: 235px; + left: 1050px; + display: none; + } + #alex2 img{ /* 死 */ + top: 235px; + left: 1050px; + display: none; + } + #dialogueBox { + position: absolute; + width: 512px; + height: 512px; + top: 50px; + left: 600px; + } + #dialogueBox img{ + position: absolute; + + width: 800px; + height: 800px; + top: -100px; + left: -100px; + display: none; + } + #dialogueText { + position: absolute; + top: 170px; + left: 100px; + width: 400px; + height: 150px; + font-size: 25px; + text-align: center; /* 水平居中 */ + + } + #hint { + position: absolute; + + width: 50px; + height: 50px; + top: 350px; + left: 1100px; + + } +#hint img{ + position: absolute; + width: 50px; + height: 50px; + z-index: 5; + display: none; + } + #hintpage img{ + position: absolute; + z-index: 5; + display: none; + } + #customer1 img{ /* 中年男 */ + display: none; + } + #customer1-2 img{ /* unhappy中年男 */ + display: none; + } + #customer1-3 img{ /* angry中年男 */ + display: none; + } + #customer2 img{ /* 小女孩 */ + top:150px !important; + display: none; + } + #customer2-2 img{ /* unhappy小女孩 */ + top:150px !important; + display: none; + } + #customer2-3 img{ /* angry小女孩 */ + top:150px !important; + display: none; + } + #customer3 img{ /* 老奶奶 */ + top:100px !important; + display: none; + } + #customer3-2 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #customer3-3 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #champagne img{ /* 香槟 */ + left: -10px; + + display: none; + } + #cheese img{ /* 芝士 */ + left: 170px; + display: none; + } + #crepe img{ + left: 380px; + display: none; + } + #foie-gras img{ + left: 590px; + display: none; + } + #onion-soup img{ + left: 750px; + top: 719px!important; + width: 181px!important; + height: 183px!important; + 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/css/elizabethgame.css b/css/elizabethgame.css new file mode 100644 index 0000000..027a190 --- /dev/null +++ b/css/elizabethgame.css @@ -0,0 +1,169 @@ + body { + background-image: url('../asset/pic/elizabeth/background.png'); + background-repeat: no-repeat; + background-color: rgb(0, 136, 109); + } + #desktop{ + position: absolute; + background-repeat: no-repeat; + } + #desktop img{ + left: -10px; + top: -10px; + position: absolute; + z-index: 2; + } + #restaurant .customer img { + position: absolute; + z-index: 0; + width: 1024px; + height: 1024px; + top:50px; + left: -100px; + } + #restaurant .dish img { + position: absolute; + top: 750px; + width: 150px; + height: 150px; + z-index: 3; + } + + #restaurant .empire img { + position: absolute; + width: 800px; + height: 800px; + z-index: 4; + } + + #elizabeth img{ /* elizabeth */ + top: 235px; + left: 1050px; + display: none; + } + #elizabeth1 img{ /* dying */ + top: 235px; + left: 1050px; + display: none; + } + #elizabeth2 img{ /* 死 */ + top: 235px; + left: 1050px; + display: none; + } + #dialogueBox { + position: absolute; + width: 512px; + height: 512px; + top: 50px; + left: 600px; + } + #dialogueBox img{ + position: absolute; + + width: 800px; + height: 800px; + top: -100px; + left: -100px; + display: none; + } + #dialogueText { + position: absolute; + top: 170px; + left: 100px; + width: 400px; + height: 150px; + font-size: 25px; + text-align: center; /* 水平居中 */ + + } + #hint { + position: absolute; + + width: 50px; + height: 50px; + top: 350px; + left: 1100px; + + } +#hint img{ + position: absolute; + width: 50px; + height: 50px; + z-index: 5; + display: none; + } + #hintpage img{ + position: absolute; + z-index: 5; + display: none; + } + #customer1 img{ /* 中年男 */ + display: none; + } + #customer1-2 img{ /* unhappy中年男 */ + display: none; + } + #customer1-3 img{ /* angry中年男 */ + display: none; + } + #customer2 img{ /* 小女孩 */ + top:150px !important; + display: none; + } + #customer2-2 img{ /* unhappy小女孩 */ + top:150px !important; + display: none; + } + #customer2-3 img{ /* angry小女孩 */ + top:150px !important; + display: none; + } + #customer3 img{ /* 老奶奶 */ + top:100px !important; + display: none; + } + #customer3-2 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #customer3-3 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #champagne img{ /* 香槟 */ + left: -10px; + + display: none; + } + #cheese img{ /* 芝士 */ + left: 170px; + display: none; + } + #crepe img{ + left: 380px; + display: none; + } + #foie-gras img{ + left: 590px; + display: none; + } + #onion-soup img{ + left: 750px; + top: 719px!important; + width: 181px!important; + height: 183px!important; + 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/css/nixongame.css b/css/nixongame.css new file mode 100644 index 0000000..0f29b90 --- /dev/null +++ b/css/nixongame.css @@ -0,0 +1,169 @@ + body { + background-image: url('../asset/pic/louis16/LouisXVI_Restaurant.png'); + background-repeat: no-repeat; + background-color: rgb(0, 136, 109); + } + #desktop{ + position: absolute; + background-repeat: no-repeat; + } + #desktop img{ + left: -10px; + top: -10px; + position: absolute; + z-index: 2; + } + #restaurant .customer img { + position: absolute; + z-index: 0; + width: 1024px; + height: 1024px; + top:50px; + left: -100px; + } + #restaurant .dish img { + position: absolute; + top: 750px; + width: 150px; + height: 150px; + z-index: 3; + } + + #restaurant .empire img { + position: absolute; + width: 800px; + height: 800px; + z-index: 4; + } + + #louis img{ /* louis 16 */ + top: 235px; + left: 1050px; + display: none; + } + #louis1 img{ /* 断头台 */ + top: 235px; + left: 1050px; + display: none; + } + #louis2 img{ /* 死 */ + top: 235px; + left: 1050px; + display: none; + } + #dialogueBox { + position: absolute; + width: 512px; + height: 512px; + top: 50px; + left: 600px; + } + #dialogueBox img{ + position: absolute; + + width: 800px; + height: 800px; + top: -100px; + left: -100px; + display: none; + } + #dialogueText { + position: absolute; + top: 170px; + left: 100px; + width: 400px; + height: 150px; + font-size: 25px; + text-align: center; /* 水平居中 */ + + } + #hint { + position: absolute; + + width: 50px; + height: 50px; + top: 350px; + left: 1100px; + + } +#hint img{ + position: absolute; + width: 50px; + height: 50px; + z-index: 5; + display: none; + } + #hintpage img{ + position: absolute; + z-index: 5; + display: none; + } + #customer1 img{ /* 中年男 */ + display: none; + } + #customer1-2 img{ /* unhappy中年男 */ + display: none; + } + #customer1-3 img{ /* angry中年男 */ + display: none; + } + #customer2 img{ /* 小女孩 */ + top:150px !important; + display: none; + } + #customer2-2 img{ /* unhappy小女孩 */ + top:150px !important; + display: none; + } + #customer2-3 img{ /* angry小女孩 */ + top:150px !important; + display: none; + } + #customer3 img{ /* 老奶奶 */ + top:100px !important; + display: none; + } + #customer3-2 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #customer3-3 img{ /* unhappy老奶奶 */ + top:100px !important; + display: none; + } + #champagne img{ /* 香槟 */ + left: -10px; + + display: none; + } + #cheese img{ /* 芝士 */ + left: 170px; + display: none; + } + #crepe img{ + left: 380px; + display: none; + } + #foie-gras img{ + left: 590px; + display: none; + } + #onion-soup img{ + left: 750px; + top: 719px!important; + width: 181px!important; + height: 183px!important; + 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/elizabethgame.html b/elizabethgame.html new file mode 100644 index 0000000..83899b0 --- /dev/null +++ b/elizabethgame.html @@ -0,0 +1,100 @@ + + + + + + 伊丽莎白餐厅 + + + + + + +
+
+ desktop +
+ + +
+ elizabeth +
+
+ dying +
+
+ 死 +
+ + +
+ 对话框 +
+ +
+ +
+
+ 提示按钮 +
+
+ 提示 +
+
+ 中年男 +
+
+ 不开心中年男 +
+
+ 生气中年男 +
+
+ 小女孩 +
+
+ 不开心小女孩 +
+
+ 生气小女孩 +
+
+ 老奶奶 +
+
+ 不开心老奶奶 +
+
+ 生气老奶奶 +
+ + +
+ 香槟 +
+
+ 芝士 +
+
+ 雪糕 +
+
+ 肥肝 +
+
+ 洋葱汤 +
+
+ + + + + diff --git a/elizabethlose.html b/elizabethlose.html new file mode 100644 index 0000000..f427f64 --- /dev/null +++ b/elizabethlose.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/elizabethwin.html b/elizabethwin.html new file mode 100644 index 0000000..25c240d --- /dev/null +++ b/elizabethwin.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/index.html b/index.html index 6d597de..f10ab76 100644 --- a/index.html +++ b/index.html @@ -31,17 +31,8 @@ diff --git a/js/alexgame.js b/js/alexgame.js new file mode 100644 index 0000000..7690a44 --- /dev/null +++ b/js/alexgame.js @@ -0,0 +1,201 @@ +// Function to show an element +function showElement(selector) { + const element = document.querySelector(selector); + if (element) { + element.style.display = 'block'; + } +} + +// Function to hide an element +function hideElement(selector){ + const element = document.querySelector(selector); + if (element) { + element.style.display = 'none'; + } +} + +const customers = [ + ["#customer1 img", "#customer1-2 img", "#customer1-3 img"], + ["#customer2 img", "#customer2-2 img", "#customer2-3 img"], + ["#customer3 img", "#customer3-2 img", "#customer3-3 img"], +] + +const RandomCustomerIndex = Math.floor(Math.random() * customers.length); + +const alexes = [ + '#alex img', + '#alex1 img', + '#alex2 img' +] + +function checkAnswer(dishName){ + var answer = answers[QAlist[currentIndex]] + return answer == dishName +} + +function handleHint(hint) { + console.log(hint + " 被点击了!"); + if (hint == "bottom") { + hideElement("#hint img") + showElement("#hintpage img") + } + if (hint == "page") { + hideElement("#hintpage img") + showElement("#hint img") + } + +} + +function handleClick(dishName) { + console.log(dishName + " 被点击了!"); + if (checkAnswer(dishName)){ + // 正确答案的处理逻辑 + console.log("恭喜，你选对了！"); + if (currentIndex == 9){ + setTimeout(function() { + window.location.href = 'alexwin.html'; + }, 2000); + + }else{ + // customer calm down + hideElement(customers[RandomCustomerIndex][failedTimes]); + showElement(customers[RandomCustomerIndex][0]); + + // alex safe + hideElement(alexes[failedTimes]) + showElement(alexes) + + failedTimes = 0; + + // display next question + currentIndex = currentIndex + 1 + var nextQuestion = questions[QAlist[currentIndex]]; + document.getElementById("dialogueText").innerHTML = nextQuestion; + console.log(answers[QAlist[currentIndex]]); + } + + } else { + // 错误答案的处理逻辑 + console.log("不幸，这不是正确答案。"); + addShakeEffect() + failedTimes = failedTimes + 1; + switch (failedTimes) { + case 1: + hideElement(customers[RandomCustomerIndex][0]) + showElement(customers[RandomCustomerIndex][1]) + + hideElement(alexes[0]) + showElement(alexes[1]) + break; + case 2: + hideElement(customers[RandomCustomerIndex][1]) + showElement(customers[RandomCustomerIndex][2]) + + break; + case 3: + hideElement(alexes[1]) + showElement(alexes[2]) + // Delay for 2 seconds before redirecting + setTimeout(function() { + window.location.href = 'alexlose.html'; + }, 2000); + // 这里可以添加结束游戏或其他逻辑 + break; + default: + console.log("失败次数：" + failedTimes); + } + } +} + +var failedTimes = 0 + +// Questions list +var questions = [ + "How to establish a unified system of metrics to strengthen centralised power?", + "How to formulate a reasonable tax policy to strengthen the national treasury?", + "How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?", + "How to enforce the policy of prohibiting private ownership of weapons?", + "How to promote a uniform writing system to strengthen cultural unity?", + "How to recruit soldiers wisely and keep the army running efficiently?", + "How to deal with political dissent arising from different ideas?", + "How to strengthen the centralised power system of the emperor?", + "How to establish and maintain an effective road transport network?", + "How to handle diplomatic relations with neighbouring countries?" + ]; + +// Answers list +var answers = [ + 'roast_duck', + 'mapo', + 'Yangzhou', + 'Chicken', + 'roast_duck', + 'Yangzhou', + 'mapo', + 'mapo', + 'Prawns', + 'Yangzhou' +] + +var QAlist = Array.from(Array(questions.length).keys()); + +// Fisher-Yates 洗牌算法 +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; // 交换元素 + } +} + +// 打乱问题数组 +shuffleArray(QAlist); + +// 当前问题索引 +var currentIndex = 0; + +// Execute on all DOM loaded +document.addEventListener("DOMContentLoaded", function() { + // Show dialogue box + showElement("#dialogueBox img"); + + // Show all dishes + showElement('#champagne img'); + showElement('#cheese img'); + showElement('#crepe img'); + showElement('#foie-gras img'); + showElement('#onion-soup img'); + + // Show a random customer + showElement(customers[RandomCustomerIndex][0]); + + // Show normal alex + showElement('#alex img'); + + // Show hint bottom + showElement('#hint img') + + // Show first question + var randomQuestion = questions[QAlist[currentIndex]]; + 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 动画时间相同 +} + +// 点击页面播放bgm +document.addEventListener('click', function play() { + document.getElementById('bgm').play(); + document.removeEventListener('click', play); +}); diff --git a/js/elizabethgame.js b/js/elizabethgame.js new file mode 100644 index 0000000..5b51db5 --- /dev/null +++ b/js/elizabethgame.js @@ -0,0 +1,201 @@ +// Function to show an element +function showElement(selector) { + const element = document.querySelector(selector); + if (element) { + element.style.display = 'block'; + } +} + +// Function to hide an element +function hideElement(selector){ + const element = document.querySelector(selector); + if (element) { + element.style.display = 'none'; + } +} + +const customers = [ + ["#customer1 img", "#customer1-2 img", "#customer1-3 img"], + ["#customer2 img", "#customer2-2 img", "#customer2-3 img"], + ["#customer3 img", "#customer3-2 img", "#customer3-3 img"], +] + +const RandomCustomerIndex = Math.floor(Math.random() * customers.length); + +const elizabethes = [ + '#elizabeth img', + '#elizabeth1 img', + '#elizabeth2 img' +] + +function checkAnswer(dishName){ + var answer = answers[QAlist[currentIndex]] + return answer == dishName +} + +function handleHint(hint) { + console.log(hint + " 被点击了!"); + if (hint == "bottom") { + hideElement("#hint img") + showElement("#hintpage img") + } + if (hint == "page") { + hideElement("#hintpage img") + showElement("#hint img") + } + +} + +function handleClick(dishName) { + console.log(dishName + " 被点击了!"); + if (checkAnswer(dishName)){ + // 正确答案的处理逻辑 + console.log("恭喜，你选对了！"); + if (currentIndex == 9){ + setTimeout(function() { + window.location.href = 'elizabethwin.html'; + }, 2000); + + }else{ + // customer calm down + hideElement(customers[RandomCustomerIndex][failedTimes]); + showElement(customers[RandomCustomerIndex][0]); + + // elizabeth safe + hideElement(elizabethes[failedTimes]) + showElement(elizabethes) + + failedTimes = 0; + + // display next question + currentIndex = currentIndex + 1 + var nextQuestion = questions[QAlist[currentIndex]]; + document.getElementById("dialogueText").innerHTML = nextQuestion; + console.log(answers[QAlist[currentIndex]]); + } + + } else { + // 错误答案的处理逻辑 + console.log("不幸，这不是正确答案。"); + addShakeEffect() + failedTimes = failedTimes + 1; + switch (failedTimes) { + case 1: + hideElement(customers[RandomCustomerIndex][0]) + showElement(customers[RandomCustomerIndex][1]) + + hideElement(elizabethes[0]) + showElement(elizabethes[1]) + break; + case 2: + hideElement(customers[RandomCustomerIndex][1]) + showElement(customers[RandomCustomerIndex][2]) + + break; + case 3: + hideElement(elizabethes[1]) + showElement(elizabethes[2]) + // Delay for 2 seconds before redirecting + setTimeout(function() { + window.location.href = 'elizabethlose.html'; + }, 2000); + // 这里可以添加结束游戏或其他逻辑 + break; + default: + console.log("失败次数：" + failedTimes); + } + } +} + +var failedTimes = 0 + +// Questions list +var questions = [ + "How to establish a unified system of metrics to strengthen centralised power?", + "How to formulate a reasonable tax policy to strengthen the national treasury?", + "How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?", + "How to enforce the policy of prohibiting private ownership of weapons?", + "How to promote a uniform writing system to strengthen cultural unity?", + "How to recruit soldiers wisely and keep the army running efficiently?", + "How to deal with political dissent arising from different ideas?", + "How to strengthen the centralised power system of the emperor?", + "How to establish and maintain an effective road transport network?", + "How to handle diplomatic relations with neighbouring countries?" + ]; + +// Answers list +var answers = [ + 'roast_duck', + 'mapo', + 'Yangzhou', + 'Chicken', + 'roast_duck', + 'Yangzhou', + 'mapo', + 'mapo', + 'Prawns', + 'Yangzhou' +] + +var QAlist = Array.from(Array(questions.length).keys()); + +// Fisher-Yates 洗牌算法 +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; // 交换元素 + } +} + +// 打乱问题数组 +shuffleArray(QAlist); + +// 当前问题索引 +var currentIndex = 0; + +// Execute on all DOM loaded +document.addEventListener("DOMContentLoaded", function() { + // Show dialogue box + showElement("#dialogueBox img"); + + // Show all dishes + showElement('#champagne img'); + showElement('#cheese img'); + showElement('#crepe img'); + showElement('#foie-gras img'); + showElement('#onion-soup img'); + + // Show a random customer + showElement(customers[RandomCustomerIndex][0]); + + // Show normal elizabeth + showElement('#elizabeth img'); + + // Show hint bottom + showElement('#hint img') + + // Show first question + var randomQuestion = questions[QAlist[currentIndex]]; + 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 动画时间相同 +} + +// 点击页面播放bgm +document.addEventListener('click', function play() { + document.getElementById('bgm').play(); + document.removeEventListener('click', play); +}); diff --git a/js/louisgame.js b/js/louisgame.js index ffa1a31..0174f46 100644 --- a/js/louisgame.js +++ b/js/louisgame.js @@ -193,3 +193,9 @@ function addShakeEffect() { }); }, 800); // 与 CSS 动画时间相同 } + +// 点击页面播放bgm +document.addEventListener('click', function play() { + document.getElementById('bgm').play(); + document.removeEventListener('click', play); +}); diff --git a/js/nixongame.js b/js/nixongame.js new file mode 100644 index 0000000..5339a3d --- /dev/null +++ b/js/nixongame.js @@ -0,0 +1,201 @@ +// Function to show an element +function showElement(selector) { + const element = document.querySelector(selector); + if (element) { + element.style.display = 'block'; + } +} + +// Function to hide an element +function hideElement(selector){ + const element = document.querySelector(selector); + if (element) { + element.style.display = 'none'; + } +} + +const customers = [ + ["#customer1 img", "#customer1-2 img", "#customer1-3 img"], + ["#customer2 img", "#customer2-2 img", "#customer2-3 img"], + ["#customer3 img", "#customer3-2 img", "#customer3-3 img"], +] + +const RandomCustomerIndex = Math.floor(Math.random() * customers.length); + +const louises = [ + '#louis img', + '#louis1 img', + '#louis2 img' +] + +function checkAnswer(dishName){ + var answer = answers[QAlist[currentIndex]] + return answer == dishName +} + +function handleHint(hint) { + console.log(hint + " 被点击了!"); + if (hint == "bottom") { + hideElement("#hint img") + showElement("#hintpage img") + } + if (hint == "page") { + hideElement("#hintpage img") + showElement("#hint img") + } + +} + +function handleClick(dishName) { + console.log(dishName + " 被点击了!"); + if (checkAnswer(dishName)){ + // 正确答案的处理逻辑 + console.log("恭喜，你选对了！"); + if (currentIndex == 9){ + setTimeout(function() { + window.location.href = 'louiswin.html'; + }, 2000); + + }else{ + // customer calm down + hideElement(customers[RandomCustomerIndex][failedTimes]); + showElement(customers[RandomCustomerIndex][0]); + + // louis safe + hideElement(louises[failedTimes]) + showElement(louises) + + failedTimes = 0; + + // display next question + currentIndex = currentIndex + 1 + var nextQuestion = questions[QAlist[currentIndex]]; + document.getElementById("dialogueText").innerHTML = nextQuestion; + console.log(answers[QAlist[currentIndex]]); + } + + } else { + // 错误答案的处理逻辑 + console.log("不幸，这不是正确答案。"); + addShakeEffect() + failedTimes = failedTimes + 1; + switch (failedTimes) { + case 1: + hideElement(customers[RandomCustomerIndex][0]) + showElement(customers[RandomCustomerIndex][1]) + + hideElement(louises[0]) + showElement(louises[1]) + break; + case 2: + hideElement(customers[RandomCustomerIndex][1]) + showElement(customers[RandomCustomerIndex][2]) + + break; + case 3: + hideElement(louises[1]) + showElement(louises[2]) + // Delay for 2 seconds before redirecting + setTimeout(function() { + window.location.href = 'louislose.html'; + }, 2000); + // 这里可以添加结束游戏或其他逻辑 + break; + default: + console.log("失败次数：" + failedTimes); + } + } +} + +var failedTimes = 0 + +// Questions list +var questions = [ + "How to establish a unified system of metrics to strengthen centralised power?", + "How to formulate a reasonable tax policy to strengthen the national treasury?", + "How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?", + "How to enforce the policy of prohibiting private ownership of weapons?", + "How to promote a uniform writing system to strengthen cultural unity?", + "How to recruit soldiers wisely and keep the army running efficiently?", + "How to deal with political dissent arising from different ideas?", + "How to strengthen the centralised power system of the emperor?", + "How to establish and maintain an effective road transport network?", + "How to handle diplomatic relations with neighbouring countries?" + ]; + +// Answers list +var answers = [ + 'roast_duck', + 'mapo', + 'Yangzhou', + 'Chicken', + 'roast_duck', + 'Yangzhou', + 'mapo', + 'mapo', + 'Prawns', + 'Yangzhou' +] + +var QAlist = Array.from(Array(questions.length).keys()); + +// Fisher-Yates 洗牌算法 +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; // 交换元素 + } +} + +// 打乱问题数组 +shuffleArray(QAlist); + +// 当前问题索引 +var currentIndex = 0; + +// Execute on all DOM loaded +document.addEventListener("DOMContentLoaded", function() { + // Show dialogue box + showElement("#dialogueBox img"); + + // Show all dishes + showElement('#champagne img'); + showElement('#cheese img'); + showElement('#crepe img'); + showElement('#foie-gras img'); + showElement('#onion-soup img'); + + // Show a random customer + showElement(customers[RandomCustomerIndex][0]); + + // Show normal louis + showElement('#louis img'); + + // Show hint bottom + showElement('#hint img') + + // Show first question + var randomQuestion = questions[QAlist[currentIndex]]; + 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 动画时间相同 +} + +// 点击页面播放bgm +document.addEventListener('click', function play() { + document.getElementById('bgm').play(); + document.removeEventListener('click', play); +}); \ No newline at end of file diff --git a/js/qinshihuanggame.js b/js/qinshihuanggame.js index 701efad..9e0888b 100644 --- a/js/qinshihuanggame.js +++ b/js/qinshihuanggame.js @@ -186,3 +186,9 @@ function addShakeEffect() { }); }, 800); // 与 CSS 动画时间相同 } + +// 点击页面播放bgm +document.addEventListener('click', function play() { + document.getElementById('bgm').play(); + document.removeEventListener('click', play); +}); diff --git a/louisgame.html b/louisgame.html index cf9604a..e75937a 100644 --- a/louisgame.html +++ b/louisgame.html @@ -8,6 +8,10 @@ +
diff --git a/nixongame.html b/nixongame.html new file mode 100644 index 0000000..b9be601 --- /dev/null +++ b/nixongame.html @@ -0,0 +1,100 @@ + + + + + + 路易十六餐厅 + + + + + + +
+
+ desktop +
+ + +
+ nixon +
+
+ nixon +
+
+ 死 +
+ + +
+ 对话框 +
+ +
+ +
+
+ 提示按钮 +
+
+ 提示 +
+
+ 中年男 +
+
+ 不开心中年男 +
+
+ 生气中年男 +
+
+ 小女孩 +
+
+ 不开心小女孩 +
+
+ 生气小女孩 +
+
+ 老奶奶 +
+
+ 不开心老奶奶 +
+
+ 生气老奶奶 +
+ + +
+ 香槟 +
+
+ 芝士 +
+
+ 雪糕 +
+
+ 肥肝 +
+
+ 洋葱汤 +
+
+ + + + + diff --git a/nixonlose.html b/nixonlose.html new file mode 100644 index 0000000..2489804 --- /dev/null +++ b/nixonlose.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/nixonwin.html b/nixonwin.html new file mode 100644 index 0000000..ce30a06 --- /dev/null +++ b/nixonwin.html @@ -0,0 +1,36 @@ + + + + + + Game Over + + + +

Game Over

+ Back to Start + + diff --git a/qinshihuanggame.html b/qinshihuanggame.html index 765e765..631dd07 100644 --- a/qinshihuanggame.html +++ b/qinshihuanggame.html @@ -8,6 +8,10 @@ +
@@ -19,7 +23,8 @@ 秦始皇
- 死法1 + 死法1
死法2 @@ -37,11 +42,13 @@
- 提示按钮 + 提示按钮
- 提示 -
+ 提示 +
中年男