143 lines
No EOL
5.4 KiB
HTML
143 lines
No EOL
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="IceBreaker - Naviguez à travers les icebergs et protégez votre cargaison !">
|
|
<title>IceBreaker - En Mer</title>
|
|
<link rel="stylesheet" href="./assets/css/cruise.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<audio id="background-audio" loop>
|
|
<source src="./assets/sounds/cargoship-sound.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<!-- Modal d'activation audio -->
|
|
<div id="audio-prompt-modal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-icon">🎧</div>
|
|
<h3>Immersion Arctique</h3>
|
|
<p>Activez le son pour une expérience complète dans les eaux glaciales. L'ambiance sonore et les alertes
|
|
amélioreront votre navigation.</p>
|
|
<button id="allow-audio-button" class="modal-button">
|
|
<span>Activer le Son</span>
|
|
<span class="btn-wave">🔊</span>
|
|
</button>
|
|
<button id="skip-audio-button" class="modal-button-secondary">
|
|
Continuer sans son
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contrôles audio discrets -->
|
|
<div id="audio-controls" class="game-audio-panel">
|
|
<button id="audio-toggle-game" class="audio-btn-game" title="Son">
|
|
<span class="audio-icon">🔊</span>
|
|
</button>
|
|
<input type="range" id="volume-slider-game" class="volume-slider" min="0" max="100" value="80">
|
|
</div>
|
|
|
|
<!-- HUD / Tableau de bord -->
|
|
<div id="score-panel">
|
|
<div class="hud-header">
|
|
<span class="hud-title">IceBreaker</span>
|
|
<span id="captain-name-display" class="captain-badge"></span>
|
|
</div>
|
|
<div class="score-grid">
|
|
<div class="score-box">
|
|
<img class="score-icon" src="./assets/img/kilometer.png" alt="Distance">
|
|
<div class="score-info">
|
|
<span class="score-label">Distance</span>
|
|
<span id="dist-display" class="score-value">300 km</span>
|
|
</div>
|
|
</div>
|
|
<div class="score-box">
|
|
<img class="score-icon" src="./assets/img/container.png" alt="Cargo">
|
|
<div class="score-info">
|
|
<span class="score-label">Cargaison</span>
|
|
<span id="cont-display" class="score-value">20</span>
|
|
</div>
|
|
</div>
|
|
<div class="score-box highlight">
|
|
<div class="score-info">
|
|
<span class="score-label">Score</span>
|
|
<span id="score-display" class="score-value">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone de jeu -->
|
|
<div id="game-world">
|
|
<div id="iceberg-layer"></div>
|
|
|
|
<div class="boat" id="player-boat">
|
|
<img src="./assets/img/cargoship.png" alt="Cargo Ship">
|
|
<div class="overlay" id="container-deck"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indication des contrôles -->
|
|
<div class="hint">
|
|
<span class="hint-keys">Z/Q/S/D</span> ou <span class="hint-keys">↑←↓→</span> pour naviguer • Attention aux
|
|
virages brusques !
|
|
</div>
|
|
|
|
<!-- Modal Game Over -->
|
|
<div id="gameover-modal" class="modal-overlay hidden">
|
|
<div class="modal-content gameover-content">
|
|
<div class="gameover-icon">💥</div>
|
|
<div class="gameover-title">NAUFRAGE</div>
|
|
<p class="gameover-subtitle">La coque a été percée par un iceberg</p>
|
|
|
|
<div class="gameover-stats">
|
|
<div class="gameover-stat">
|
|
<span class="stat-icon">🏆</span>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Score Final</span>
|
|
<span id="gameover-score" class="stat-value">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="gameover-stat">
|
|
<span class="stat-icon">📦</span>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Marchandise Livrée</span>
|
|
<span id="gameover-containers" class="stat-value">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="gameover-stat">
|
|
<span class="stat-icon">📏</span>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Distance Parcourue</span>
|
|
<span id="gameover-distance" class="stat-value">0 km</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="gameover-home-btn" class="modal-button gameover-btn">
|
|
<span>🏠</span>
|
|
<span>Retour au Port</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Effets sonores -->
|
|
<audio id="sfx-drop" preload="auto">
|
|
<source src="./assets/sounds/fall.mp3" type="audio/mpeg">
|
|
</audio>
|
|
<audio id="sfx-alert" preload="auto">
|
|
<source src="./assets/sounds/hui.mp3" type="audio/mpeg">
|
|
</audio>
|
|
<audio id="sfx-break" preload="auto">
|
|
<source src="./assets/sounds/break.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<script src="./assets/js/storage.js"></script>
|
|
<script src="./assets/js/audio-manager.js"></script>
|
|
<script src="./assets/js/cruise.js"></script>
|
|
</body>
|
|
|
|
</html> |