feat: Implement sound system and toggle functionality
All checks were successful
Build and Publish Docker Image / Build and Validate (pull_request) Successful in 8s
All checks were successful
Build and Publish Docker Image / Build and Validate (pull_request) Successful in 8s
- Introduced SoundSystem to manage sound events using the Web Audio API. - Added SoundEvent component to represent different sound types (e.g., coin, damage, powerup). - Integrated sound event emissions in the Game class for various actions (e.g., collecting coins, taking damage). - Updated UI to include a sound status indicator with toggle functionality using the 'M' key. - Enhanced game experience with background music and sound effects for actions, improving player engagement. This update enriches the gameplay by adding audio feedback, enhancing the overall user experience.
This commit is contained in:
parent
4220e216e1
commit
e638ae4d6d
6 changed files with 720 additions and 5 deletions
23
index.html
23
index.html
|
|
@ -96,6 +96,20 @@
|
|||
z-index: 100;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
#soundStatus {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 100px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
user-select: none;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#soundStatus:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#perfMonitor {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
|
|
@ -125,6 +139,11 @@
|
|||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
#soundStatus {
|
||||
top: 10px;
|
||||
right: 60px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#perfMonitor {
|
||||
top: 40px;
|
||||
right: 10px;
|
||||
|
|
@ -144,6 +163,8 @@
|
|||
|
||||
<div id="version">v<span id="versionNumber">-</span></div>
|
||||
|
||||
<div id="soundStatus" title="Sound ON (Press M to mute)">🔊</div>
|
||||
|
||||
<div id="perfMonitor">
|
||||
<div><span class="label">FPS:</span> <span id="fps">60</span></div>
|
||||
<div><span class="label">Frame:</span> <span id="frameTime">16.7</span>ms</div>
|
||||
|
|
@ -159,7 +180,7 @@
|
|||
|
||||
<div id="instructions">
|
||||
<p><strong>Controls:</strong> WASD or Arrow Keys to move | Touch and drag to move (mobile) | Collect yellow coins | Avoid red obstacles!</p>
|
||||
<p style="margin-top: 5px; font-size: 11px; opacity: 0.7;">Press "T" or shake device to toggle performance monitor</p>
|
||||
<p style="margin-top: 5px; font-size: 11px; opacity: 0.7;">Press "T" to toggle performance monitor | Press "M" to toggle sound</p>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue