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

Release/First full release version (#18)
All checks were successful
Build and Publish Docker Image / Publish to Registry (push) Successful in 8s
Details
Build and Publish Docker Image / Deploy to Portainer (push) Successful in 1s
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.

Reviewed-on: #18
Co-authored-by: Juan Sebastian Montoya <juansmm@outlook.com>
Co-committed-by: Juan Sebastian Montoya <juansmm@outlook.com>
This commit is contained in:
Juan Sebastián Montoya 2025-11-26 18:47:41 -05:00 • committed by Juan Sebastián Montoya
parent a95a079d0b
commit d8f4604e69
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">