feat: add bgm

This commit is contained in:
sangge 2023-12-24 02:44:05 +08:00
parent 3386f1ec3c
commit 3bb0b0b753
11 changed files with 57 additions and 4 deletions

View File

@ -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">

BIN
asset/music/bgm.mp3 Normal file

Binary file not shown.

View File

@ -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">

View File

@ -193,3 +193,9 @@ function addShakeEffect() {
}); });
}, 800); // 与 CSS 动画时间相同 }, 800); // 与 CSS 动画时间相同
} }
// 点击页面播放bgm
document.addEventListener('click', function play() {
document.getElementById('bgm').play();
document.removeEventListener('click', play);
});

View File

@ -193,3 +193,9 @@ function addShakeEffect() {
}); });
}, 800); // 与 CSS 动画时间相同 }, 800); // 与 CSS 动画时间相同
} }
// 点击页面播放bgm
document.addEventListener('click', function play() {
document.getElementById('bgm').play();
document.removeEventListener('click', play);
});

View File

@ -193,3 +193,9 @@ function addShakeEffect() {
}); });
}, 800); // 与 CSS 动画时间相同 }, 800); // 与 CSS 动画时间相同
} }
// 点击页面播放bgm
document.addEventListener('click', function play() {
document.getElementById('bgm').play();
document.removeEventListener('click', play);
});

View File

@ -193,3 +193,9 @@ function addShakeEffect() {
}); });
}, 800); // 与 CSS 动画时间相同 }, 800); // 与 CSS 动画时间相同
} }
// 点击页面播放bgm
document.addEventListener('click', function play() {
document.getElementById('bgm').play();
document.removeEventListener('click', play);
});

View File

@ -186,3 +186,9 @@ function addShakeEffect() {
}); });
}, 800); // 与 CSS 动画时间相同 }, 800); // 与 CSS 动画时间相同
} }
// 点击页面播放bgm
document.addEventListener('click', function play() {
document.getElementById('bgm').play();
document.removeEventListener('click', play);
});

View File

@ -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">

View File

@ -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">

View File

@ -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>