| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>GBA.js - Mobile Optimized</title> |
| <link rel="stylesheet" href="resources/main.css"> |
| <style> |
| |
| body { |
| margin: 0; |
| padding: 0; |
| background-color: #000; |
| overflow: hidden; |
| touch-action: none; |
| } |
| |
| #screen { |
| display: block; |
| margin: 0 auto; |
| max-width: 100vw; |
| max-height: 100vh; |
| image-rendering: pixelated; |
| object-fit: contain; |
| } |
| |
| |
| #touchControls { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| display: none; |
| z-index: 100; |
| flex-direction: row; |
| justify-content: space-between; |
| align-items: flex-end; |
| padding: 20px; |
| box-sizing: border-box; |
| user-select: none; |
| -webkit-user-select: none; |
| -webkit-tap-highlight-color: transparent; |
| } |
| |
| #touchControls button { |
| pointer-events: auto; |
| border: none; |
| font-weight: bold; |
| font-family: sans-serif; |
| text-transform: uppercase; |
| transition: opacity 0.1s; |
| } |
| |
| #touchControls button:active { |
| opacity: 0.5; |
| filter: brightness(1.2); |
| } |
| |
| .dpad-btn { |
| background: rgba(255, 255, 255, 0.15); |
| color: white; |
| border-radius: 10px; |
| font-size: 24px; |
| } |
| |
| .action-btn { |
| width: 75px; |
| height: 75px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.25); |
| color: white; |
| font-size: 20px; |
| } |
| |
| .shoulder-btn { |
| width: 70px; |
| height: 35px; |
| background: rgba(255, 255, 255, 0.15); |
| color: white; |
| border-radius: 5px; |
| font-size: 14px; |
| } |
| |
| .meta-btn { |
| width: 60px; |
| height: 25px; |
| background: rgba(255, 255, 255, 0.15); |
| color: white; |
| border-radius: 15px; |
| font-size: 10px; |
| } |
| </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; |
| var runCommands = []; |
| var debug = null; |
| |
| try { |
| gba = new GameBoyAdvance(); |
| gba.keypad.eatInput = true; |
| gba.setLogger(function(level, error) { |
| console.log(error); |
| gba.pause(); |
| var screen = document.getElementById('screen'); |
| if (screen.getAttribute('class') == 'dead') { |
| console.log('We appear to have crashed multiple times without reseting.'); |
| return; |
| } |
| var crash = document.createElement('img'); |
| crash.setAttribute('id', 'crash'); |
| crash.setAttribute('src', 'resources/crash.png'); |
| screen.parentElement.insertBefore(crash, screen); |
| screen.setAttribute('class', 'dead'); |
| }); |
| } catch (exception) { |
| gba = null; |
| } |
| |
| window.onload = function() { |
| if (gba && FileReader) { |
| var canvas = document.getElementById('screen'); |
| gba.setCanvas(canvas); |
| gba.logLevel = gba.LOG_ERROR; |
| |
| loadRom('resources/bios.bin', function(bios) { |
| gba.setBios(bios); |
| }); |
| |
| if (!gba.audio.context) { |
| var soundbox = document.getElementById('sound'); |
| if(soundbox) soundbox.parentElement.removeChild(soundbox); |
| } |
| |
| if (window.navigator.appName == 'Microsoft Internet Explorer') { |
| var pixelatedBox = document.getElementById('pixelated'); |
| if(pixelatedBox) pixelatedBox.parentElement.removeChild(pixelatedBox); |
| } |
| |
| if ('ontouchstart' in window || navigator.maxTouchPoints > 0) { |
| document.getElementById('touchControls').style.display = 'flex'; |
| } |
| |
| setupTouchControls(); |
| } else { |
| var dead = document.getElementById('controls'); |
| if(dead) dead.parentElement.removeChild(dead); |
| } |
| } |
| |
| function fadeOut(id, nextId, kill) { |
| var e = document.getElementById(id); |
| var e2 = document.getElementById(nextId); |
| if (!e) return; |
| var removeSelf = function() { |
| if (kill) { |
| e.parentElement.removeChild(e); |
| } else { |
| e.setAttribute('class', 'dead'); |
| e.removeEventListener('transitionend', removeSelf); |
| } |
| if (e2) { |
| e2.setAttribute('class', 'hidden'); |
| setTimeout(function() { |
| e2.removeAttribute('class'); |
| }, 0); |
| } |
| } |
| e.addEventListener('transitionend', removeSelf, false); |
| e.setAttribute('class', 'hidden'); |
| } |
| |
| function run(file) { |
| var dead = document.getElementById('loader'); |
| dead.value = ''; |
| var load = document.getElementById('select'); |
| load.textContent = 'Loading...'; |
| load.removeAttribute('onclick'); |
| var pause = document.getElementById('pause'); |
| pause.textContent = "PAUSE"; |
| gba.loadRomFromFile(file, function(result) { |
| if (result) { |
| for (var i = 0; i < runCommands.length; ++i) { |
| runCommands[i](); |
| } |
| runCommands = []; |
| fadeOut('preload', 'ingame'); |
| fadeOut('instructions', null, true); |
| gba.runStable(); |
| } else { |
| load.textContent = 'FAILED'; |
| setTimeout(function() { |
| load.textContent = 'SELECT'; |
| load.onclick = function() { document.getElementById('loader').click(); } |
| }, 3000); |
| } |
| }); |
| } |
| |
| function reset() { |
| gba.pause(); |
| gba.reset(); |
| var load = document.getElementById('select'); |
| load.textContent = 'SELECT'; |
| var crash = document.getElementById('crash'); |
| if (crash) { |
| var context = gba.targetCanvas.getContext('2d'); |
| context.clearRect(0, 0, 480, 320); |
| gba.video.drawCallback(); |
| crash.parentElement.removeChild(crash); |
| var canvas = document.getElementById('screen'); |
| canvas.removeAttribute('class'); |
| } else { |
| lcdFade(gba.context, gba.targetCanvas.getContext('2d'), gba.video.drawCallback); |
| } |
| load.onclick = function() { document.getElementById('loader').click(); } |
| fadeOut('ingame', 'preload'); |
| } |
| |
| function uploadSavedataPending(file) { |
| runCommands.push(function() { gba.loadSavedataFromFile(file) }); |
| } |
| |
| function togglePause() { |
| var e = document.getElementById('pause'); |
| if (gba.paused) { |
| gba.runStable(); |
| e.textContent = "PAUSE"; |
| } else { |
| gba.pause(); |
| e.textContent = "UNPAUSE"; |
| } |
| } |
| |
| function screenshot() { |
| var canvas = gba.indirectCanvas; |
| window.open(canvas.toDataURL('image/png'), 'screenshot'); |
| } |
| |
| function lcdFade(context, target, callback) { |
| var i = 0; |
| var drawInterval = setInterval(function() { |
| i++; |
| var pixelData = context.getImageData(0, 0, 240, 160); |
| for (var y = 0; y < 160; ++y) { |
| for (var x = 0; x < 240; ++x) { |
| var xDiff = Math.abs(x - 120); |
| var yDiff = Math.abs(y - 80) * 0.8; |
| var xFactor = (120 - i - xDiff) / 120; |
| var yFactor = (80 - i - ((y & 1) * 10) - yDiff + Math.pow(xDiff, 1 / 2)) / 80; |
| pixelData.data[(x + y * 240) * 4 + 3] *= Math.pow(xFactor, 1 / 3) * Math.pow(yFactor, 1 / 2); |
| } |
| } |
| context.putImageData(pixelData, 0, 0); |
| target.clearRect(0, 0, 480, 320); |
| if (i > 40) clearInterval(drawInterval); |
| else callback(); |
| }, 50); |
| } |
| |
| function setVolume(value) { |
| gba.audio.masterVolume = Math.pow(2, value) - 1; |
| } |
| |
| function setPixelated(pixelated) { |
| var screen = document.getElementById('screen'); |
| var context = screen.getContext('2d'); |
| context.imageSmoothingEnabled = !pixelated; |
| } |
| |
| function setupTouchControls() { |
| function pressKey(code) { window.dispatchEvent(new KeyboardEvent('keydown', {keyCode: code})); } |
| function releaseKey(code) { window.dispatchEvent(new KeyboardEvent('keyup', {keyCode: code})); } |
| |
| const mapping = { |
| 'up': 38, 'down': 40, 'left': 37, 'right': 39, |
| 'a': 88, 'b': 90, 'l': 65, 'r': 83, |
| 'start': 13, 'select': 16 |
| }; |
| |
| Object.keys(mapping).forEach(id => { |
| const el = document.getElementById(id); |
| if(el) { |
| el.addEventListener('touchstart', (e) => { e.preventDefault(); pressKey(mapping[id]); }); |
| el.addEventListener('touchend', (e) => { e.preventDefault(); releaseKey(mapping[id]); }); |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
| <canvas id="screen" width="480" height="320"></canvas> |
|
|
| <section id="controls"> |
| <div id="preload"> |
| <button class="bigbutton" id="select" onclick="document.getElementById('loader').click()">SELECT 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" onclick="togglePause()">PAUSE</button> |
| <button onclick="reset()">RESET</button> |
| </div> |
| </section> |
|
|
| <div id="touchControls"> |
| <div id="dpad-container" style="display: grid; grid-template-columns: repeat(3, 65px); grid-template-rows: repeat(3, 65px); gap: 5px;"> |
| <button id="up" class="dpad-btn" style="grid-column: 2; grid-row: 1;">↑</button> |
| <button id="left" class="dpad-btn" style="grid-column: 1; grid-row: 2;">←</button> |
| <button id="right" class="dpad-btn" style="grid-column: 3; grid-row: 2;">→</button> |
| <button id="down" class="dpad-btn" style="grid-column: 2; grid-row: 3;">↓</button> |
| </div> |
|
|
| <div id="action-container" style="display: flex; flex-direction: column; align-items: flex-end; gap: 20px;"> |
| <div style="display: flex; gap: 10px;"> |
| <button id="l" class="shoulder-btn">L</button> |
| <button id="r" class="shoulder-btn">R</button> |
| </div> |
| <div style="display: flex; gap: 25px; margin-right: 10px;"> |
| <button id="b" class="action-btn">B</button> |
| <button id="a" class="action-btn">A</button> |
| </div> |
| <div style="display: flex; gap: 15px;"> |
| <button id="select" class="meta-btn">SELECT</button> |
| <button id="start" class="meta-btn">START</button> |
| </div> |
| </div> |
| </div> |
|
|
| </body> |
| </html> |
|
|
