Hanlin_Huang-main #8
@ -4,25 +4,29 @@
|
|||||||
<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/louisgame.css">
|
<link rel="stylesheet" type="text/css" href="css/alexgame.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<audio id="bgm" loop>
|
||||||
|
<source src="asset/music/bgm.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
<!-- 游戏的界面元素 -->
|
<!-- 游戏的界面元素 -->
|
||||||
<div id="restaurant">
|
<div id="restaurant">
|
||||||
<div id="desktop">
|
<div id="desktop">
|
||||||
<img src="asset/pic/louis16/LouisXVI_RestaurantTable.png" alt="desktop">
|
<img src="asset/pic/alexander/desk.png" alt="desktop">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- empires elements-->
|
<!-- empires elements-->
|
||||||
<div id="louis" class="empire">
|
<div id="alex" class="empire">
|
||||||
<img src="asset/pic/louis16/LouisXVI_Normal.png" alt="louis16">
|
<img src="asset/pic/alexander/alexander.png" alt="alex">
|
||||||
</div>
|
</div>
|
||||||
<div id="louis1" class="empire">
|
<div id="alex1" class="empire">
|
||||||
<img src="asset/pic/louis16/LouisXVI_Dying.png" alt="砍头台">
|
<img src="asset/pic/alexander/alexander.png" alt="alex">
|
||||||
</div>
|
</div>
|
||||||
<div id="louis2" class="empire">
|
<div id="alex2" class="empire">
|
||||||
<img src="asset/pic/louis16/LouisXVI_Dead.png" alt="死">
|
<img src="asset/pic/alexander/typhoid_fever.png" alt="死">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- customers elements -->
|
<!-- customers elements -->
|
||||||
@ -90,7 +94,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="js/louisgame.js"></script>
|
<script src="js/alexgame.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
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/alexander/lose.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>
|
||||||
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/alexander/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>
|
||||||
BIN
asset/music/bgm.mp3
Normal file
BIN
asset/music/bgm.mp3
Normal file
Binary file not shown.
42
choice.html
Normal file
42
choice.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>角色选择</title>
|
||||||
|
<style>
|
||||||
|
.image-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block; /* 让容器的大小适应图片 */
|
||||||
|
}
|
||||||
|
.image-container img {
|
||||||
|
width: 100%; /* 可以根据需要调整 */
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.button1 { top: 500px; left: 50px; }
|
||||||
|
.button2 { top: 500px; left: 400px; }
|
||||||
|
.button3 { top: 500px; left: 800px; }
|
||||||
|
.button4 { top: 500px; left: 1200px; }
|
||||||
|
.button5 { top: 500px; left: 1550px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="image-container">
|
||||||
|
<img src="asset/pic/Character_Selection.png" alt="选择角色">
|
||||||
|
<button class="button button1" onclick="location.href='alexgame.html'">亚历山大</button>
|
||||||
|
<button class="button button2" onclick="location.href='louisgame.html'">路易十六</button>
|
||||||
|
<button class="button button3" onclick="location.href='qinshihuanggame.html'">秦始皇</button>
|
||||||
|
<button class="button button4" onclick="location.href='elizabethgame.html'">伊丽莎白</button>
|
||||||
|
<button class="button button5" onclick="location.href='nixongame.html'">尼克松</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
169
css/alexgame.css
Normal file
169
css/alexgame.css
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
body {
|
||||||
|
background-image: url('../asset/pic/alexander/background.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: rgb(0, 136, 109);
|
||||||
|
}
|
||||||
|
#desktop{
|
||||||
|
position: absolute;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
#desktop img{
|
||||||
|
left: -10px;
|
||||||
|
top: -10px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
#restaurant .customer img {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
width: 1024px;
|
||||||
|
height: 1024px;
|
||||||
|
top:50px;
|
||||||
|
left: -100px;
|
||||||
|
}
|
||||||
|
#restaurant .dish img {
|
||||||
|
position: absolute;
|
||||||
|
top: 750px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#restaurant .empire img {
|
||||||
|
position: absolute;
|
||||||
|
width: 800px;
|
||||||
|
height: 800px;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#alex img{ /* louis 16 */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#alex1 img{ /* 断头台 */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#alex2 img{ /* 死 */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#dialogueBox {
|
||||||
|
position: absolute;
|
||||||
|
width: 512px;
|
||||||
|
height: 512px;
|
||||||
|
top: 50px;
|
||||||
|
left: 600px;
|
||||||
|
}
|
||||||
|
#dialogueBox img{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 800px;
|
||||||
|
height: 800px;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#dialogueText {
|
||||||
|
position: absolute;
|
||||||
|
top: 170px;
|
||||||
|
left: 100px;
|
||||||
|
width: 400px;
|
||||||
|
height: 150px;
|
||||||
|
font-size: 25px;
|
||||||
|
text-align: center; /* 水平居中 */
|
||||||
|
|
||||||
|
}
|
||||||
|
#hint {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 350px;
|
||||||
|
left: 1100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
#hint img{
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#hintpage img{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1 img{ /* 中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1-2 img{ /* unhappy中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1-3 img{ /* angry中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2 img{ /* 小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2-2 img{ /* unhappy小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2-3 img{ /* angry小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3 img{ /* 老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3-2 img{ /* unhappy老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3-3 img{ /* unhappy老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#champagne img{ /* 香槟 */
|
||||||
|
left: -10px;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#cheese img{ /* 芝士 */
|
||||||
|
left: 170px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#crepe img{
|
||||||
|
left: 380px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#foie-gras img{
|
||||||
|
left: 590px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#onion-soup img{
|
||||||
|
left: 750px;
|
||||||
|
top: 719px!important;
|
||||||
|
width: 181px!important;
|
||||||
|
height: 183px!important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义抖动动画 */
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
|
||||||
|
20%, 40%, 60%, 80% { transform: translateX(10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.shake-animation {
|
||||||
|
animation: shake 0.8s; /* 动画持续时间 */
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
169
css/elizabethgame.css
Normal file
169
css/elizabethgame.css
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
body {
|
||||||
|
background-image: url('../asset/pic/elizabeth/background.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: rgb(0, 136, 109);
|
||||||
|
}
|
||||||
|
#desktop{
|
||||||
|
position: absolute;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
#desktop img{
|
||||||
|
left: -10px;
|
||||||
|
top: -10px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
#restaurant .customer img {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
width: 1024px;
|
||||||
|
height: 1024px;
|
||||||
|
top:50px;
|
||||||
|
left: -100px;
|
||||||
|
}
|
||||||
|
#restaurant .dish img {
|
||||||
|
position: absolute;
|
||||||
|
top: 750px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#restaurant .empire img {
|
||||||
|
position: absolute;
|
||||||
|
width: 800px;
|
||||||
|
height: 800px;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#elizabeth img{ /* elizabeth */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#elizabeth1 img{ /* dying */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#elizabeth2 img{ /* 死 */
|
||||||
|
top: 235px;
|
||||||
|
left: 1050px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#dialogueBox {
|
||||||
|
position: absolute;
|
||||||
|
width: 512px;
|
||||||
|
height: 512px;
|
||||||
|
top: 50px;
|
||||||
|
left: 600px;
|
||||||
|
}
|
||||||
|
#dialogueBox img{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 800px;
|
||||||
|
height: 800px;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#dialogueText {
|
||||||
|
position: absolute;
|
||||||
|
top: 170px;
|
||||||
|
left: 100px;
|
||||||
|
width: 400px;
|
||||||
|
height: 150px;
|
||||||
|
font-size: 25px;
|
||||||
|
text-align: center; /* 水平居中 */
|
||||||
|
|
||||||
|
}
|
||||||
|
#hint {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 350px;
|
||||||
|
left: 1100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
#hint img{
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#hintpage img{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1 img{ /* 中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1-2 img{ /* unhappy中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer1-3 img{ /* angry中年男 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2 img{ /* 小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2-2 img{ /* unhappy小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer2-3 img{ /* angry小女孩 */
|
||||||
|
top:150px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3 img{ /* 老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3-2 img{ /* unhappy老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#customer3-3 img{ /* unhappy老奶奶 */
|
||||||
|
top:100px !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#champagne img{ /* 香槟 */
|
||||||
|
left: -10px;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#cheese img{ /* 芝士 */
|
||||||
|
left: 170px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#crepe img{
|
||||||
|
left: 380px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#foie-gras img{
|
||||||
|
left: 590px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#onion-soup img{
|
||||||
|
left: 750px;
|
||||||
|
top: 719px!important;
|
||||||
|
width: 181px!important;
|
||||||
|
height: 183px!important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 定义抖动动画 */
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
|
||||||
|
20%, 40%, 60%, 80% { transform: translateX(10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.shake-animation {
|
||||||
|
animation: shake 0.8s; /* 动画持续时间 */
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
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;
|
||||||
|
}
|
||||||
100
elizabethgame.html
Normal file
100
elizabethgame.html
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<!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/elizabethgame.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<audio id="bgm" loop>
|
||||||
|
<source src="asset/music/bgm.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
<!-- 游戏的界面元素 -->
|
||||||
|
<div id="restaurant">
|
||||||
|
<div id="desktop">
|
||||||
|
<img src="asset/pic/elizabeth/desk.png" alt="desktop">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- empires elements-->
|
||||||
|
<div id="elizabeth" class="empire">
|
||||||
|
<img src="asset/pic/elizabeth/Elizabeth_normal.png" alt="elizabeth">
|
||||||
|
</div>
|
||||||
|
<div id="elizabeth1" class="empire">
|
||||||
|
<img src="asset/pic/elizabeth/Elizabeth_dangerous.png" alt="dying">
|
||||||
|
</div>
|
||||||
|
<div id="elizabeth2" class="empire">
|
||||||
|
<img src="asset/pic/elizabeth/Elizabeth_die.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/elizabethgame.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/elizabeth/lose.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>
|
||||||
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/elizabeth/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>
|
||||||
13
index.html
13
index.html
@ -31,17 +31,8 @@
|
|||||||
<button id="start-button" onclick="startGame()"></button>
|
<button id="start-button" onclick="startGame()"></button>
|
||||||
<script>
|
<script>
|
||||||
function startGame() {
|
function startGame() {
|
||||||
// 定义游戏页面的数组
|
// 跳转
|
||||||
var gamePages = ['qinshihuanggame.html', 'luoisgame.html'];
|
window.location.href = "choice.html";
|
||||||
|
|
||||||
// 生成一个随机索引
|
|
||||||
var randomIndex = Math.floor(Math.random() * gamePages.length);
|
|
||||||
|
|
||||||
// 使用随机索引从数组中选择一个游戏页面
|
|
||||||
var selectedGame = gamePages[randomIndex];
|
|
||||||
|
|
||||||
// 跳转到选中的游戏页面
|
|
||||||
window.location.href = selectedGame;
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
201
js/alexgame.js
Normal file
201
js/alexgame.js
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
// Function to show an element
|
||||||
|
function showElement(selector) {
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to hide an element
|
||||||
|
function hideElement(selector){
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const customers = [
|
||||||
|
["#customer1 img", "#customer1-2 img", "#customer1-3 img"],
|
||||||
|
["#customer2 img", "#customer2-2 img", "#customer2-3 img"],
|
||||||
|
["#customer3 img", "#customer3-2 img", "#customer3-3 img"],
|
||||||
|
]
|
||||||
|
|
||||||
|
const RandomCustomerIndex = Math.floor(Math.random() * customers.length);
|
||||||
|
|
||||||
|
const alexes = [
|
||||||
|
'#alex img',
|
||||||
|
'#alex1 img',
|
||||||
|
'#alex2 img'
|
||||||
|
]
|
||||||
|
|
||||||
|
function checkAnswer(dishName){
|
||||||
|
var answer = answers[QAlist[currentIndex]]
|
||||||
|
return answer == dishName
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHint(hint) {
|
||||||
|
console.log(hint + " 被点击了!");
|
||||||
|
if (hint == "bottom") {
|
||||||
|
hideElement("#hint img")
|
||||||
|
showElement("#hintpage img")
|
||||||
|
}
|
||||||
|
if (hint == "page") {
|
||||||
|
hideElement("#hintpage img")
|
||||||
|
showElement("#hint img")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick(dishName) {
|
||||||
|
console.log(dishName + " 被点击了!");
|
||||||
|
if (checkAnswer(dishName)){
|
||||||
|
// 正确答案的处理逻辑
|
||||||
|
console.log("恭喜，你选对了！");
|
||||||
|
if (currentIndex == 9){
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'alexwin.html';
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
}else{
|
||||||
|
// customer calm down
|
||||||
|
hideElement(customers[RandomCustomerIndex][failedTimes]);
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// alex safe
|
||||||
|
hideElement(alexes[failedTimes])
|
||||||
|
showElement(alexes)
|
||||||
|
|
||||||
|
failedTimes = 0;
|
||||||
|
|
||||||
|
// display next question
|
||||||
|
currentIndex = currentIndex + 1
|
||||||
|
var nextQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = nextQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 错误答案的处理逻辑
|
||||||
|
console.log("不幸，这不是正确答案。");
|
||||||
|
addShakeEffect()
|
||||||
|
failedTimes = failedTimes + 1;
|
||||||
|
switch (failedTimes) {
|
||||||
|
case 1:
|
||||||
|
hideElement(customers[RandomCustomerIndex][0])
|
||||||
|
showElement(customers[RandomCustomerIndex][1])
|
||||||
|
|
||||||
|
hideElement(alexes[0])
|
||||||
|
showElement(alexes[1])
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
hideElement(customers[RandomCustomerIndex][1])
|
||||||
|
showElement(customers[RandomCustomerIndex][2])
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
hideElement(alexes[1])
|
||||||
|
showElement(alexes[2])
|
||||||
|
// Delay for 2 seconds before redirecting
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'alexlose.html';
|
||||||
|
}, 2000);
|
||||||
|
// 这里可以添加结束游戏或其他逻辑
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log("失败次数：" + failedTimes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var failedTimes = 0
|
||||||
|
|
||||||
|
// Questions list
|
||||||
|
var questions = [
|
||||||
|
"How to establish a unified system of metrics to strengthen centralised power?",
|
||||||
|
"How to formulate a reasonable tax policy to strengthen the national treasury?",
|
||||||
|
"How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?",
|
||||||
|
"How to enforce the policy of prohibiting private ownership of weapons?",
|
||||||
|
"How to promote a uniform writing system to strengthen cultural unity?",
|
||||||
|
"How to recruit soldiers wisely and keep the army running efficiently?",
|
||||||
|
"How to deal with political dissent arising from different ideas?",
|
||||||
|
"How to strengthen the centralised power system of the emperor?",
|
||||||
|
"How to establish and maintain an effective road transport network?",
|
||||||
|
"How to handle diplomatic relations with neighbouring countries?"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Answers list
|
||||||
|
var answers = [
|
||||||
|
'roast_duck',
|
||||||
|
'mapo',
|
||||||
|
'Yangzhou',
|
||||||
|
'Chicken',
|
||||||
|
'roast_duck',
|
||||||
|
'Yangzhou',
|
||||||
|
'mapo',
|
||||||
|
'mapo',
|
||||||
|
'Prawns',
|
||||||
|
'Yangzhou'
|
||||||
|
]
|
||||||
|
|
||||||
|
var QAlist = Array.from(Array(questions.length).keys());
|
||||||
|
|
||||||
|
// Fisher-Yates 洗牌算法
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
let j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]]; // 交换元素
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打乱问题数组
|
||||||
|
shuffleArray(QAlist);
|
||||||
|
|
||||||
|
// 当前问题索引
|
||||||
|
var currentIndex = 0;
|
||||||
|
|
||||||
|
// Execute on all DOM loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
// Show dialogue box
|
||||||
|
showElement("#dialogueBox img");
|
||||||
|
|
||||||
|
// Show all dishes
|
||||||
|
showElement('#champagne img');
|
||||||
|
showElement('#cheese img');
|
||||||
|
showElement('#crepe img');
|
||||||
|
showElement('#foie-gras img');
|
||||||
|
showElement('#onion-soup img');
|
||||||
|
|
||||||
|
// Show a random customer
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// Show normal alex
|
||||||
|
showElement('#alex img');
|
||||||
|
|
||||||
|
// Show hint bottom
|
||||||
|
showElement('#hint img')
|
||||||
|
|
||||||
|
// Show first question
|
||||||
|
var randomQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = randomQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为所有元素添加抖动效果
|
||||||
|
function addShakeEffect() {
|
||||||
|
const allElements = document.querySelectorAll('body *'); // 选择页面上的所有元素
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.add('shake-animation');
|
||||||
|
});
|
||||||
|
// 设置定时器以在动画完成后移除抖动效果
|
||||||
|
setTimeout(() => {
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.remove('shake-animation');
|
||||||
|
});
|
||||||
|
}, 800); // 与 CSS 动画时间相同
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击页面播放bgm
|
||||||
|
document.addEventListener('click', function play() {
|
||||||
|
document.getElementById('bgm').play();
|
||||||
|
document.removeEventListener('click', play);
|
||||||
|
});
|
||||||
201
js/elizabethgame.js
Normal file
201
js/elizabethgame.js
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
// Function to show an element
|
||||||
|
function showElement(selector) {
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to hide an element
|
||||||
|
function hideElement(selector){
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const customers = [
|
||||||
|
["#customer1 img", "#customer1-2 img", "#customer1-3 img"],
|
||||||
|
["#customer2 img", "#customer2-2 img", "#customer2-3 img"],
|
||||||
|
["#customer3 img", "#customer3-2 img", "#customer3-3 img"],
|
||||||
|
]
|
||||||
|
|
||||||
|
const RandomCustomerIndex = Math.floor(Math.random() * customers.length);
|
||||||
|
|
||||||
|
const elizabethes = [
|
||||||
|
'#elizabeth img',
|
||||||
|
'#elizabeth1 img',
|
||||||
|
'#elizabeth2 img'
|
||||||
|
]
|
||||||
|
|
||||||
|
function checkAnswer(dishName){
|
||||||
|
var answer = answers[QAlist[currentIndex]]
|
||||||
|
return answer == dishName
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHint(hint) {
|
||||||
|
console.log(hint + " 被点击了!");
|
||||||
|
if (hint == "bottom") {
|
||||||
|
hideElement("#hint img")
|
||||||
|
showElement("#hintpage img")
|
||||||
|
}
|
||||||
|
if (hint == "page") {
|
||||||
|
hideElement("#hintpage img")
|
||||||
|
showElement("#hint img")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick(dishName) {
|
||||||
|
console.log(dishName + " 被点击了!");
|
||||||
|
if (checkAnswer(dishName)){
|
||||||
|
// 正确答案的处理逻辑
|
||||||
|
console.log("恭喜，你选对了！");
|
||||||
|
if (currentIndex == 9){
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'elizabethwin.html';
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
}else{
|
||||||
|
// customer calm down
|
||||||
|
hideElement(customers[RandomCustomerIndex][failedTimes]);
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// elizabeth safe
|
||||||
|
hideElement(elizabethes[failedTimes])
|
||||||
|
showElement(elizabethes)
|
||||||
|
|
||||||
|
failedTimes = 0;
|
||||||
|
|
||||||
|
// display next question
|
||||||
|
currentIndex = currentIndex + 1
|
||||||
|
var nextQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = nextQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 错误答案的处理逻辑
|
||||||
|
console.log("不幸，这不是正确答案。");
|
||||||
|
addShakeEffect()
|
||||||
|
failedTimes = failedTimes + 1;
|
||||||
|
switch (failedTimes) {
|
||||||
|
case 1:
|
||||||
|
hideElement(customers[RandomCustomerIndex][0])
|
||||||
|
showElement(customers[RandomCustomerIndex][1])
|
||||||
|
|
||||||
|
hideElement(elizabethes[0])
|
||||||
|
showElement(elizabethes[1])
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
hideElement(customers[RandomCustomerIndex][1])
|
||||||
|
showElement(customers[RandomCustomerIndex][2])
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
hideElement(elizabethes[1])
|
||||||
|
showElement(elizabethes[2])
|
||||||
|
// Delay for 2 seconds before redirecting
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'elizabethlose.html';
|
||||||
|
}, 2000);
|
||||||
|
// 这里可以添加结束游戏或其他逻辑
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log("失败次数：" + failedTimes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var failedTimes = 0
|
||||||
|
|
||||||
|
// Questions list
|
||||||
|
var questions = [
|
||||||
|
"How to establish a unified system of metrics to strengthen centralised power?",
|
||||||
|
"How to formulate a reasonable tax policy to strengthen the national treasury?",
|
||||||
|
"How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?",
|
||||||
|
"How to enforce the policy of prohibiting private ownership of weapons?",
|
||||||
|
"How to promote a uniform writing system to strengthen cultural unity?",
|
||||||
|
"How to recruit soldiers wisely and keep the army running efficiently?",
|
||||||
|
"How to deal with political dissent arising from different ideas?",
|
||||||
|
"How to strengthen the centralised power system of the emperor?",
|
||||||
|
"How to establish and maintain an effective road transport network?",
|
||||||
|
"How to handle diplomatic relations with neighbouring countries?"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Answers list
|
||||||
|
var answers = [
|
||||||
|
'roast_duck',
|
||||||
|
'mapo',
|
||||||
|
'Yangzhou',
|
||||||
|
'Chicken',
|
||||||
|
'roast_duck',
|
||||||
|
'Yangzhou',
|
||||||
|
'mapo',
|
||||||
|
'mapo',
|
||||||
|
'Prawns',
|
||||||
|
'Yangzhou'
|
||||||
|
]
|
||||||
|
|
||||||
|
var QAlist = Array.from(Array(questions.length).keys());
|
||||||
|
|
||||||
|
// Fisher-Yates 洗牌算法
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
let j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]]; // 交换元素
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打乱问题数组
|
||||||
|
shuffleArray(QAlist);
|
||||||
|
|
||||||
|
// 当前问题索引
|
||||||
|
var currentIndex = 0;
|
||||||
|
|
||||||
|
// Execute on all DOM loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
// Show dialogue box
|
||||||
|
showElement("#dialogueBox img");
|
||||||
|
|
||||||
|
// Show all dishes
|
||||||
|
showElement('#champagne img');
|
||||||
|
showElement('#cheese img');
|
||||||
|
showElement('#crepe img');
|
||||||
|
showElement('#foie-gras img');
|
||||||
|
showElement('#onion-soup img');
|
||||||
|
|
||||||
|
// Show a random customer
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// Show normal elizabeth
|
||||||
|
showElement('#elizabeth img');
|
||||||
|
|
||||||
|
// Show hint bottom
|
||||||
|
showElement('#hint img')
|
||||||
|
|
||||||
|
// Show first question
|
||||||
|
var randomQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = randomQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为所有元素添加抖动效果
|
||||||
|
function addShakeEffect() {
|
||||||
|
const allElements = document.querySelectorAll('body *'); // 选择页面上的所有元素
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.add('shake-animation');
|
||||||
|
});
|
||||||
|
// 设置定时器以在动画完成后移除抖动效果
|
||||||
|
setTimeout(() => {
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.remove('shake-animation');
|
||||||
|
});
|
||||||
|
}, 800); // 与 CSS 动画时间相同
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击页面播放bgm
|
||||||
|
document.addEventListener('click', function play() {
|
||||||
|
document.getElementById('bgm').play();
|
||||||
|
document.removeEventListener('click', play);
|
||||||
|
});
|
||||||
@ -193,3 +193,9 @@ function addShakeEffect() {
|
|||||||
});
|
});
|
||||||
}, 800); // 与 CSS 动画时间相同
|
}, 800); // 与 CSS 动画时间相同
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 点击页面播放bgm
|
||||||
|
document.addEventListener('click', function play() {
|
||||||
|
document.getElementById('bgm').play();
|
||||||
|
document.removeEventListener('click', play);
|
||||||
|
});
|
||||||
|
|||||||
201
js/nixongame.js
Normal file
201
js/nixongame.js
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
// Function to show an element
|
||||||
|
function showElement(selector) {
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to hide an element
|
||||||
|
function hideElement(selector){
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const customers = [
|
||||||
|
["#customer1 img", "#customer1-2 img", "#customer1-3 img"],
|
||||||
|
["#customer2 img", "#customer2-2 img", "#customer2-3 img"],
|
||||||
|
["#customer3 img", "#customer3-2 img", "#customer3-3 img"],
|
||||||
|
]
|
||||||
|
|
||||||
|
const RandomCustomerIndex = Math.floor(Math.random() * customers.length);
|
||||||
|
|
||||||
|
const louises = [
|
||||||
|
'#louis img',
|
||||||
|
'#louis1 img',
|
||||||
|
'#louis2 img'
|
||||||
|
]
|
||||||
|
|
||||||
|
function checkAnswer(dishName){
|
||||||
|
var answer = answers[QAlist[currentIndex]]
|
||||||
|
return answer == dishName
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHint(hint) {
|
||||||
|
console.log(hint + " 被点击了!");
|
||||||
|
if (hint == "bottom") {
|
||||||
|
hideElement("#hint img")
|
||||||
|
showElement("#hintpage img")
|
||||||
|
}
|
||||||
|
if (hint == "page") {
|
||||||
|
hideElement("#hintpage img")
|
||||||
|
showElement("#hint img")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick(dishName) {
|
||||||
|
console.log(dishName + " 被点击了!");
|
||||||
|
if (checkAnswer(dishName)){
|
||||||
|
// 正确答案的处理逻辑
|
||||||
|
console.log("恭喜，你选对了！");
|
||||||
|
if (currentIndex == 9){
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'louiswin.html';
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
}else{
|
||||||
|
// customer calm down
|
||||||
|
hideElement(customers[RandomCustomerIndex][failedTimes]);
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// louis safe
|
||||||
|
hideElement(louises[failedTimes])
|
||||||
|
showElement(louises)
|
||||||
|
|
||||||
|
failedTimes = 0;
|
||||||
|
|
||||||
|
// display next question
|
||||||
|
currentIndex = currentIndex + 1
|
||||||
|
var nextQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = nextQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 错误答案的处理逻辑
|
||||||
|
console.log("不幸，这不是正确答案。");
|
||||||
|
addShakeEffect()
|
||||||
|
failedTimes = failedTimes + 1;
|
||||||
|
switch (failedTimes) {
|
||||||
|
case 1:
|
||||||
|
hideElement(customers[RandomCustomerIndex][0])
|
||||||
|
showElement(customers[RandomCustomerIndex][1])
|
||||||
|
|
||||||
|
hideElement(louises[0])
|
||||||
|
showElement(louises[1])
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
hideElement(customers[RandomCustomerIndex][1])
|
||||||
|
showElement(customers[RandomCustomerIndex][2])
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
hideElement(louises[1])
|
||||||
|
showElement(louises[2])
|
||||||
|
// Delay for 2 seconds before redirecting
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = 'louislose.html';
|
||||||
|
}, 2000);
|
||||||
|
// 这里可以添加结束游戏或其他逻辑
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log("失败次数：" + failedTimes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var failedTimes = 0
|
||||||
|
|
||||||
|
// Questions list
|
||||||
|
var questions = [
|
||||||
|
"How to establish a unified system of metrics to strengthen centralised power?",
|
||||||
|
"How to formulate a reasonable tax policy to strengthen the national treasury?",
|
||||||
|
"How to organise and mobilise resources for the construction of the Great Wall to defend against foreign enemies?",
|
||||||
|
"How to enforce the policy of prohibiting private ownership of weapons?",
|
||||||
|
"How to promote a uniform writing system to strengthen cultural unity?",
|
||||||
|
"How to recruit soldiers wisely and keep the army running efficiently?",
|
||||||
|
"How to deal with political dissent arising from different ideas?",
|
||||||
|
"How to strengthen the centralised power system of the emperor?",
|
||||||
|
"How to establish and maintain an effective road transport network?",
|
||||||
|
"How to handle diplomatic relations with neighbouring countries?"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Answers list
|
||||||
|
var answers = [
|
||||||
|
'roast_duck',
|
||||||
|
'mapo',
|
||||||
|
'Yangzhou',
|
||||||
|
'Chicken',
|
||||||
|
'roast_duck',
|
||||||
|
'Yangzhou',
|
||||||
|
'mapo',
|
||||||
|
'mapo',
|
||||||
|
'Prawns',
|
||||||
|
'Yangzhou'
|
||||||
|
]
|
||||||
|
|
||||||
|
var QAlist = Array.from(Array(questions.length).keys());
|
||||||
|
|
||||||
|
// Fisher-Yates 洗牌算法
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
let j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]]; // 交换元素
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打乱问题数组
|
||||||
|
shuffleArray(QAlist);
|
||||||
|
|
||||||
|
// 当前问题索引
|
||||||
|
var currentIndex = 0;
|
||||||
|
|
||||||
|
// Execute on all DOM loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
// Show dialogue box
|
||||||
|
showElement("#dialogueBox img");
|
||||||
|
|
||||||
|
// Show all dishes
|
||||||
|
showElement('#champagne img');
|
||||||
|
showElement('#cheese img');
|
||||||
|
showElement('#crepe img');
|
||||||
|
showElement('#foie-gras img');
|
||||||
|
showElement('#onion-soup img');
|
||||||
|
|
||||||
|
// Show a random customer
|
||||||
|
showElement(customers[RandomCustomerIndex][0]);
|
||||||
|
|
||||||
|
// Show normal louis
|
||||||
|
showElement('#louis img');
|
||||||
|
|
||||||
|
// Show hint bottom
|
||||||
|
showElement('#hint img')
|
||||||
|
|
||||||
|
// Show first question
|
||||||
|
var randomQuestion = questions[QAlist[currentIndex]];
|
||||||
|
document.getElementById("dialogueText").innerHTML = randomQuestion;
|
||||||
|
console.log(answers[QAlist[currentIndex]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 为所有元素添加抖动效果
|
||||||
|
function addShakeEffect() {
|
||||||
|
const allElements = document.querySelectorAll('body *'); // 选择页面上的所有元素
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.add('shake-animation');
|
||||||
|
});
|
||||||
|
// 设置定时器以在动画完成后移除抖动效果
|
||||||
|
setTimeout(() => {
|
||||||
|
allElements.forEach(el => {
|
||||||
|
el.classList.remove('shake-animation');
|
||||||
|
});
|
||||||
|
}, 800); // 与 CSS 动画时间相同
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击页面播放bgm
|
||||||
|
document.addEventListener('click', function play() {
|
||||||
|
document.getElementById('bgm').play();
|
||||||
|
document.removeEventListener('click', play);
|
||||||
|
});
|
||||||
@ -186,3 +186,9 @@ function addShakeEffect() {
|
|||||||
});
|
});
|
||||||
}, 800); // 与 CSS 动画时间相同
|
}, 800); // 与 CSS 动画时间相同
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 点击页面播放bgm
|
||||||
|
document.addEventListener('click', function play() {
|
||||||
|
document.getElementById('bgm').play();
|
||||||
|
document.removeEventListener('click', play);
|
||||||
|
});
|
||||||
|
|||||||
@ -8,6 +8,10 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<audio id="bgm" loop>
|
||||||
|
<source src="asset/music/bgm.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
<!-- 游戏的界面元素 -->
|
<!-- 游戏的界面元素 -->
|
||||||
<div id="restaurant">
|
<div id="restaurant">
|
||||||
<div id="desktop">
|
<div id="desktop">
|
||||||
|
|||||||
100
nixongame.html
Normal file
100
nixongame.html
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<!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/nixongame.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<audio id="bgm" loop>
|
||||||
|
<source src="asset/music/bgm.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
<!-- 游戏的界面元素 -->
|
||||||
|
<div id="restaurant">
|
||||||
|
<div id="desktop">
|
||||||
|
<img src="asset/pic/louis16/LouisXVI_RestaurantTable.png" alt="desktop">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- empires elements-->
|
||||||
|
<div id="nixon" class="empire">
|
||||||
|
<img src="asset/pic/nixon/nixon_normal.png" alt="nixon">
|
||||||
|
</div>
|
||||||
|
<div id="louis1" class="empire">
|
||||||
|
<img src="asset/pic/nixon/nixon_normal.png" alt="nixon">
|
||||||
|
</div>
|
||||||
|
<div id="louis2" class="empire">
|
||||||
|
<img src="asset/pic/nixon/nixon_die.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/nixongame.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/nixon/lose.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>
|
||||||
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/nixon/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>
|
||||||
@ -8,6 +8,10 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<audio id="bgm" loop>
|
||||||
|
<source src="asset/music/bgm.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
<!-- 游戏的界面元素 -->
|
<!-- 游戏的界面元素 -->
|
||||||
<div id="restaurant">
|
<div id="restaurant">
|
||||||
<div id="desktop">
|
<div id="desktop">
|
||||||
@ -19,7 +23,8 @@
|
|||||||
<img src="asset/pic/qinshihuang/QinShiHuang.png" alt="秦始皇">
|
<img src="asset/pic/qinshihuang/QinShiHuang.png" alt="秦始皇">
|
||||||
</div>
|
</div>
|
||||||
<div id="qinshihuang1" class="empire">
|
<div id="qinshihuang1" class="empire">
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang_LeadPoisoning.png" alt="死法1">
|
<img src="asset/pic/qinshihuang/QinShiHuang_LeadPoisoning.png"
|
||||||
|
alt="死法1">
|
||||||
</div>
|
</div>
|
||||||
<div id="qinshihuang2" class="empire">
|
<div id="qinshihuang2" class="empire">
|
||||||
<img src="asset/pic/qinshihuang/QinShiHuang_Meningitis.png" alt="死法2">
|
<img src="asset/pic/qinshihuang/QinShiHuang_Meningitis.png" alt="死法2">
|
||||||
@ -37,11 +42,13 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="hint" class="hint">
|
<div id="hint" class="hint">
|
||||||
<img src="asset/pic/qinshihuang/hint_bottom.png" alt="提示按钮" onclick="handleHint('bottom');">
|
<img src="asset/pic/qinshihuang/hint_bottom.png" alt="提示按钮"
|
||||||
|
onclick="handleHint('bottom');">
|
||||||
</div>
|
</div>
|
||||||
<div id="hintpage" class="hintpage">
|
<div id="hintpage" class="hintpage">
|
||||||
<img src="asset/pic/qinshihuang/hint_page.png" alt="提示" onclick="handleHint('page');">
|
<img src="asset/pic/qinshihuang/hint_page.png" alt="提示"
|
||||||
</div>
|
onclick="handleHint('page');">
|
||||||
|
</div>
|
||||||
<div id="customer1" class="customer">
|
<div id="customer1" class="customer">
|
||||||
<img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
|
<img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user
粤公网安备44010602013451号