feat: Implement sound system and toggle functionality
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:
Juan Sebastián Montoya 2025-11-26 17:52:59 -05:00
parent 4220e216e1
commit e638ae4d6d
6 changed files with 720 additions and 5 deletions

View file

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