82 lines
2.2 KiB
HTML
82 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>秦始皇餐厅</title>
|
|
<style>
|
|
body {
|
|
background-image: url('src/pic/desktop.png');
|
|
background-repeat: no-repeat;
|
|
}
|
|
#desktop{
|
|
background-image: url('src/pic/background.png');
|
|
background-repeat: no-repeat;
|
|
}
|
|
#restaurant .character img {
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 1024px;
|
|
height: 1024px;
|
|
}
|
|
#restaurant .dish img {
|
|
position: absolute;
|
|
left: 1000px;
|
|
width: 512px;
|
|
height: 512px;
|
|
}
|
|
/* 根据图片实际位置调整left和top值 */
|
|
#customer1 { /* 中年男 */
|
|
left: 100px;
|
|
top: 200px;
|
|
}
|
|
#customer2 { /* 小女孩 */
|
|
left: 200px;
|
|
top: 200px;
|
|
}
|
|
#customer3 { /* 老奶奶 */
|
|
left: 300px;
|
|
top: 200px;
|
|
}
|
|
#mapo-tofu { /* 麻婆豆腐 */
|
|
left: 400px;
|
|
top: 500px;
|
|
}
|
|
#roast-duck { /* 烤鸭 */
|
|
left: 500px;
|
|
top: 500px;
|
|
/*display: none; /* 一开始不显示烤鸭 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 游戏的界面元素 -->
|
|
<div id="restaurant">
|
|
<div id="desktop">
|
|
<img src="src/pic/desktop.png" alt="desktop">
|
|
</div>
|
|
<div id="customer1" class="character">
|
|
<img src="src/pic/Customer1_YoungMan.png" alt="中年男">
|
|
</div>
|
|
<div id="customer2" class="character">
|
|
<img src="src/pic/Customer2_LittleGirl.png" alt="小女孩">
|
|
</div>
|
|
<div id="customer3" class="character">
|
|
<img src="src/pic/Customer3_OldLady.png" alt="老奶奶">
|
|
</div>
|
|
<div id="mapo-tofu" class="dish">
|
|
<img src="src/pic/MapoTofu_FinishedDish.png" alt="麻婆豆腐">
|
|
</div>
|
|
<div id="roast-duck" class="dish">
|
|
<img src="src/pic/roast_duck.png" alt="烤鸭">
|
|
</div>
|
|
<!-- 在这里添加您的餐厅布局和游戏元素 -->
|
|
</div>
|
|
|
|
<script>
|
|
// 在这里添加您的游戏逻辑
|
|
// 这将涉及到食客的随机出现，接受订单，点击生成食物，以及满足订单后消失的逻辑
|
|
</script>
|
|
</body>
|
|
</html>
|