使用 HTML 运行《半条命》（以及《反恐精英 1.6》）
1 分•作者: yohimik•5 个月前
没有标题党，只有纯 HTML、CSS、JavaScript 和 WASM<p>只需复制并粘贴此 HTML 代码即可运行《半条命》<p>https://www.npmjs.com/package/xash3d-fwgs<p>https://www.npmjs.com/package/cs16-client<p>https://www.npmjs.com/package/hlsdk-portable<p>https://github.com/yohimik/webxash3d-fwgs<p><!DOCTYPE html>
<html>
<head>
<title>加载中</title>
<style>
canvas {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
}<p><pre><code> body {
margin: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/raw.js"></script></code></pre>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import JSZip from 'https://cdn.skypack.dev/jszip@3.10.1';<p><pre><code> async function main() {
const files = {}
const res = await fetch('https://raw.githubusercontent.com/x8BitRain/webXash/main/public/hl/hldm.zip')
const zip = await JSZip.loadAsync(await res.arrayBuffer());
await Promise.all(Object.keys(zip.files).map(async p => {
const file = zip.files[p]
if (file.dir) return;
const path = `/rodir/${p}`;
files[path] = await file.async("uint8array")
}))
Xash3D({
arguments: ['-windowed'],
canvas: document.getElementById('canvas'),
ctx: document.getElementById('canvas')
.getContext('webgl2', {
alpha: false,
depth: true,
stencil: true,
antialias: true
}),
dynamicLibraries: [
"filesystem_stdio.wasm",
"libref_gles3compat.wasm",
"cl_dlls/menu_emscripten_wasm32.wasm",
"dlls/hl_emscripten_wasm32.so",
"cl_dlls/client_emscripten_wasm32.wasm",
],
onRuntimeInitialized: function () {
Object.keys(files)
.forEach(k => {
const dir = k.split('/')
.slice(0, -1)
.join('/');
this.FS.mkdirTree(dir);
this.FS.writeFile(k, files[k]);
})
this.FS.chdir('/rodir')
},
locateFile: (p) => {
switch (p) {
case 'xash.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/xash.wasm'
case 'filesystem_stdio.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/filesystem_stdio.wasm'
case 'libref_gles3compat.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/libref_gles3compat.wasm'
case 'cl_dlls/menu_emscripten_wasm32.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/cl_dll/menu_emscripten_wasm32.wasm'
case 'dlls/hl_emscripten_wasm32.so':
return 'https://cdn.jsdelivr.net/npm/hlsdk-portable@latest/dist/dlls/hl_emscripten_wasm32.so'
case 'cl_dlls/client_emscripten_wasm32.wasm':
return 'https://cdn.jsdelivr.net/npm/hlsdk-portable@latest/dist/cl_dll/client_emscripten_wasm32.wasm'
default:
return p
}
},
})
}
main()</code></pre>
</script>
</body>
</html>
查看原文
No clickbait, just pure HTML, CSS, JavaScript, and WASM<p>Simply copy and paste this HTML code and run Half-Life<p>https://www.npmjs.com/package/xash3d-fwgs<p>https://www.npmjs.com/package/cs16-client<p>https://www.npmjs.com/package/hlsdk-portable<p>https://github.com/yohimik/webxash3d-fwgs<p><!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<style>
canvas {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: fixed;
}<p><pre><code> body {
margin: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/raw.js"></script></code></pre>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import JSZip from 'https://cdn.skypack.dev/jszip@3.10.1';<p><pre><code> async function main() {
const files = {}
const res = await fetch('https://raw.githubusercontent.com/x8BitRain/webXash/main/public/hl/hldm.zip')
const zip = await JSZip.loadAsync(await res.arrayBuffer());
await Promise.all(Object.keys(zip.files).map(async p => {
const file = zip.files[p]
if (file.dir) return;
const path = `/rodir/${p}`;
files[path] = await file.async("uint8array")
}))
Xash3D({
arguments: ['-windowed'],
canvas: document.getElementById('canvas'),
ctx: document.getElementById('canvas')
.getContext('webgl2', {
alpha: false,
depth: true,
stencil: true,
antialias: true
}),
dynamicLibraries: [
"filesystem_stdio.wasm",
"libref_gles3compat.wasm",
"cl_dlls/menu_emscripten_wasm32.wasm",
"dlls/hl_emscripten_wasm32.so",
"cl_dlls/client_emscripten_wasm32.wasm",
],
onRuntimeInitialized: function () {
Object.keys(files)
.forEach(k => {
const dir = k.split('/')
.slice(0, -1)
.join('/');
this.FS.mkdirTree(dir);
this.FS.writeFile(k, files[k]);
})
this.FS.chdir('/rodir')
},
locateFile: (p) => {
switch (p) {
case 'xash.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/xash.wasm'
case 'filesystem_stdio.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/filesystem_stdio.wasm'
case 'libref_gles3compat.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/libref_gles3compat.wasm'
case 'cl_dlls/menu_emscripten_wasm32.wasm':
return 'https://cdn.jsdelivr.net/npm/xash3d-fwgs@latest/dist/cl_dll/menu_emscripten_wasm32.wasm'
case 'dlls/hl_emscripten_wasm32.so':
return 'https://cdn.jsdelivr.net/npm/hlsdk-portable@latest/dist/dlls/hl_emscripten_wasm32.so'
case 'cl_dlls/client_emscripten_wasm32.wasm':
return 'https://cdn.jsdelivr.net/npm/hlsdk-portable@latest/dist/cl_dll/client_emscripten_wasm32.wasm'
default:
return p
}
},
})
}
main()</code></pre>
</script>
</body>
</html>