feat: update louis
This commit is contained in:
parent
cc388b5e56
commit
0581b853df
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 525 KiB |
165
css/louisgame.css
Normal file
165
css/louisgame.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
195
js/louisgame.js
Normal file
195
js/louisgame.js
Normal file
@ -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 动画时间相同
|
||||||
|
}
|
||||||
@ -4,28 +4,25 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>路易十六餐厅</title>
|
<title>路易十六餐厅</title>
|
||||||
<link rel="stylesheet" type="text/css" href="css/qinshihuanggame.css">
|
<link rel="stylesheet" type="text/css" href="css/louisgame.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- 游戏的界面元素 -->
|
<!-- 游戏的界面元素 -->
|
||||||
<div id="restaurant">
|
<div id="restaurant">
|
||||||
<div id="desktop">
|
<div id="desktop">
|
||||||
<img src="asset/pic/qinshihuang/desktop.png" alt="desktop">
|
<img src="asset/pic/louis16/LouisXVI_RestaurantTable.png" alt="desktop">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- empires elements-->
|
<!-- empires elements-->
|
||||||
<div id="qinshihuang" class="empire">
|
<div id="louis" class="empire">
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang.png" alt="秦始皇">
|
<img src="asset/pic/louis16/LouisXVI_Normal.png" alt="louis16">
|
||||||
</div>
|
</div>
|
||||||
<div id="qinshihuang1" class="empire">
|
<div id="louis1" class="empire">
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang_LeadPoisoning.png" alt="死法1">
|
<img src="asset/pic/louis16/LouisXVI_Dying.png" alt="砍头台">
|
||||||
</div>
|
</div>
|
||||||
<div id="qinshihuang2" class="empire">
|
<div id="louis2" class="empire">
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang_Meningitis.png" alt="死法2">
|
<img src="asset/pic/louis16/LouisXVI_Dead.png" alt="死">
|
||||||
</div>
|
|
||||||
<div id="qinshihuang3" class="empire">
|
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang_Murder.png" alt="死法3">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- customers elements -->
|
<!-- customers elements -->
|
||||||
@ -71,29 +68,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- foods elements -->
|
<!-- foods elements -->
|
||||||
<div id="mapo-tofu" class="dish">
|
<div id="champagne" class="dish">
|
||||||
<img src="asset/pic/qinshihuang/MapoTofu_FinishedDish.png" alt="麻婆豆腐"
|
<img src="asset/pic/louis16/Champagne.png" alt="香槟"
|
||||||
onclick="handleClick('mapo');">
|
onclick="handleClick('cham');">
|
||||||
</div>
|
</div>
|
||||||
<div id="roast-duck" class="dish">
|
<div id="cheese" class="dish">
|
||||||
<img src="asset/pic/qinshihuang/roast_duck.png" alt="烤鸭"
|
<img src="asset/pic/louis16/BrieCheese.png" alt="芝士"
|
||||||
onclick="handleClick('roast_duck');">
|
onclick="handleClick('cheese');">
|
||||||
</div>
|
</div>
|
||||||
<div id="yangzhou-fried-rice" class="dish">
|
<div id="crepe" class="dish">
|
||||||
<img src="asset/pic/qinshihuang/YangzhouFriedRice.png" alt="扬州炒饭"
|
<img src="asset/pic/louis16/Crepe.png" alt="雪糕"
|
||||||
onclick="handleClick('Yangzhou');">
|
onclick="handleClick('crepe');">
|
||||||
</div>
|
</div>
|
||||||
<div id="braised-prawns" class="dish">
|
<div id="foie-gras" class="dish">
|
||||||
<img src="asset/pic/qinshihuang/BraisedPrawns.png" alt="油焖大虾"
|
<img src="asset/pic/louis16/FoieGras.png" alt="肥肝"
|
||||||
onclick="handleClick('Prawns');">
|
onclick="handleClick('foiegras');">
|
||||||
</div>
|
</div>
|
||||||
<div id="kung-pao-chicken" class="dish">
|
<div id="onion-soup" class="dish">
|
||||||
<img src="asset/pic/qinshihuang/KungPaoChicken.png" alt="宫保鸡丁"
|
<img src="asset/pic/louis16/FrenchOnionSoup.png" alt="洋葱汤"
|
||||||
onclick="handleClick('Chicken');">
|
onclick="handleClick('onionsoup');">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="js/qinshihuanggame.js"></script>
|
<script src="js/louisgame.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
body {
|
body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
background-image: url("asset/pic/luois16/lose.png");
|
background-image: url("asset/pic/louis16/lose.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.btn {
|
.btn {
|
||||||
Loading…
x
Reference in New Issue
Block a user