| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta 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 - Joystick Edition</title> |
| | |
| | <link rel="stylesheet" href="resources/main.css"> |
| | <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> |
| |
|
| | <style> |
| | body, html { |
| | background: #000; color: #fff; margin: 0; padding: 0; |
| | width: 100%; height: 100%; overflow: hidden; font-family: sans-serif; |
| | display: flex; flex-direction: column; |
| | } |
| | |
| | |
| | #screen-container { |
| | flex: 1; display: flex; align-items: center; justify-content: center; |
| | background: #111; position: relative; |
| | } |
| | canvas#screen { max-width: 100%; max-height: 100%; image-rendering: pixelated; } |
| | |
| | |
| | #touch-controller { |
| | height: 45vh; background: #1a1a1a; border-top: 3px solid #333; |
| | display: grid; grid-template-columns: 1fr 1fr; |
| | position: relative; |
| | } |
| | |
| | |
| | .joystick-zone { display: flex; align-items: center; justify-content: center; position: relative; } |
| | |
| | #joystick-base { |
| | width: 140px; height: 140px; background: rgba(255,255,255,0.1); |
| | border-radius: 50%; border: 2px solid #444; position: relative; |
| | touch-action: none; |
| | } |
| | |
| | #joystick-handle { |
| | width: 60px; height: 60px; background: #555; |
| | border: 2px solid #888; border-radius: 50%; |
| | position: absolute; top: 50%; left: 50%; |
| | transform: translate(-50%, -50%); |
| | box-shadow: 0 4px 10px rgba(0,0,0,0.5); |
| | pointer-events: none; |
| | } |
| | |
| | |
| | .action-zone { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; } |
| | .ab-buttons { display: flex; gap: 25px; transform: rotate(-15deg); } |
| | |
| | .btn-circle { |
| | width: 75px; height: 75px; border-radius: 50%; |
| | display: flex; align-items: center; justify-content: center; |
| | font-weight: bold; font-size: 24px; color: #fff; |
| | box-shadow: 0 6px 0 #000; |
| | } |
| | .btn-a { background: #ff1744; } |
| | .btn-b { background: #ffea00; color: #000; } |
| | .btn-circle:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; opacity: 0.9; } |
| | |
| | .meta-row { display: flex; gap: 20px; margin-top: 30px; } |
| | .btn-pill { background: #444; padding: 8px 20px; border-radius: 20px; font-size: 11px; font-weight: bold; } |
| | |
| | #load-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 30px; background: #00eaff; color: #000; border: none; font-weight: bold; border-radius: 8px; z-index: 5; } |
| | .hidden { display: none; } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <div id="screen-container"> |
| | <canvas id="screen" width="480" height="320"></canvas> |
| | <button id="load-btn" onclick="document.getElementById('file-input').click()">CHOOSE GBA GAME</button> |
| | <input id="file-input" type="file" accept=".gba" class="hidden" onchange="loadGame(this.files[0])"> |
| | </div> |
| |
|
| | [attachment_0](attachment) |
| |
|
| | <div id="touch-controller"> |
| | <div class="joystick-zone"> |
| | <div id="joystick-base"> |
| | <div id="joystick-handle"></div> |
| | </div> |
| | </div> |
| |
|
| | <div class="action-zone"> |
| | <div class="ab-buttons"> |
| | <div class="btn-circle btn-b" data-key="5">B</div> |
| | <div class="btn-circle btn-a" data-key="4">A</div> |
| | </div> |
| | <div class="meta-row"> |
| | <div class="btn-pill" data-key="10">SELECT</div> |
| | <div class="btn-pill" data-key="11">START</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | var gba; |
| | try { |
| | gba = new GameBoyAdvance(); |
| | gba.keypad.eatInput = true; |
| | gba.setCanvas(document.getElementById('screen')); |
| | } catch (e) { console.error(e); } |
| | |
| | function loadGame(file) { |
| | var reader = new FileReader(); |
| | reader.onload = (e) => { |
| | gba.loadRomFromFile(e.target.result, (res) => { |
| | if(res) { gba.runMain(); document.getElementById('load-btn').classList.add('hidden'); } |
| | }); |
| | }; |
| | reader.readAsArrayBuffer(file); |
| | } |
| | |
| | |
| | const base = document.getElementById('joystick-base'); |
| | const handle = document.getElementById('joystick-handle'); |
| | const baseRect = base.getBoundingClientRect(); |
| | const centerX = baseRect.width / 2; |
| | const centerY = baseRect.height / 2; |
| | const maxLimit = 50; |
| | |
| | let activeKeys = { 0:false, 1:false, 2:false, 3:false }; |
| | |
| | base.addEventListener('touchstart', handleJoystick, {passive: false}); |
| | base.addEventListener('touchmove', handleJoystick, {passive: false}); |
| | base.addEventListener('touchend', () => { |
| | handle.style.left = '50%'; |
| | handle.style.top = '50%'; |
| | resetDirections(); |
| | }, {passive: false}); |
| | |
| | function handleJoystick(e) { |
| | e.preventDefault(); |
| | const touch = e.touches[0]; |
| | const rect = base.getBoundingClientRect(); |
| | let x = touch.clientX - rect.left - centerX; |
| | let y = touch.clientY - rect.top - centerY; |
| | |
| | const distance = Math.sqrt(x*x + y*y); |
| | if (distance > maxLimit) { |
| | x = x * (maxLimit / distance); |
| | y = y * (maxLimit / distance); |
| | } |
| | |
| | handle.style.left = (centerX + x) + 'px'; |
| | handle.style.top = (centerY + y) + 'px'; |
| | |
| | |
| | const threshold = 15; |
| | updateKey(2, x < -threshold); |
| | updateKey(3, x > threshold); |
| | updateKey(0, y < -threshold); |
| | updateKey(1, y > threshold); |
| | } |
| | |
| | function updateKey(keyId, isPressed) { |
| | if (isPressed && !activeKeys[keyId]) { |
| | gba.keypad.keydown(keyId); |
| | activeKeys[keyId] = true; |
| | } else if (!isPressed && activeKeys[keyId]) { |
| | gba.keypad.keyup(keyId); |
| | activeKeys[keyId] = false; |
| | } |
| | } |
| | |
| | function resetDirections() { |
| | for(let i=0; i<4; i++) updateKey(i, false); |
| | } |
| | |
| | |
| | document.querySelectorAll('[data-key]').forEach(btn => { |
| | const k = parseInt(btn.getAttribute('data-key')); |
| | btn.addEventListener('touchstart', (e) => { e.preventDefault(); gba.keypad.keydown(k); if(navigator.vibrate) navigator.vibrate(15); }); |
| | btn.addEventListener('touchend', (e) => { e.preventDefault(); gba.keypad.keyup(k); }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
