Ludo-Sjdl/thedevilbox
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

grand ecran regler

Browse Source
This commit is contained in:
thedevilbox
2025-12-02 19:06:36 +01:00
parent e65d165acd
commit 58ed4774ba
3 changed files with 222 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
game.js
View File

@ -28,10 +28,17 @@ const closeRulesBtn = document.getElementById('closeRulesBtn');
const menuLeaderboard = document.getElementById('menuLeaderboard');
const leaderboardContainer = document.getElementById('leaderboardContainer');
const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// Fonction pour vérifier si on est en mode plein écran
function isFullscreen() {
return !!(document.fullscreenElement || document.webkitFullscreenElement ||
document.mozFullScreenElement || document.msFullscreenElement);
}
let usernameConfirmed = false;
const CELL_SIZE = 20;
const CELL_SIZE = 25;
const COLS = 30;
const ROWS = 30;
@ -360,8 +367,8 @@ class Pacman {
ghost.vulnerableTimer = vulnerableTime;
}
// Afficher l'indicateur de poursuite
if (pursuitIndicator) {
// Afficher l'indicateur de poursuite (sauf en mode plein écran)
if (pursuitIndicator && !isFullscreen()) {
pursuitIndicator.style.display = 'block';
}
@ -1314,7 +1321,7 @@ function gameLoop() {
ghost.vulnerableTimer = FRENZY_DURATION;
}
if (frenzyIndicator) frenzyIndicator.style.display = 'block';
if (pursuitIndicator) pursuitIndicator.style.display = 'block';
if (pursuitIndicator && !isFullscreen()) pursuitIndicator.style.display = 'block';
}
} else {
frenzyTimer--;
@ -1339,13 +1346,16 @@ function gameLoop() {
pacman.update();
pacman.draw();
// Mettre à jour l'indicateur de poursuite
if (pursuitIndicator && (cherryEatenTimer > 0 || frenzyModeActive)) {
// Mettre à jour l'indicateur de poursuite (masquer en mode plein écran)
if (isFullscreen() && pursuitIndicator) {
pursuitIndicator.style.display = 'none';
} else if (pursuitIndicator && (cherryEatenTimer > 0 || frenzyModeActive) && !isFullscreen()) {
const timer = frenzyModeActive ? frenzyTimer : cherryEatenTimer;
const seconds = Math.ceil(timer / 60);
if (pursuitTimerElement) {
pursuitTimerElement.textContent = seconds;
}
pursuitIndicator.style.display = 'block';
} else if (pursuitIndicator && !frenzyModeActive) {
pursuitIndicator.style.display = 'none';
}
@ -1757,6 +1767,77 @@ function placeBonuses() {
}
}
// === REDIMENSIONNEMENT ADAPTATIF DU CANVAS ===
function resizeCanvas() {
if (!gameWrapper || gameWrapper.style.display === 'none') {
return; // Ne pas redimensionner si le jeu n'est pas visible
}
const container = document.querySelector('.container');
const gameHeader = document.querySelector('.game-header');
const gameInfo = document.querySelector('.game-info');
const userInput = document.querySelector('.user-input-section');
const powerUps = document.querySelector('.power-ups-display');
const frenzyIndicator = document.querySelector('.frenzy-indicator');
const pursuitIndicator = document.querySelector('.pursuit-indicator');
const instructions = document.querySelector('.instructions');
const leaderboard = document.querySelector('.game-leaderboard');
if (!container || !canvas) return;
// Calculer l'espace disponible en hauteur
const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
// Hauteur des éléments autour du canvas
let usedHeight = 0;
if (gameHeader) usedHeight += gameHeader.offsetHeight + 20;
if (userInput && userInput.offsetHeight > 0) usedHeight += userInput.offsetHeight + 10;
if (gameInfo) usedHeight += gameInfo.offsetHeight + 20;
if (powerUps && powerUps.offsetHeight > 0) usedHeight += powerUps.offsetHeight + 10;
if (frenzyIndicator && frenzyIndicator.offsetHeight > 0 && frenzyIndicator.style.display !== 'none') {
usedHeight += frenzyIndicator.offsetHeight + 10;
}
if (pursuitIndicator && pursuitIndicator.offsetHeight > 0 && pursuitIndicator.style.display !== 'none') {
usedHeight += pursuitIndicator.offsetHeight + 10;
}
if (instructions) usedHeight += instructions.offsetHeight + 20;
// Padding du container (30px top + 30px bottom)
usedHeight += 60;
// Marges et espacement
usedHeight += 40;
// Largeur disponible (en tenant compte du leaderboard à droite si visible)
let usedWidth = 0;
const containerPadding = 60; // 30px left + 30px right
const gaps = 60; // Espacement entre éléments
if (leaderboard && window.innerWidth > 1200) {
const leaderboardRect = leaderboard.getBoundingClientRect();
if (leaderboardRect.width > 0) {
usedWidth += leaderboardRect.width + 30; // + gap
}
}
usedWidth += containerPadding + gaps;
const availableHeight = windowHeight - usedHeight;
const availableWidth = windowWidth - usedWidth;
// La taille du canvas sera le minimum entre hauteur et largeur disponible
// Utilise 95% de l'espace disponible avec une taille minimale de 400px
const maxSize = Math.min(availableHeight, availableWidth);
const minSize = 400;
const canvasDisplaySize = Math.max(minSize, Math.min(maxSize * 0.95, 1200));
// Appliquer la taille au canvas via CSS
canvas.style.width = canvasDisplaySize + 'px';
canvas.style.height = canvasDisplaySize + 'px';
canvas.style.maxWidth = '100%';
canvas.style.maxHeight = 'calc(100vh - ' + usedHeight + 'px)';
}
function initGame() {
resetUsernameInput(); // Réinitialiser le champ nom
@ -1822,6 +1903,10 @@ function initGame() {
placeBonuses();
countDots();
updateGameLeaderboard();
// Redimensionner le canvas après l'initialisation
setTimeout(resizeCanvas, 100);
gameLoop();
}
@ -2267,7 +2352,11 @@ playBtn.addEventListener('click', () => {
resetUsernameInput();
// Toujours initialiser le jeu quand on clique sur JOUER
gameRunning = false; // S'assurer que le jeu est arrêté
// Attendre un peu pour que le DOM soit rendu avant de redimensionner
setTimeout(() => {
initGame();
resizeCanvas();
}, 50);
});
// Retour au menu depuis le jeu
@ -2385,3 +2474,80 @@ function updateBestScore() {
updateMenuLeaderboard();
updateBestScore();
// Appeler au chargement, au redimensionnement et quand le jeu devient visible
window.addEventListener('resize', () => {
if (gameWrapper && gameWrapper.style.display !== 'none') {
resizeCanvas();
}
});
// Redimensionner quand le jeu est affiché
if (gameWrapper) {
const observer = new MutationObserver(() => {
if (gameWrapper && gameWrapper.style.display !== 'none') {
// Attendre un peu pour que le DOM soit complètement rendu
setTimeout(resizeCanvas, 100);
}
});
observer.observe(gameWrapper, { attributes: true, attributeFilter: ['style'] });
}
// === GESTION DU PLEIN ÉCRAN ===
function toggleFullscreen() {
const gameWrapper = document.getElementById('gameWrapper');
if (!document.fullscreenElement && !document.webkitFullscreenElement &&
!document.mozFullScreenElement && !document.msFullscreenElement) {
// Entrer en plein écran
if (gameWrapper.requestFullscreen) {
gameWrapper.requestFullscreen();
} else if (gameWrapper.webkitRequestFullscreen) {
gameWrapper.webkitRequestFullscreen();
} else if (gameWrapper.mozRequestFullScreen) {
gameWrapper.mozRequestFullScreen();
} else if (gameWrapper.msRequestFullscreen) {
gameWrapper.msRequestFullscreen();
}
} else {
// Quitter le plein écran
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
function updateFullscreenButton() {
const isFullscreenMode = document.fullscreenElement || document.webkitFullscreenElement ||
document.mozFullScreenElement || document.msFullscreenElement;
if (fullscreenBtn) {
fullscreenBtn.textContent = isFullscreenMode ? '✕ Sortir' : '⛶ Plein écran';
fullscreenBtn.title = isFullscreenMode ? 'Quitter le plein écran' : 'Plein écran';
}
// Cacher l'indicateur de poursuite en mode plein écran
if (isFullscreenMode && pursuitIndicator) {
pursuitIndicator.style.display = 'none';
}
// Redimensionner le canvas après changement de mode plein écran
setTimeout(resizeCanvas, 100);
}
// Ajouter l'event listener au bouton
if (fullscreenBtn) {
fullscreenBtn.addEventListener('click', toggleFullscreen);
}
// Écouter les changements de mode plein écran
document.addEventListener('fullscreenchange', updateFullscreenButton);
document.addEventListener('webkitfullscreenchange', updateFullscreenButton);
document.addEventListener('mozfullscreenchange', updateFullscreenButton);
document.addEventListener('MSFullscreenChange', updateFullscreenButton);

3
index.html
View File

@ -38,6 +38,7 @@
<div class="game-header">
<button class="back-btn" id="backToMenuBtn">← Menu</button>
<h2>OULVIC</h2>
<button class="fullscreen-btn" id="fullscreenBtn" title="Plein écran">⛶ Plein écran</button>
</div>
<div class="user-input-section">
<label for="username">Nom d'utilisateur:</label>
@ -63,7 +64,7 @@
<div class="pursuit-indicator" id="pursuitIndicator" style="display: none;">
<span class="pursuit-text">👻 Poursuite active: <span id="pursuitTimer">0</span>s</span>
</div>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<canvas id="gameCanvas" width="750" height="750"></canvas>
<!-- Contrôles tactiles mobile -->
<div class="mobile-controls" id="mobileControls">

28
style.css
View File

@ -323,6 +323,26 @@ body::after {
transform: translateX(-3px);
}
.fullscreen-btn {
padding: 10px 20px;
font-size: 0.7em;
font-family: 'Press Start 2P', cursive;
background: rgba(255, 255, 255, 0.1);
color: #ffd700;
border: 2px solid #ffd700;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
line-height: 1.2;
white-space: nowrap;
}
.fullscreen-btn:hover {
background: rgba(255, 215, 0, 0.2);
transform: scale(1.1);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
/* === MODAL CLASSEMENT === */
.leaderboard-modal {
position: fixed;
@ -695,6 +715,14 @@ h1 {
0 0 40px rgba(255, 215, 0, 0.3),
inset 0 0 60px rgba(0, 0, 255, 0.1);
animation: canvasGlow 3s ease-in-out infinite alternate;
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* === INPUT UTILISATEUR === */