jusemon/threejs-test
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity Actions

feat: Implement game UI and state management
All checks were successful
Build and Publish Docker Image / Build and Validate (pull_request) Successful in 9s
Details

Browse source 
- Added start menu, pause menu, and game over screens to enhance user experience.
- Introduced UISystem to manage UI state transitions and visibility.
- Updated Game class to handle game state (menu, playing, paused, game over).
- Integrated CameraSystem for improved camera control and screen shake effects.
- Added new components for collision handling, scoring, and game state management.
- Refactored sound management to separate background music handling.

This update significantly improves the game's UI and overall gameplay flow.
This commit is contained in:
Juan Sebastián Montoya 2025-11-26 18:46:03 -05:00
parent a95a079d0b
commit d8748f4c4a
14 changed files with 1467 additions and 751 deletions
Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -41,29 +41,43 @@
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.2); }
}
#gameOver {
#startMenu, #pauseMenu, #gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.8);
padding: 40px;
background: rgba(0,0,0,0.9);
padding: 50px;
border-radius: 20px;
text-align: center;
color: white;
display: none;
z-index: 200;
min-width: 400px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
#gameOver h1 {
#startMenu {
display: block;
}
#pauseMenu, #gameOver {
display: none;
}
#startMenu h1, #pauseMenu h1, #gameOver h1 {
font-size: 48px;
margin-bottom: 20px;
color: #4CAF50;
}
#pauseMenu h1 {
color: #FFA500;
}
#gameOver h1 {
color: #ff6b6b;
}
#gameOver p {
font-size: 24px;
#startMenu p, #pauseMenu p, #gameOver p {
font-size: 20px;
margin-bottom: 30px;
line-height: 1.6;
}
#restartBtn {
#startMenu button, #pauseMenu button, #restartBtn {
background: #4CAF50;
border: none;
color: white;
@ -72,11 +86,18 @@
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
margin: 10px;
}
#restartBtn:hover {
#startMenu button:hover, #pauseMenu button:hover, #restartBtn:hover {
background: #45a049;
transform: scale(1.1);
}
#pauseMenu button.resumeBtn {
background: #2196F3;
}
#pauseMenu button.resumeBtn:hover {
background: #1976D2;
}
#instructions {
position: absolute;
bottom: 20px;
@ -153,7 +174,7 @@
</style>
</head>
<body>
<div id="ui">
<div id="ui" style="display: none;">
<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>
@ -171,6 +192,25 @@
<div><span class="label">Entities:</span> <span id="entityCount">0</span></div>
</div>
<div id="startMenu">
<h1>🎮 Coin Collector</h1>
<p>Collect coins, avoid obstacles, and survive as long as you can!</p>
<p style="font-size: 16px; opacity: 0.8; margin-top: 20px;">
<strong>Controls:</strong><br>
WASD or Arrow Keys to move<br>
Touch and drag (mobile)<br>
ESC or P to pause
</p>
<button id="startBtn">Start Game</button>
</div>
<div id="pauseMenu">
<h1>⏸️ Paused</h1>
<p>Game is paused</p>
<button class="resumeBtn" id="resumeBtn">Resume</button>
<button id="pauseMenuBtn">Main Menu</button>
</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>
@ -178,9 +218,9 @@
<button id="restartBtn">Play Again</button>
</div>
<div id="instructions">
<div id="instructions" style="display: none;">
<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>
<p style="margin-top: 5px; font-size: 11px; opacity: 0.7;">Press "T" to toggle performance monitor | Press "M" to toggle sound | Press "ESC" or "P" to pause</p>
</div>
<script type="module">