Juan Sebastian Montoya
e638ae4d6d
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.
201 lines
5.9 KiB
HTML
201 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>3D Coin Collector Game</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
overflow: hidden;
|
|
font-family: 'Arial', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
#ui {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
color: white;
|
|
font-size: 24px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
z-index: 100;
|
|
}
|
|
#combo {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #FFD700;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
|
|
z-index: 100;
|
|
display: none;
|
|
animation: comboPulse 0.5s ease-in-out;
|
|
}
|
|
@keyframes comboPulse {
|
|
0%, 100% { transform: translateX(-50%) scale(1); }
|
|
50% { transform: translateX(-50%) scale(1.2); }
|
|
}
|
|
#gameOver {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0,0,0,0.8);
|
|
padding: 40px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
color: white;
|
|
display: none;
|
|
z-index: 200;
|
|
}
|
|
#gameOver h1 {
|
|
font-size: 48px;
|
|
margin-bottom: 20px;
|
|
color: #ff6b6b;
|
|
}
|
|
#gameOver p {
|
|
font-size: 24px;
|
|
margin-bottom: 30px;
|
|
}
|
|
#restartBtn {
|
|
background: #4CAF50;
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 40px;
|
|
font-size: 20px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
#restartBtn:hover {
|
|
background: #45a049;
|
|
transform: scale(1.1);
|
|
}
|
|
#instructions {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: white;
|
|
text-align: center;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
}
|
|
#version {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 14px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
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;
|
|
right: 20px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: #00ff00;
|
|
font-size: 12px;
|
|
font-family: 'Courier New', monospace;
|
|
z-index: 100;
|
|
display: none;
|
|
min-width: 120px;
|
|
}
|
|
#perfMonitor.visible {
|
|
display: block;
|
|
}
|
|
#perfMonitor .label {
|
|
color: #888;
|
|
}
|
|
@media (max-width: 768px) {
|
|
#instructions {
|
|
font-size: 14px;
|
|
}
|
|
#version {
|
|
font-size: 12px;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
#soundStatus {
|
|
top: 10px;
|
|
right: 60px;
|
|
font-size: 18px;
|
|
}
|
|
#perfMonitor {
|
|
top: 40px;
|
|
right: 10px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="ui">
|
|
<div>Score: <span id="score">0</span></div>
|
|
<div>High Score: <span id="highScore">0</span></div>
|
|
<div>Health: <span id="health">100</span></div>
|
|
</div>
|
|
|
|
<div id="combo">1x COMBO!</div>
|
|
|
|
<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>
|
|
<div><span class="label">Entities:</span> <span id="entityCount">0</span></div>
|
|
</div>
|
|
|
|
<div id="gameOver">
|
|
<h1>Game Over!</h1>
|
|
<p id="newHighScore" style="display: none; color: #FFD700; font-size: 28px; margin-bottom: 10px;">🏆 New High Score! 🏆</p>
|
|
<p>Final Score: <span id="finalScore">0</span></p>
|
|
<button id="restartBtn">Play Again</button>
|
|
</div>
|
|
|
|
<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" to toggle performance monitor | Press "M" to toggle sound</p>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import Three.js from CDN
|
|
|
|
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js';
|
|
|
|
// Make THREE globally available for our modules
|
|
window.THREE = THREE;
|
|
|
|
// Load the game after THREE is loaded
|
|
import('./src/main.js').catch(err => {
|
|
console.error('Failed to load game:', err);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|