P粉5508235772023-09-02 11:05:59
Untuk menggunakan skrip untuk memastikan aplikasi anda tetap setempat, ingat dua perkara:
- Skrip telah ditulis dan akan mencari sumber (js, css, gambar) dalam struktur direktori Apl semasa
- Permintaan dan pembacaan fail disekat oleh CORS dalam kebanyakan penyemak imbas melainkan anda melumpuhkan semakan pra-penerbangan CORS.
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:
<script src="pako.min.js"></script>
<script src="localforage.js"></script>
<script src="app.js"></script>
<script src="build/44gba.js"></script>
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:
npx http-server ./ --port 4000
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 < code> 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.js baharu, 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 ...balas
0