| | <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 Fix</title> |
| | <link rel="stylesheet" href="resources/main.css"> |
| | <style> |
| | |
| | body, html { |
| | background: #000; margin: 0; padding: 0; width: 100%; height: 100%; |
| | overflow: hidden; position: fixed; touch-action: none; |
| | } |
| | #screen { display: block; margin: 0 auto; width: 100vw; image-rendering: pixelated; } |
| | |
| | |
| | #touch-container { |
| | position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| | z-index: 1000; pointer-events: none; |
| | } |
| | .touch-btn { |
| | position: absolute; background: rgba(255, 255, 255, 0.15); |
| | border: 2px solid rgba(255, 255, 255, 0.4); color: white; |
| | display: flex; align-items: center; justify-content: center; |
| | font-family: sans-serif; font-weight: bold; pointer-events: auto; |
| | user-select: none; -webkit-user-select: none; touch-action: none; |
| | } |
| | .touch-btn:active { background: rgba(255, 0, 0, 0.4); } |
| | |
| | |
| | #up { bottom: 180px; left: 80px; width: 60px; height: 60px; border-radius: 10px; } |
| | #down { bottom: 60px; left: 80px; width: 60px; height: 60px; border-radius: 10px; } |
| | #left { bottom: 120px; left: 20px; width: 60px; height: 60px; border-radius: 10px; } |
| | #right { bottom: 120px; left: 140px; width: 60px; height: 60px; border-radius: 10px; } |
| | |
| | |
| | #btn-a { bottom: 130px; right: 25px; width: 85px; height: 85px; border-radius: 50%; background: rgba(255,0,0,0.2); } |
| | #btn-b { bottom: 85px; right: 125px; width: 85px; height: 85px; border-radius: 50%; background: rgba(255,255,0,0.2); } |
| | |
| | |
| | .rect-btn { bottom: 25px; width: 90px; height: 40px; border-radius: 5px; font-size: 12px; } |
| | #start { left: 50%; margin-left: 5px; } |
| | #select { left: 50%; margin-left: -95px; } |
| | |
| | #ui-bar { position: relative; z-index: 1001; padding: 10px; text-align: center; } |
| | .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; |
| | try { |
| | gba = new GameBoyAdvance(); |
| | gba.keypad.eatInput = true; |
| | } catch (e) { console.error(e); } |
| | |
| | window.onload = function() { |
| | if (gba) { |
| | gba.setCanvas(document.getElementById('screen')); |
| | loadRom('resources/bios.bin', function(bios) { |
| | gba.setBios(bios); |
| | }); |
| | setupMobileControls(); |
| | } |
| | }; |
| | |
| | function setupMobileControls() { |
| | |
| | |
| | const mapping = { |
| | 'up': 6, 'down': 7, 'left': 5, 'right': 4, |
| | 'btn-a': 0, 'btn-b': 1, 'start': 3, 'select': 2 |
| | }; |
| | |
| | Object.keys(mapping).forEach(id => { |
| | const el = document.getElementById(id); |
| | const gbaKey = mapping[id]; |
| | |
| | const press = (e) => { |
| | e.preventDefault(); |
| | |
| | if (gba.audio.context && gba.audio.context.state === 'suspended') { |
| | gba.audio.context.resume(); |
| | } |
| | gba.keypad.keydown(gbaKey); |
| | }; |
| | |
| | const release = (e) => { |
| | e.preventDefault(); |
| | gba.keypad.keyup(gbaKey); |
| | }; |
| | |
| | |
| | el.addEventListener('touchstart', press, { passive: false }); |
| | el.addEventListener('touchend', release, { passive: false }); |
| | }); |
| | } |
| | |
| | function run(file) { |
| | gba.loadRomFromFile(file, function(result) { |
| | if (result) { |
| | document.getElementById('preload').classList.add('hidden'); |
| | gba.runStable(); |
| | } |
| | }); |
| | } |
| | </script> |
| | </head> |
| | <body> |
| |
|
| | <canvas id="screen" width="480" height="320"></canvas> |
| |
|
| |
|
| |
|
| | <div id="touch-container"> |
| | <div class="touch-btn" id="up">UP</div> |
| | <div class="touch-btn" id="down">DOWN</div> |
| | <div class="touch-btn" id="left">LEFT</div> |
| | <div class="touch-btn" id="right">RIGHT</div> |
| | |
| | <div class="touch-btn" id="btn-a">A</div> |
| | <div class="touch-btn" id="btn-b">B</div> |
| |
|
| | <div class="touch-btn rect-btn" id="start">START</div> |
| | <div class="touch-btn rect-btn" id="select">SELECT</div> |
| | </div> |
| |
|
| | <div id="ui-bar"> |
| | <div id="preload"> |
| | <button onclick="document.getElementById('loader').click()" style="padding:15px;">SELECT ROM</button> |
| | <input id="loader" type="file" accept=".gba" onchange="run(this.files[0]);" style="display:none;"> |
| | </div> |
| | </div> |
| |
|
| | </body> |
| | </html> |
| |
|
