| <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"> |
| <title>GBA.js - Mobile Fixed</title> |
| <style> |
| |
| body, html { |
| margin: 0; padding: 0; width: 100%; height: 100%; |
| background-color: #000; overflow: hidden; |
| display: flex; flex-direction: column; |
| font-family: sans-serif; touch-action: none; |
| } |
| |
| |
| #controls { |
| width: 100%; background: #1a1a1a; padding: 10px 0; |
| display: flex; justify-content: space-evenly; align-items: center; |
| border-bottom: 2px solid #333; z-index: 100; |
| } |
| |
| .top-btn { |
| background: #333; color: #0f0; border: 1px solid #444; |
| padding: 10px 0; font-family: monospace; border-radius: 20px; |
| text-transform: uppercase; font-size: 11px; font-weight: bold; |
| width: 28%; box-shadow: 0 3px #000; text-align: center; |
| } |
| |
| |
| #screen-container { |
| width: 100%; background: #000; |
| display: flex; flex-direction: column; align-items: center; |
| } |
| |
| #screen { |
| width: 100vw; height: auto; max-height: 40vh; |
| aspect-ratio: 3 / 2; image-rendering: pixelated; |
| background: #111; display: block; |
| } |
| |
| |
| #touchControls { |
| flex: 1; position: relative; width: 100%; |
| user-select: none; -webkit-user-select: none; |
| } |
| |
| .ctrl-btn { |
| position: absolute; background: rgba(85, 85, 85, 0.9); |
| border: none; color: #fff; font-weight: bold; |
| display: flex; align-items: center; justify-content: center; |
| box-shadow: 0 6px #222; touch-action: manipulation; |
| } |
| |
| .ctrl-btn:active { background: #777; transform: translateY(4px); box-shadow: 0 2px #111; } |
| |
| |
| #dpad { position: absolute; bottom: 12%; left: 5vw; width: 45vw; max-width: 220px; aspect-ratio: 1/1; } |
| #up { top: 0; left: 33%; width: 34%; height: 38%; border-radius: 10px 10px 0 0; } |
| #down { bottom: 0; left: 33%; width: 34%; height: 38%; border-radius: 0 0 10px 10px; } |
| #left { top: 33%; left: 0; width: 38%; height: 34%; border-radius: 10px 0 0 10px; } |
| #right { top: 33%; right: 0; width: 38%; height: 34%; border-radius: 0 10px 10px 0; } |
| #center-block { position: absolute; top: 33%; left: 33%; width: 34%; height: 34%; background: rgba(85, 85, 85, 0.9); } |
| |
| |
| #action-cluster { position: absolute; bottom: 12%; right: 5vw; width: 45vw; max-width: 240px; height: 40vw; max-height: 200px; } |
| .round-btn { width: 22vw; height: 22vw; max-width: 100px; max-height: 100px; border-radius: 50%; font-size: 26px; } |
| #a { top: 0; right: 0; background: #c33; border: 2px solid #a22; } |
| #b { bottom: 0; left: 0; background: #cc3; color: #000; border: 2px solid #aa2; } |
| |
| |
| #l { top: 10px; left: 5vw; width: 22vw; height: 45px; border-radius: 8px; } |
| #r { top: 10px; right: 5vw; width: 22vw; height: 45px; border-radius: 8px; } |
| |
| .hidden { display: none !important; } |
| </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; |
| try { |
| gba = new GameBoyAdvance(); |
| gba.keypad.eatInput = true; |
| } catch (e) { console.error("GBA Core Failed"); } |
| |
| window.onload = function() { |
| if (gba) { |
| var canvas = document.getElementById('screen'); |
| gba.setCanvas(canvas); |
| loadRom('resources/bios.bin', function(bios) { gba.setBios(bios); }); |
| setupTouchControls(); |
| } |
| } |
| |
| function run(file) { |
| |
| if (gba.audio && gba.audio.context) { |
| gba.audio.context.resume(); |
| } |
| |
| gba.loadRomFromFile(file, function(result) { |
| if (result) { |
| document.getElementById('preload').classList.add('hidden'); |
| document.getElementById('ingame').classList.remove('hidden'); |
| document.getElementById('status').innerText = "RUNNING"; |
| gba.runStable(); |
| } else { |
| alert("Invalid ROM file."); |
| } |
| }); |
| } |
| |
| function setupTouchControls() { |
| const map = { |
| 'up': 38, 'down': 40, 'left': 37, 'right': 39, |
| 'a': 88, 'b': 90, 'l': 65, 'r': 83, |
| 'start': 13, 'select': 16 |
| }; |
| |
| function handleKey(id, isDown) { |
| |
| if (gba && gba.audio && gba.audio.context.state === 'suspended') { |
| gba.audio.context.resume(); |
| } |
| const keyCode = map[id]; |
| const event = new KeyboardEvent(isDown ? 'keydown' : 'keyup', { keyCode: keyCode }); |
| window.dispatchEvent(event); |
| } |
| |
| Object.keys(map).forEach(id => { |
| const el = document.getElementById(id); |
| if(el) { |
| el.addEventListener('touchstart', (e) => { e.preventDefault(); handleKey(id, true); }, {passive: false}); |
| el.addEventListener('touchend', (e) => { e.preventDefault(); handleKey(id, false); }, {passive: false}); |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
|
|
| <section id="controls"> |
| <button id="select" class="top-btn">SELECT</button> |
| <div id="preload" style="width:28%"> |
| <button class="top-btn" style="width:100%" onclick="document.getElementById('loader').click()">ROM</button> |
| <input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none"> |
| </div> |
| <div id="ingame" class="hidden" style="width:28%"> |
| <button class="top-btn" style="width:100%" onclick="gba.pause()">PAUSE</button> |
| </div> |
| <button id="start" class="top-btn">START</button> |
| </section> |
|
|
| <div id="screen-container"> |
| <div id="status" style="color:#0f0; font-family:monospace; font-size:10px; padding:2px;">READY</div> |
| <canvas id="screen" width="480" height="320"></canvas> |
| </div> |
|
|
| <div id="touchControls"> |
| <div id="dpad"> |
| <button id="up" class="ctrl-btn">↑</button> |
| <button id="left" class="ctrl-btn">←</button> |
| <div id="center-block"></div> |
| <button id="right" class="ctrl-btn">→</button> |
| <button id="down" class="ctrl-btn">↓</button> |
| </div> |
| <div id="action-cluster"> |
| <button id="b" class="ctrl-btn round-btn">B</button> |
| <button id="a" class="ctrl-btn round-btn">A</button> |
| </div> |
| <button id="l" class="ctrl-btn">L</button> |
| <button id="r" class="ctrl-btn">R</button> |
| </div> |
|
|
| </body> |
| </html> |
|
|
