添加三个餐厅页面
This commit is contained in:
parent
4e867337f0
commit
c4c9af9c14
36
alexlose.html
Normal file
36
alexlose.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/louis16/lose.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
36
alexwin.html
Normal file
36
alexwin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/luois16/win.jpg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
169
css/alexgame.css
Normal file
169
css/alexgame.css
Normal file
@ -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;
|
||||
}
|
||||
169
css/elizabethgame.css
Normal file
169
css/elizabethgame.css
Normal file
@ -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;
|
||||
}
|
||||
169
css/nixongame.css
Normal file
169
css/nixongame.css
Normal file
@ -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;
|
||||
}
|
||||
96
elizabethgame.html
Normal file
96
elizabethgame.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>路易十六餐厅</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/louisgame.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- 游戏的界面元素 -->
|
||||
<div id="restaurant">
|
||||
<div id="desktop">
|
||||
<img src="asset/pic/louis16/LouisXVI_RestaurantTable.png" alt="desktop">
|
||||
</div>
|
||||
|
||||
<!-- empires elements-->
|
||||
<div id="louis" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Normal.png" alt="louis16">
|
||||
</div>
|
||||
<div id="louis1" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Dying.png" alt="砍头台">
|
||||
</div>
|
||||
<div id="louis2" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Dead.png" alt="死">
|
||||
</div>
|
||||
|
||||
<!-- customers elements -->
|
||||
<div id="dialogueBox" class="dialogueBox">
|
||||
<img src="asset/pic/qinshihuang/DialogueBox.png" alt="对话框">
|
||||
<div id="dialogueText" class="dialogueText">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="hint" class="hint">
|
||||
<img src="asset/pic/qinshihuang/hint_bottom.png" alt="提示按钮" onclick="handleHint('bottom');">
|
||||
</div>
|
||||
<div id="hintpage" class="hintpage">
|
||||
<img src="asset/pic/qinshihuang/hint_page.png" alt="提示" onclick="handleHint('page');">
|
||||
</div>
|
||||
<div id="customer1" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
|
||||
</div>
|
||||
<div id="customer1-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyYoungMan.png" alt="不开心中年男">
|
||||
</div>
|
||||
<div id="customer1-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryYoungMan.png" alt="生气中年男">
|
||||
</div>
|
||||
<div id="customer2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer2_LittleGirl.png" alt="小女孩">
|
||||
</div>
|
||||
<div id="customer2-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyLittleGirl.png" alt="不开心小女孩">
|
||||
</div>
|
||||
<div id="customer2-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryLittleGirl.png" alt="生气小女孩">
|
||||
</div>
|
||||
<div id="customer3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer3_OldLady.png" alt="老奶奶">
|
||||
</div>
|
||||
<div id="customer3-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyGrandma.png" alt="不开心老奶奶">
|
||||
</div>
|
||||
<div id="customer3-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryGrandma.png" alt="生气老奶奶">
|
||||
</div>
|
||||
|
||||
<!-- foods elements -->
|
||||
<div id="champagne" class="dish">
|
||||
<img src="asset/pic/louis16/Champagne.png" alt="香槟"
|
||||
onclick="handleClick('cham');">
|
||||
</div>
|
||||
<div id="cheese" class="dish">
|
||||
<img src="asset/pic/louis16/BrieCheese.png" alt="芝士"
|
||||
onclick="handleClick('cheese');">
|
||||
</div>
|
||||
<div id="crepe" class="dish">
|
||||
<img src="asset/pic/louis16/Crepe.png" alt="雪糕"
|
||||
onclick="handleClick('crepe');">
|
||||
</div>
|
||||
<div id="foie-gras" class="dish">
|
||||
<img src="asset/pic/louis16/FoieGras.png" alt="肥肝"
|
||||
onclick="handleClick('foiegras');">
|
||||
</div>
|
||||
<div id="onion-soup" class="dish">
|
||||
<img src="asset/pic/louis16/FrenchOnionSoup.png" alt="洋葱汤"
|
||||
onclick="handleClick('onionsoup');">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/louisgame.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
elizabethlose.html
Normal file
36
elizabethlose.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/louis16/lose.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
36
elizabethwin.html
Normal file
36
elizabethwin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/luois16/win.jpg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
195
js/alexgame.js
Normal file
195
js/alexgame.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 动画时间相同
|
||||
}
|
||||
195
js/elizabethgame.js
Normal file
195
js/elizabethgame.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 动画时间相同
|
||||
}
|
||||
195
js/nixongame.js
Normal file
195
js/nixongame.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 动画时间相同
|
||||
}
|
||||
96
nixongame.html
Normal file
96
nixongame.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>路易十六餐厅</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/louisgame.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- 游戏的界面元素 -->
|
||||
<div id="restaurant">
|
||||
<div id="desktop">
|
||||
<img src="asset/pic/louis16/LouisXVI_RestaurantTable.png" alt="desktop">
|
||||
</div>
|
||||
|
||||
<!-- empires elements-->
|
||||
<div id="louis" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Normal.png" alt="louis16">
|
||||
</div>
|
||||
<div id="louis1" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Dying.png" alt="砍头台">
|
||||
</div>
|
||||
<div id="louis2" class="empire">
|
||||
<img src="asset/pic/louis16/LouisXVI_Dead.png" alt="死">
|
||||
</div>
|
||||
|
||||
<!-- customers elements -->
|
||||
<div id="dialogueBox" class="dialogueBox">
|
||||
<img src="asset/pic/qinshihuang/DialogueBox.png" alt="对话框">
|
||||
<div id="dialogueText" class="dialogueText">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="hint" class="hint">
|
||||
<img src="asset/pic/qinshihuang/hint_bottom.png" alt="提示按钮" onclick="handleHint('bottom');">
|
||||
</div>
|
||||
<div id="hintpage" class="hintpage">
|
||||
<img src="asset/pic/qinshihuang/hint_page.png" alt="提示" onclick="handleHint('page');">
|
||||
</div>
|
||||
<div id="customer1" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
|
||||
</div>
|
||||
<div id="customer1-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyYoungMan.png" alt="不开心中年男">
|
||||
</div>
|
||||
<div id="customer1-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryYoungMan.png" alt="生气中年男">
|
||||
</div>
|
||||
<div id="customer2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer2_LittleGirl.png" alt="小女孩">
|
||||
</div>
|
||||
<div id="customer2-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyLittleGirl.png" alt="不开心小女孩">
|
||||
</div>
|
||||
<div id="customer2-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryLittleGirl.png" alt="生气小女孩">
|
||||
</div>
|
||||
<div id="customer3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/Customer3_OldLady.png" alt="老奶奶">
|
||||
</div>
|
||||
<div id="customer3-2" class="customer">
|
||||
<img src="asset/pic/qinshihuang/UnhappyGrandma.png" alt="不开心老奶奶">
|
||||
</div>
|
||||
<div id="customer3-3" class="customer">
|
||||
<img src="asset/pic/qinshihuang/AngryGrandma.png" alt="生气老奶奶">
|
||||
</div>
|
||||
|
||||
<!-- foods elements -->
|
||||
<div id="champagne" class="dish">
|
||||
<img src="asset/pic/louis16/Champagne.png" alt="香槟"
|
||||
onclick="handleClick('cham');">
|
||||
</div>
|
||||
<div id="cheese" class="dish">
|
||||
<img src="asset/pic/louis16/BrieCheese.png" alt="芝士"
|
||||
onclick="handleClick('cheese');">
|
||||
</div>
|
||||
<div id="crepe" class="dish">
|
||||
<img src="asset/pic/louis16/Crepe.png" alt="雪糕"
|
||||
onclick="handleClick('crepe');">
|
||||
</div>
|
||||
<div id="foie-gras" class="dish">
|
||||
<img src="asset/pic/louis16/FoieGras.png" alt="肥肝"
|
||||
onclick="handleClick('foiegras');">
|
||||
</div>
|
||||
<div id="onion-soup" class="dish">
|
||||
<img src="asset/pic/louis16/FrenchOnionSoup.png" alt="洋葱汤"
|
||||
onclick="handleClick('onionsoup');">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/louisgame.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
nixonlose.html
Normal file
36
nixonlose.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/louis16/lose.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
36
nixonwin.html
Normal file
36
nixonwin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game Over</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
background-image: url("asset/pic/luois16/win.jpg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.btn {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
top: 350px;
|
||||
left: 825px;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 290px;
|
||||
left: 810px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game Over</h1>
|
||||
<a href="index.html" class="btn">Back to Start</a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user
粤公网安备44010602013451号