hhl_project/game.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('asset/pic/desktop.png');
    background-repeat: no-repeat;
  }
  #desktop{
    background-image: url('asset/pic/background.png');
    background-repeat: no-repeat;
  }
  #restaurant .character img {
    position: absolute;
    width: 1024px;
    height: 1024px;
  }
  #restaurant .dish img {
    position: absolute;
    left: 1000px;
    width: 512px;
    height: 512px;
  }

  #qinshihuang img{ /* 秦始皇 */
    left: 100px;
    display: none;
  }
  #customer1 img{ /* 中年男 */
    left: 800px;
    display: none;
  }
  #customer2 img{ /* 小女孩 */
    left: 800px;
    display: none;
  }
  #customer3 img{ /* 老奶奶 */
    left: 800px;

  }
  #mapo-tofu img{ /* 麻婆豆腐 */

    top: 500px;
    display: none;
  }
  #roast-duck img{ /* 烤鸭 */

    top: 500px;
    display: none;

  }
</style>
    </head>
    <body>
        <!-- 游戏的界面元素 -->
        <div id="restaurant">
            <div id="desktop">
              <img src="asset/pic/desktop.png" alt="desktop">
            </div>

            <!-- empires elements-->
            <div id="qinshihuang" class="character">
                <img src="asset/pic/QinShiHuang.png" alt="秦始皇">
            </div>

            <!-- customers elements -->
            <div id="customer1" class="character">
                <img src="asset/pic/Customer1_YoungMan.png" alt="中年男">
            </div>
            <div id="customer2" class="character">
                <img src="asset/pic/Customer2_LittleGirl.png" alt="小女孩">
            </div>
            <div id="customer3" class="character">
                <img src="asset/pic/Customer3_OldLady.png" alt="老奶奶">
            </div>

            <!-- foods elements -->
            <div id="mapo-tofu" class="dish">
                <img src="asset/pic/MapoTofu_FinishedDish.png" alt="麻婆豆腐">
            </div>
            <div id="roast-duck" class="dish">
                <img src="asset/pic/roast_duck.png" alt="烤鸭">
            </div>
            <!-- 在这里添加您的餐厅布局和游戏元素 -->
        </div>

        <script>
// 在这里添加您的游戏逻辑
// 这将涉及到食客的随机出现，接受订单，点击生成食物，以及满足订单后消失的逻辑
</script>
    </body>
</html>