P粉5508235772023-09-02 11:05:59
Pour utiliser un script afin de garder votre application locale, rappelez-vous deux choses :
- Le script a été écrit et recherchera des ressources (js, css, images) dans la structure actuelle du répertoire de l'application
- Les requêtes et les lectures de fichiers sont bloquées par CORS dans la plupart des navigateurs, sauf si vous désactivez les vérifications en amont CORS.
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 :
<script src="pako.min.js"></script>
<script src="localforage.js"></script>
<script src="app.js"></script>
<script src="build/44gba.js"></script>
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 :
npx http-server ./ --port 4000
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 < code> 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 ...répondre
0