| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> |
| <title>GBA.js Mobile Final</title> |
| <link rel="stylesheet" href="resources/main.css"> |
| <style> |
| |
| body, html { |
| overflow: hidden; |
| position: fixed; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #screen { |
| display: block; |
| margin: 0 auto; |
| max-width: 100%; |
| height: auto; |
| background-color: #222; |
| } |
| |
| |
| #status-log { |
| position: fixed; top: 10px; left: 10px; |
| background: rgba(0,0,0,0.8); color: #0f0; |
| font-family: monospace; font-size: 12px; |
| padding: 5px 10px; z-index: 100001; |
| border-radius: 4px; pointer-events: none; |
| } |
| |
| |
| #touch-controls { |
| position: fixed; bottom: 0; left: 0; width: 100%; height: 280px; |
| z-index: 100000; touch-action: none; |
| } |
| |
| .t-btn { |
| position: absolute; |
| background: rgba(255, 255, 255, 0.2); |
| border: 2px solid rgba(255, 255, 255, 0.5); |
| border-radius: 50%; color: white; |
| display: flex; align-items: center; justify-content: center; |
| font-weight: bold; font-family: sans-serif; |
| user-select: none; -webkit-user-select: none; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.5); |
| } |
| |
| |
| .t-btn:active { background: rgba(0, 255, 0, 0.4); transform: scale(0.95); } |
| |
| |
| #t-up { bottom: 180px; left: 75px; width: 65px; height: 65px; } |
| #t-down { bottom: 50px; left: 75px; width: 65px; height: 65px; } |
| #t-left { bottom: 115px; left: 10px; width: 65px; height: 65px; } |
| #t-right { bottom: 115px; left: 140px; width: 65px; height: 65px; } |
| |
| #t-a { bottom: 130px; right: 20px; width: 85px; height: 85px; background: rgba(255, 0, 0, 0.3); } |
| #t-b { bottom: 70px; right: 115px; width: 85px; height: 85px; background: rgba(255, 255, 0, 0.3); } |
| |
| |
| .menu-btn { width: 85px; height: 40px; border-radius: 8px; font-size: 12px; bottom: 80px; } |
| #t-select { left: 50%; margin-left: -135px; background: rgba(100,100,100,0.6); } |
| #t-start { left: 50%; margin-left: -42px; background: rgba(100,100,100,0.6); } |
| #t-kbd { left: 50%; margin-left: 50px; background: rgba(0, 100, 255, 0.5); } |
| |
| |
| #hidden-input { position: absolute; opacity: 0; left: -1000px; } |
| |
| #controls { color: white; text-align: center; margin-top: 10px; } |
| .hidden { display: none; } |
| </style> |
|
|
| <script src="js/util.js"></script> |
| <script src="js/core.js"></script> |
| <script src="js/arm.js"></script> |
| <script src="js/thumb.js"></script> |
| <script src="js/mmu.js"></script> |
| <script src="js/io.js"></script> |
| <script src="js/audio.js"></script> |
| <script src="js/video.js"></script> |
| <script src="js/video/proxy.js"></script> |
| <script src="js/video/software.js"></script> |
| <script src="js/irq.js"></script> |
| <script src="js/keypad.js"></script> |
| <script src="js/sio.js"></script> |
| <script src="js/savedata.js"></script> |
| <script src="js/gpio.js"></script> |
| <script src="js/gba.js"></script> |
| <script src="resources/xhr.js"></script> |
|
|
| <script> |
| var gba; |
| |
| function updateStatus(msg) { |
| document.getElementById('status-log').innerText = msg; |
| } |
| |
| try { |
| gba = new GameBoyAdvance(); |
| gba.keypad.eatInput = true; |
| } catch (exception) { |
| gba = null; |
| console.error("GBA failed to initialize", exception); |
| } |
| |
| window.onload = function() { |
| if (gba) { |
| var canvas = document.getElementById('screen'); |
| gba.setCanvas(canvas); |
| loadRom('resources/bios.bin', function(bios) { |
| gba.setBios(bios); |
| }); |
| initTouchGamepad(); |
| } |
| } |
| |
| function initTouchGamepad() { |
| |
| |
| const map = { |
| 't-a': 0, 't-b': 1, 't-select': 2, 't-start': 3, |
| 't-right': 4, 't-left': 5, 't-up': 6, 't-down': 7 |
| }; |
| |
| Object.keys(map).forEach(id => { |
| const el = document.getElementById(id); |
| if (!el) return; |
| const keyCode = map[id]; |
| |
| const press = (e) => { |
| e.preventDefault(); |
| updateStatus("Button: " + id.replace('t-', '').toUpperCase()); |
| |
| |
| if (gba.audio.context && gba.audio.context.state === 'suspended') { |
| gba.audio.context.resume(); |
| } |
| |
| gba.keypad.keydown(keyCode); |
| }; |
| |
| const release = (e) => { |
| e.preventDefault(); |
| gba.keypad.keyup(keyCode); |
| }; |
| |
| el.addEventListener('touchstart', press, {passive: false}); |
| el.addEventListener('touchend', release, {passive: false}); |
| }); |
| |
| |
| const kbdBtn = document.getElementById('t-kbd'); |
| const input = document.getElementById('hidden-input'); |
| |
| kbdBtn.addEventListener('touchstart', (e) => { |
| e.preventDefault(); |
| updateStatus("Opening Keyboard..."); |
| input.focus(); |
| }); |
| |
| input.addEventListener('keydown', (e) => { |
| if (e.keyCode === 13) { |
| updateStatus("KBD: START Pressed"); |
| gba.keypad.keydown(3); |
| setTimeout(() => gba.keypad.keyup(3), 100); |
| input.blur(); |
| input.value = ""; |
| } |
| }); |
| } |
| |
| function run(file) { |
| gba.loadRomFromFile(file, function(result) { |
| if (result) { |
| document.getElementById('preload').style.display = 'none'; |
| document.getElementById('ingame').classList.remove('hidden'); |
| gba.runStable(); |
| updateStatus("ROM Loaded: Running..."); |
| } else { |
| updateStatus("Error: ROM failed to load"); |
| } |
| }); |
| } |
| |
| function reset() { |
| gba.pause(); |
| gba.reset(); |
| gba.runStable(); |
| updateStatus("Game Reset"); |
| } |
| |
| function togglePause() { |
| var e = document.getElementById('pause'); |
| if (gba.paused) { |
| gba.runStable(); |
| e.textContent = "PAUSE"; |
| updateStatus("Resumed"); |
| } else { |
| gba.pause(); |
| e.textContent = "UNPAUSE"; |
| updateStatus("Paused"); |
| } |
| } |
| </script> |
| </head> |
| <body> |
|
|
| <div id="status-log">Ready: Select a ROM</div> |
| <canvas id="screen" width="480" height="320"></canvas> |
| <input type="text" id="hidden-input"> |
|
|
| <div id="touch-controls"> |
| <div class="t-btn" id="t-up">▲</div> |
| <div class="t-btn" id="t-down">▼</div> |
| <div class="t-btn" id="t-left">◀</div> |
| <div class="t-btn" id="t-right">▶</div> |
|
|
| <div class="t-btn" id="t-a">A</div> |
| <div class="t-btn" id="t-b">B</div> |
|
|
| <div class="t-btn menu-btn" id="t-select">SELECT</div> |
| <div class="t-btn menu-btn" id="t-start">START</div> |
| <div class="t-btn menu-btn" id="t-kbd">KBD</div> |
| </div> |
|
|
| <section id="controls"> |
| <div id="preload"> |
| <button class="bigbutton" onclick="document.getElementById('loader').click()">SELECT GBA ROM</button> |
| <input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none;"> |
| </div> |
| <div id="ingame" class="hidden"> |
| <button id="pause" class="bigbutton" onclick="togglePause()">PAUSE</button> |
| <button class="bigbutton" onclick="reset()">RESET</button> |
| <button onclick="gba.downloadSavedata()">SAVE</button> |
| </div> |
| </section> |
|
|
| </body> |
| </html> |
|
|
