Mendapat ralat emulator
P粉447495069
2023-09-01 20:53:31
<p>Saya telah cuba membuat kejuruteraan terbalik emulator GBA (https://gba.44670.org/) yang saya temui dalam talian dan menggunakan pengekstrak HTML untuk cuba menirunya. Saya mahu ia berfungsi di luar talian, jadi saya memuat turun semua skrip ke komputer saya dan menjalankannya di sana. Walau bagaimanapun, selepas ini, butang "Pilih Fail" tidak lagi muncul, digantikan dengan baris teks "Memuatkan, sila tunggu...". Menggali lebih dalam ke dalam kod saya mendapati bahawa ia mempunyai kaitan dengan WASM. Kodnya adalah seperti berikut: </p>
<pre class="brush:php;toolbar:false;"><div id="wasm-loading">
Muat turun sila tunggu...
</div>
<div id="select-rom"
<jenis input="fail"id="romFile" onchange="onFileSelected()"
<butang onclick="$id('romFile').klik()" id="btn-choose">Pilih Fail...</button>
</div></pre>
<p>Rujukan lain kepada WASM dalam kod adalah dalam apl fail .js.js: </p>
<pre class="brush:php;toolbar:false;">function wasmReady() {
romBuffer = Module._emuGetSymbol(1)
var ptr = Module._emuGetSymbol(2)
wasmSaveBuf = Module.HEAPU8.subarray(ptr, ptr + wasmSaveBufLen)
ptr = Modul._emuGetSymbol(3)
imgFrameBuffer = Uint8ClampedArray(Module.HEAPU8.buffer).subarray(ptr, ptr + 240 * 160 * 4) baharu
idata = ImageData baharu(imgFrameBuffer, 240, 160)
isWasmReady = benar
document.getElementById('wasm-loading').hidden = benar
document.getElementById('select-rom').hidden = palsu
}</pre>
<p>Saya menjangkakan bahawa sebaik sahaja saya memuat turun skrip ia akan berfungsi seperti biasa. Maksud saya, ia masih mempunyai akses kepada skrip yang diperlukan, bukan? Saya telah cuba menyembunyikan teks dengan menukar pernyataan benar/salah dalam <code>document.getElementById('select-rom').hidden = false</code> dan sebaliknya, tetapi nampaknya tiada apa yang berkesan. Ada idea? Terima kasih terlebih dahulu. </p>
<p>(BTW, saya sedang mencari laluan fail dalam vscode.dev. Ia kelihatan seperti ini: <code><script src="/Scripts/44gba.js"></script> < ;skrip src="/Scripts /app.js"></script> <script src="/Scripts/localforage.js"></script> .js></script></code>
)</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk menggunakan skrip untuk memastikan aplikasi anda tetap setempat, ingat dua perkara:
Iaitu, salin HTML yang sama yang anda dapat dalam respons (https://gba.44670.org/ ), yang akan mengekalkan struktur fail. Inilah yang saya dapat (
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>Kemudian anda boleh melihat laluan skrip di mana anda akan mencipta fail:
Selain itu, anda perlu memuat turun fail WASM (651KB dimampatkan, 7.7MB tidak dimampatkan). Anda boleh memuat turun pakej zip di sini (anda boleh menemuinya dalam tab "Rangkaian" alat pembangun): https://gba.44670.org/build/44gba.wasm
Akhir sekali, muat turun semua fail yang diperlukan (anda juga boleh memuat turun ikon dan imej jika anda mahu, tetapi ia tidak diperlukan):
Anda akan mendapat struktur seperti ini:
Sekarang, alangkah baiknya jika anda boleh menyahaktifkan CORS daripada penyemak imbas anda. Tetapi jika tidak, anda perlu menyampaikannya dari pelayan HTTP tempatan. Satu pilihan ialah memasang pakej NPM: https://www.npmjs.com/package/http-server dan jalankan
npm install --global http-server. Selepas itu, hanya navigasi ke direktori projek di terminal dan mulakan pelayan:Anda akan melihat skrin yang betul dan memuatkan ROM, kemudian anda selesai.
Editor: Menyelesaikan isu CORS tempatan dengan Hack yang mudah
Memandangkan saya tahu anda kini menggunakan ChromeOS dan secara teknikalnya tidak tahu cara mengendalikannya menggunakan Node, NPM dan HTTP-Server, saya membuat beberapa pengubahsuaian untuk anda dan meletakkan kandungan binari WASM secara terus build/44gba.js dan kembalikan kandungan binari pada fungsi readBinary untuk memintas isu CORS. Anda boleh melancarkan index.html secara langsung. Berikut ialah pautan kepada fail
build/44gba.jsbuild/44gba.jsbaharu, cuma gantikan kandungannya dengan fail berikut: https://sendeyo.com/en/b02f94b524 Anda semua sihat. Berikut adalah perubahannya: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 ...