index.html (6330B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Fire Truck - KGames</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet"> 10 <style> 11 * { margin: 0; padding: 0; box-sizing: border-box; } 12 html, body { height: 100%; overflow: hidden; } 13 body { 14 background: #d8ead2; 15 font-family: 'Fredoka', sans-serif; 16 display: flex; 17 flex-direction: column; 18 } 19 nav { 20 width: 100%; 21 padding: 0.6rem 1rem; 22 position: fixed; 23 top: 0; 24 left: 0; 25 z-index: 20; 26 pointer-events: none; 27 } 28 nav a { 29 pointer-events: auto; 30 color: #3c4c39; 31 text-decoration: none; 32 font-size: 1rem; 33 background: rgba(255, 255, 255, 0.72); 34 border-radius: 999px; 35 padding: 0.35rem 0.8rem; 36 display: inline-block; 37 } 38 #hud { 39 position: fixed; 40 top: 0.7rem; 41 left: 50%; 42 transform: translateX(-50%); 43 z-index: 20; 44 background: rgba(255, 255, 255, 0.78); 45 color: #2e372d; 46 border-radius: 18px; 47 padding: 0.55rem 0.9rem; 48 text-align: center; 49 min-width: min(92vw, 360px); 50 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 51 } 52 #hud .title { font-size: 1.2rem; font-weight: 600; } 53 #hud .hint { font-size: 0.9rem; opacity: 0.78; } 54 #settings-btn { 55 position: fixed; 56 top: 0.6rem; 57 right: 1rem; 58 z-index: 30; 59 background: rgba(255, 255, 255, 0.72); 60 border-radius: 50%; 61 width: 2.6rem; 62 height: 2.6rem; 63 display: flex; 64 align-items: center; 65 justify-content: center; 66 cursor: pointer; 67 font-size: 1.4rem; 68 user-select: none; 69 box-shadow: 0 4px 12px rgba(0,0,0,0.1); 70 transition: background 0.1s; 71 } 72 #settings-btn:hover { background: rgba(255, 255, 255, 0.9); } 73 #settings-panel { 74 position: fixed; 75 top: 3.6rem; 76 right: 1rem; 77 z-index: 30; 78 background: rgba(255, 255, 255, 0.92); 79 border-radius: 12px; 80 padding: 1rem; 81 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 82 display: none; 83 font-size: 0.95rem; 84 color: #2e372d; 85 } 86 #settings-panel.open { display: block; } 87 #settings-panel label { margin-right: 0.5rem; font-weight: 600; } 88 #speed-select, #distance-select, #controls-select { 89 padding: 0.25rem 0.5rem; 90 font-family: inherit; 91 border-radius: 6px; 92 border: 1px solid #ccc; 93 } 94 #settings-panel .setting-row { 95 margin-top: 0.6rem; 96 } 97 #game-container { flex: 1; width: 100%; height: 100%; } 98 </style> 99 </head> 100 <body> 101 <nav><a href="../../index.html">← Back to KGames</a></nav> 102 <div id="settings-btn">⚙️</div> 103 <div id="settings-panel"> 104 <div> 105 <label for="speed-select">Speed:</label> 106 <select id="speed-select"> 107 <option value="0.5">0.5x</option> 108 <option value="1" selected>1x (Default)</option> 109 <option value="2">2x</option> 110 <option value="3">3x</option> 111 <option value="5">5x</option> 112 </select> 113 </div> 114 <div class="setting-row"> 115 <label for="distance-select">Fire distance:</label> 116 <select id="distance-select"> 117 <option value="5">5 blocks</option> 118 <option value="10" selected>10 blocks (Default)</option> 119 <option value="20">20 blocks</option> 120 <option value="30">30 blocks</option> 121 <option value="50">50 blocks</option> 122 </select> 123 </div> 124 <div class="setting-row"> 125 <label for="controls-select">Controls:</label> 126 <select id="controls-select"> 127 <option value="guided" selected>Guided (Default)</option> 128 <option value="manual">Manual (hold arrows to drive)</option> 129 </select> 130 </div> 131 <div class="setting-row"> 132 <label><input type="checkbox" id="music-toggle" checked> Music</label> 133 </div> 134 <div class="setting-row"> 135 <label><input type="checkbox" id="sfx-toggle" checked> SFX</label> 136 </div> 137 </div> 138 <div id="hud"> 139 <div class="title">Arrow Key Fire Truck</div> 140 <div class="hint">Arrows = drive (and aim at the fire!) | SPACE = spray | S = siren | L = lights</div> 141 </div> 142 <div id="game-container"></div> 143 <script> 144 if (typeof window.GAME_SPEED_MULTIPLIER === 'undefined') { 145 window.GAME_SPEED_MULTIPLIER = 1.0; 146 } 147 if (typeof window.GAME_FIRE_DISTANCE === 'undefined') { 148 window.GAME_FIRE_DISTANCE = 10; 149 } 150 document.getElementById('settings-btn').addEventListener('click', () => { 151 document.getElementById('settings-panel').classList.toggle('open'); 152 }); 153 document.getElementById('speed-select').addEventListener('change', (e) => { 154 window.GAME_SPEED_MULTIPLIER = parseFloat(e.target.value); 155 if (window.__FT_SCENE__) window.__FT_SCENE__.updateTargetSpeed(); 156 e.target.blur(); 157 }); 158 document.getElementById('distance-select').addEventListener('change', (e) => { 159 window.GAME_FIRE_DISTANCE = parseInt(e.target.value, 10); 160 e.target.blur(); 161 }); 162 document.getElementById('controls-select').addEventListener('change', (e) => { 163 window.GAME_CONTROL_MODE = e.target.value; 164 if (window.__FT_SCENE__) window.__FT_SCENE__.setControlMode(e.target.value); 165 e.target.blur(); 166 }); 167 document.getElementById('music-toggle').addEventListener('change', (e) => { 168 if (window.__FT_SCENE__) window.__FT_SCENE__.setMusicMuted(!e.target.checked); 169 }); 170 document.getElementById('sfx-toggle').addEventListener('change', (e) => { 171 if (window.__FT_SCENE__) window.__FT_SCENE__.setSfxMuted(!e.target.checked); 172 }); 173 </script> 174 <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script> 175 <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> 176 <script src="lib.js"></script> 177 <script src="../../js/shared/game-shared.js"></script> 178 <script src="game.js"></script> 179 <script src="../../js/shared/touch-controls.js"></script> 180 <script>KGames.initTouchControls({ layout: 'drive' });</script> 181 </body> 182 </html>