grand ecran regler
This commit is contained in:
180
game.js
180
game.js
@ -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é
|
||||
initGame();
|
||||
// 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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user