引言
关于如何将flash小游戏嵌入Halo博客页面，我也是研究了很久，大概两天左右吧。
根据我们以往的经验，swf格式的动画或者游戏文件可以在视频播放器中打开，而且可以像4399网站中那样游玩，如下图：
前期尝试
所以，一开始我是尝试的方法是通过在页面中插入视频的方式：
但是我发现Halo博客的视频插入选项不认swf这个格式的文件：
Flash游戏网页设计
显然，这条路是行不通的。随后我研究了很久，考虑自己设计一个网页，通过在Halo页面中添加“嵌入网页”的方式将flash小游戏嵌入到Halo页面中。以下就是我用deepseek生成的一个html网页代码，它只是个静态页面，通过加载ruffle插件，然后通过get传参的方式，调用远程（或者本地）的swf文件，显示到网页中，此代码各位可以直接使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: transparent; /* 改为透明 */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0;
}
.game-container {
width: 95%;
max-width: 1000px;
margin: 0 auto;
padding: 0.5rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.game-title {
text-align: center;
color: #333;
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
.game-area-wrapper {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
max-width: 1000px;
margin: 0 auto;
}
.game-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.back-btn {
display: block;
width: 150px;
margin: 1.5rem auto;
padding: 0.8rem 1rem;
background-color: #3498db;
color: white;
text-align: center;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
font-size: 1.1rem;
}
.back-btn:hover {
background-color: #2980b9;
}
.footer {
text-align: center;
padding: 1.2rem 0;
color: #7f8c8d;
font-size: 0.95rem;
background-color: #e0e0e0;
}
.error-message {
color: red;
text-align: center;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* 加载动画样式 */
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
}
.loader-spinner {
width: 100%;
height: 100%;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="main-content">
<div class="game-container">
<div class="game-area-wrapper">
<!-- 加载动画 -->
<div id="loader" class="loader">
<div class="loader-spinner"></div>
</div>
<!-- 游戏容器 -->
<div id="flash-game-container" class="game-area" style="display: none;"></div>
</div>
</div>
</div>
<!-- 引入 Ruffle 模拟器 -->
<script src="https://unpkg.com/ruffle-rs@latest/dist/ruffle.js"></script>
<script>
// 从URL参数获取游戏文件名
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
// 获取游戏文件名
const gameFile = getQueryParam('game') || 'game.swf';
// 初始化 Ruffle
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("flash-game-container");
const loader = document.getElementById("loader");
// 设置玩家配置
player.style.width = "100%";
player.style.height = "100%";
player.config = {
"autoplay": "on",
"unmuteOverlay": "hidden",
"letterbox": "false"
};
container.appendChild(player);
// 加载指定的 Flash 游戏
player.load(gameFile)
.then(() => {
// 加载完成后隐藏加载动画，显示游戏容器
loader.style.display = "none";
container.style.display = "block";
})
.catch(e => {
console.error("Flash 游戏加载失败:", e);
loader.style.display = "none";
container.innerHTML = `<p class="error-message">游戏加载失败<br>${e.message}<br>请检查游戏文件是否存在</p>`;
container.style.display = "block";
});
});
</script>
</body>
</html>用法就是新建一个html文件，把代码的内容粘贴进去如下图：
网页站点部署
然后你需要使用web中间件搭建一个web服务，可以用nginx或者apache等等。比如我用的nginx，新建一个站点。
把刚刚新建的game.html文件放在网站目录下面：
这样你就能在本地直接访问这个网页，但是由于此时没有在url中指定get传参的参数“game”，所以会提示找不到swf文件：
在加上get传参并且指定swf文件后，就能正常进行游玩：
Flash游戏网页嵌入Halo页面
接下来就是把这个页面嵌入Halo博客的页面中：
首先要确保Halo博客的运行环境能够访问上述游戏页面，然后在Halo博客管理后台，新建页面，添加嵌入网页：
输入此前部署好的游戏页面url，这里可以参考我采用的url，我这里是直接调用的网上的swf文件下载链接:
https://127.0.0.1:81/game.html?game=https://b2.zczc.men/file/flash-swf/2f1681af86d28042009c7c1a43cfd9da8df20abcc598501db67175f31d87c646.swf
这样做的好处是无需在本地存储swf文件。
如下图所示，在输入了url后就显示出了游戏画面：
接着发布这个页面，在页面管理中，查看这个页面的设置，即可得知这个页面的链接：
访问这个链接，即可进入博客中的游戏页面：
评论