adamdaghmah
/
i-love-x-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add pause menu functionality and enhance loading screen; implement pause, resume, restart, and quit game options

Browse Source
master
SanjarBLZK 1 week ago
parent 31684cbc02
commit ace8650fa8
1 changed files with 94 additions and 24 deletions
Show Stats Download Patch File Download Diff File

118
index.html
Unescape View File

@ -13,6 +13,7 @@
align-items: center; align-items: center;
height: 100vh; height: 100vh;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
overflow: hidden;
} }
#game { #game {
@ -45,12 +46,17 @@
#gameCanvas { #gameCanvas {
border: 1px solid #333; border: 1px solid #333;
background: #000; background: #000;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
} }
.loader { .loader {
width: 48px; width: 48px;
height: 48px; height: 48px;
border: 5px solid #fff; border: 5px solid #ffffff;
border-bottom-color: transparent; border-bottom-color: transparent;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
@ -72,6 +78,50 @@
font-size: 18px; font-size: 18px;
color: #aaa; color: #aaa;
} }
#pauseMenu {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 10px;
border: 1px solid #333;
text-align: center;
z-index: 1000;
}
#pauseMenu h2 {
font-size: 32px;
margin-bottom: 20px;
color: #fff;
}
.menu-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.menu-buttons button {
background: #333;
color: #fff;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.menu-buttons button:hover {
background: #444;
}
.menu-buttons button:active {
background: #555;
}
</style> </style>
</head> </head>
<body> <body>
@ -85,6 +135,14 @@
<div class="loader"></div> <div class="loader"></div>
<p>Loading... <span id="progress">0%</span></p> <p>Loading... <span id="progress">0%</span></p>
</div> </div>
<div id="pauseMenu" class="hidden">
<h2>Pauze</h2>
<div class="menu-buttons">
<button onclick="resumeGame()">Doorgaan</button>
<button onclick="restartGame()">Opnieuw</button>
<button onclick="quitGame()">Afsluiten</button>
</div>
</div>
</div> </div>
<script> <script>
@ -120,42 +178,54 @@
// Start game // Start game
function startGame() { function startGame() {
showLoading();
gameState = STATES.LOADING; gameState = STATES.LOADING;
ipcRenderer.send('game:start');
}
function showLoading() {
document.getElementById('welcome').classList.add('hidden'); document.getElementById('welcome').classList.add('hidden');
document.getElementById('loading').classList.remove('hidden'); document.getElementById('loading').classList.remove('hidden');
startLoadingProgress(); // Start met een korte vertraging om de engine tijd te geven
} setTimeout(() => {
document.getElementById('loading').classList.add('hidden');
function startLoadingProgress() { document.getElementById('gameCanvas').classList.remove('hidden');
const progressElement = document.getElementById('progress'); gameState = STATES.PLAYING;
const updateProgress = () => { }, 1000); // 1 seconde loading screen
if (loadingProgress < 100 && gameState === STATES.LOADING) {
loadingProgress += 1;
progressElement.textContent = `${loadingProgress}%`;
setTimeout(updateProgress, 50);
}
};
updateProgress();
} }
function pauseGame() { function pauseGame() {
gameState = STATES.PAUSED; gameState = STATES.PAUSED;
document.getElementById('pauseMenu').classList.remove('hidden');
ipcRenderer.send('game:pause'); ipcRenderer.send('game:pause');
} }
function resumeGame() {
gameState = STATES.PLAYING;
document.getElementById('pauseMenu').classList.add('hidden');
ipcRenderer.send('game:resume');
}
function restartGame() {
gameState = STATES.PLAYING;
document.getElementById('pauseMenu').classList.add('hidden');
ipcRenderer.send('game:restart');
}
function quitGame() {
// Reset game state
gameState = STATES.WELCOME;
loadingProgress = 0;
// Verberg game canvas en pauze menu
document.getElementById('gameCanvas').classList.add('hidden');
document.getElementById('pauseMenu').classList.add('hidden');
// Toon welkomstscherm
document.getElementById('welcome').classList.remove('hidden');
// Stuur event naar main process
ipcRenderer.send('game:return-to-welcome');
}
// Listen for engine events // Listen for engine events
ipcRenderer.on('engine:ready', (event, data) => { ipcRenderer.on('engine:ready', (event, data) => {
console.log('Engine ready:', data); console.log('Engine ready:', data);
if (gameState === STATES.LOADING) {
document.getElementById('loading').classList.add('hidden');
document.getElementById('gameCanvas').classList.remove('hidden');
gameState = STATES.PLAYING;
}
}); });
ipcRenderer.on('game:started', () => { ipcRenderer.on('game:started', () => {

Write Preview
Loading…
Cancel
Save