添加三个餐厅页面
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号