File size: 5,275 Bytes
89610f7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <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>
/* CSS to ensure buttons are visible and responsive on iOS */
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; }
/* The Touch Layer */
#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); }
/* D-PAD Layout */
#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; }
/* Buttons A & B */
#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); }
/* Start & Select */
.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() {
// Key codes from your keypad.js file:
// A=0, B=1, SELECT=2, START=3, RIGHT=4, LEFT=5, UP=6, DOWN=7
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();
// Unlock audio on iOS
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);
};
// iOS specifically needs touchstart/touchend with passive:false
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>
|