diff --git a/asset/pic/louis16/LouisXVI_RestaurantTable.png b/asset/pic/louis16/LouisXVI_RestaurantTable.png
index ac4ba98..9bfb248 100644
Binary files a/asset/pic/louis16/LouisXVI_RestaurantTable.png and b/asset/pic/louis16/LouisXVI_RestaurantTable.png differ
diff --git a/css/louisgame.css b/css/louisgame.css
new file mode 100644
index 0000000..c5056e1
--- /dev/null
+++ b/css/louisgame.css
@@ -0,0 +1,165 @@
+ 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;
+ 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/louisgame.js b/js/louisgame.js
new file mode 100644
index 0000000..ffa1a31
--- /dev/null
+++ b/js/louisgame.js
@@ -0,0 +1,195 @@
+// 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 动画时间相同
+}
diff --git a/louisgame.html b/louisgame.html
index 4729a50..cf9604a 100644
--- a/louisgame.html
+++ b/louisgame.html
@@ -4,28 +4,25 @@
路易十六餐厅
-
+
-
+
-
-
+
+
-
-
+
+
-
-
-
-
-
+
+
@@ -71,29 +68,29 @@
-
-
+
+
-
+ 
+ 
+ 
+ 