Erreur d'obtention de l'émulateur
P粉447495069
2023-09-01 20:53:31
<p>J'ai essayé de procéder à l'ingénierie inverse d'un émulateur GBA (https://gba.44670.org/) que j'ai trouvé en ligne et j'ai utilisé un extracteur HTML pour essayer de le répliquer. Je voulais que cela fonctionne hors ligne, j'ai donc téléchargé tous les scripts sur mon ordinateur et je les ai exécutés là-bas. Cependant, après cela, le bouton "Sélectionner un fichier" n'apparaît plus, remplacé par la ligne de texte "Chargement, veuillez patienter...". En creusant plus profondément dans le code, j'ai découvert qu'il avait quelque chose à voir avec WASM. Le code est le suivant : </p>
<pre class="brush:php;toolbar:false;"><div id="wasm-loading">
Chargement, veuillez patienter...
</div>
<div id="select-rom" caché>
<type d'entrée="fichier" id="romFile" onchange="onFileSelected()" caché /></p>
<button onclick="$id('romFile').click()" id="btn-choose">Choisir un fichier...</button>
</div></pre>
<p>D'autres références à WASM dans le code se trouvent dans le fichier .js app.js : </p>
<pre class="brush:php;toolbar:false;">fonction wasmReady() {
romBuffer = Module._emuGetSymbol(1)
var ptr = Module._emuGetSymbol(2)
wasmSaveBuf = Module.HEAPU8.subarray(ptr, ptr + wasmSaveBufLen)
ptr = Module._emuGetSymbol(3)
imgFrameBuffer = new Uint8ClampedArray(Module.HEAPU8.buffer).subarray(ptr, ptr + 240 * 160 * 4)
idata = nouveau ImageData (imgFrameBuffer, 240, 160)
isWasmReady = vrai
document.getElementById('wasm-loading').hidden = true
document.getElementById('select-rom').hidden = false
}</pré>
<p>Je m'attendais à ce qu'une fois le script téléchargé, il fonctionne comme d'habitude. Je veux dire, il a toujours accès aux scripts dont il a besoin, n'est-ce pas ? J'ai essayé de masquer le texte en modifiant les instructions vrai/faux dans <code>document.getElementById('select-rom').hidden = false</code> et vice versa, mais rien ne semble fonctionner. Des idées? Merci d'avance. </p>
<p>(BTW, je recherche le chemin du fichier dans vscode.dev. Il ressemble à ceci : <code><script src="/Scripts/44gba.js"></script> < ;script src="/Scripts /app.js"></script> <script src="/Scripts/localforage.js"></script> .js></script></code>
)</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour utiliser un script afin de garder votre application locale, rappelez-vous deux choses :
C'est-à-dire, copiez le même HTML que vous obtenez dans la réponse (https://gba.44670.org/ ), ce qui préservera la structure du fichier. Voici ce que j'ai obtenu (
index.html) :<html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"> <link rel="apple-touch-icon" href="icon.png"> <link rel="manifest" href="manifest.json"> <title>44VBA</title> </head> <body> <style> a, a:visited { color: white; } html, body { position: fixed; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; cursor: inherit; } body { background-color: #000000; color: #FFFFFF; padding: 0; margin: 0; width: 100vw; height: 100vh; font-family: 'Myriad Set Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } hr { color: white; } button { border: 2px solid white; background: transparent; color: white; padding: .5em; } .vk-round { text-align: center; vertical-align: middle; border-radius: 50%; display: inline-block; } .vk { color: rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.25); position: absolute; z-index: 1; text-align: center; vertical-align: middle; display: inline-block; } .vk-hide { background-color: transparent !important } .vk-touched { background-color: rgba(255, 255, 255, 0.75) !important } .menu { background: rgb(32, 43, 56); position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 999; } #gba-canvas { position: absolute; z-index: -1; } #vk-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; touch-action: none; } #msg-layer { position: absolute; left: 0; width: 100%; top: 40vh; background: rgba(0, 0, 0, 0.5); z-index: 2; } textarea { background: transparent; color: #fff; border: 2px solid white; } /* textarea placeholder */ textarea::placeholder { color: #666; } </style> <div id="pause-menu" class="menu" style="background: rgba(32,43,56,0.7);" hidden=""> <button onclick="setPauseMenu(false)"> ← Back </button> <hr> Savegame management:<br> <button onclick="savBackupBtn()">Backup</button> <input type="file" id="sav-file" onchange="savRestoreBtn()" hidden=""> <button onclick="$id('sav-file').click()">Restore</button> <hr> <label for="cfg-scale-mode">Screen filter:</label> <select id="cfg-scale-mode"> <option value="0">Pixelated</option> <option value="1">Smooth</option> <option value="2">XBRZ</option> </select><br> <input type="checkbox" id="cfg-mute"> <label for="cfg-mute">Mute Sound</label><br> <input type="checkbox" id="cfg-turbo"> <label for="cfg-turbo">Turbo mode</label><br> <div id="div-cht"> Cheat Codes(backup your savegame before using it):<br> <textarea id="txt-code" style="width:100%" rows="10" placeholder="Cheat code: GamesharkAdv: XXXXXXXX YYYYYYYY CodeBreaker: XXXXXXXX YYYY"></textarea><br> <button onclick="chtSaveBtn()">Save Cheat Codes</button> </div> <hr> Cloud Save:<span id="span-cloud-id"></span><br> <button onclick="dpOnConnectButtonClicked()" id="btn-dp-connect">Connect Dropbox</button><br> <button onclick="dpManualBtn(true)">↑ Upload</button>|<button onclick="dpManualBtn(false)">↓ Download</button><br> </div> <div id="welcome" class="menu"> <h1 id="title">44VBA</h1> <hr> <div id="wasm-loading" hidden=""> Loading, please wait... </div> <div id="select-rom"> <input type="file" id="romFile" onchange="onFileSelected()" hidden=""><p></p> <button onclick="$id('romFile').click()" id="btn-choose">Choose File...</button> </div> <hr> Ver. 20230107 | <a href="https://github.com/44670/44vba">GitHub</a> <p> Your files are processed locally and won't be uploaded to any server.<br> This software should not be used to play games you have not legally obtained.<br> "GBA", "Game Boy Advance" are trademarks of Nintendo Co.,Ltd, This site is not associated with Nintendo in any way. </p> <div id="ios-hint" hidden=""> Due to iOS limitations, please open this site(https://gba.44670.org) in <b>Safari</b>, and add it to your <b>Home Screen</b> by <b>Share Menu</b> to continue. <p style="text-align: center;">⬇⬇⬇</p> </div> </div> <div id="msg-layer" hidden=""> <p id="msg-text">Gamepad disconnected.</p> </div> <div id="vk-layer" hidden=""> <div class="vk-rect vk" data-k="menu" style="top: 25px; left: 591px; width: 150px; height: 25px; font-size: 35px; line-height: 25px;">Menu</div> <div class="vk-rect vk" data-k="turbo" style="top: 25px; left: 0px; width: 150px; height: 25px; font-size: 35px; line-height: 25px;">F.F.</div> <div class="vk-rect vk" data-k="l" style="top: 75px; left: 0px; width: 150px; height: 50px; font-size: 35px; line-height: 50px;">L</div> <div class="vk-rect vk" data-k="r" style="top: 75px; left: 591px; width: 150px; height: 50px; font-size: 35px; line-height: 50px;">R</div> <div class="vk-round vk" data-k="a" style="top: 175px; left: 676px; width: 65px; height: 65px; font-size: 35px; line-height: 65px;">A</div> <div class="vk-round vk" data-k="b" style="top: 200px; left: 585px; width: 65px; height: 65px; font-size: 35px; line-height: 65px;">B</div> <div class="vk-rect vk" data-k="select" style="top: 605px; left: 205.5px; width: 150px; height: 25px; font-size: 35px; line-height: 25px;">Select</div> <div class="vk-rect vk" data-k="start" style="top: 605px; left: 385.5px; width: 150px; height: 25px; font-size: 35px; line-height: 25px;">Start</div> <div class=" vk" data-k="left" style="top: 200px; left: 0px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;">←</div> <div class=" vk" data-k="right" style="top: 200px; left: 100px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;">→</div> <div class=" vk" data-k="up" style="top: 150px; left: 50px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;">↑</div> <div class=" vk" data-k="down" style="top: 250px; left: 50px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;">↓</div> <div class=" vk vk-hide" style="top: 150px; left: 0px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;" data-k="ul"></div> <div class=" vk vk-hide" style="top: 150px; left: 100px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;" data-k="ur"></div> <div class=" vk vk-hide" style="top: 250px; left: 0px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;" data-k="dl"></div> <div class=" vk vk-hide" style="top: 250px; left: 100px; width: 50px; height: 50px; font-size: 35px; line-height: 50px;" data-k="dr"></div> </div> <canvas width="240" height="160" id="gba-canvas" style="width: 741px; height: 494px; left: 0px; image-rendering: pixelated;"></canvas> <script src="pako.min.js"></script> <script src="localforage.js"></script> <script src="app.js"></script> <script src="build/44gba.js"></script> </body></html>Ensuite, vous pouvez voir le chemin du script où vous allez créer le fichier :
De plus, vous devrez télécharger le fichier WASM (651 Ko compressé, 7,7 Mo non compressé). Vous pouvez télécharger le package zip ici (vous pouvez le trouver dans l'onglet "Réseau" des outils de développement) : https://gba.44670.org/build/44gba.wasm
Enfin, téléchargez tous les fichiers nécessaires (vous pouvez également télécharger des icônes et des images si vous le souhaitez, mais ils ne sont pas obligatoires) :
Vous obtiendrez une structure comme celle-ci :
Maintenant, ce serait formidable si vous pouviez désactiver CORS depuis votre navigateur. Mais sinon, vous devez le servir depuis un serveur HTTP local. Une option consiste à installer le package NPM : https://www.npmjs.com/package/http-server et à exécuter
npm install --global http-server. Après cela, accédez simplement au répertoire du projet dans le terminal et démarrez le serveur :Vous verrez le bon écran et chargerez la ROM, puis vous aurez terminé.
Éditeur : Résoudre les problèmes CORS locaux avec un simple hack
Comme je sais que vous utilisez maintenant ChromeOS et que techniquement vous ne savez pas comment le gérer avec Node, NPM et HTTP-Server, j'ai apporté quelques modifications pour vous et mis directement le contenu binaire WASM build/44gba.js et retour le contenu binaire sur la fonction readBinary pour contourner les problèmes CORS. Vous pouvez lancer directement index.html. Voici le lien vers le nouveau fichier
build/44gba.jsbuild/44gba.js, remplacez simplement son contenu par le fichier suivant : https://sendeyo.com/en/b02f94b524 Tout va bien. Voici les changements :const wasmData = `0061 736d 0100 0000 01c9 011e 6001 7f00 6002 7f7f 0060 0000 6001 7f01 7f60 037f ... ... ... ... ... ... ... ... 0a00 41c0 8106 0b04 7064 6202`; // other codes ... readBinary = filename=>{ var ret = new Uint8Array(wasmData); return ret; /* var ret = read_(filename, true); if (!ret.buffer) { ret = new Uint8Array(ret) } return ret */ } // other codes ...