前言

最近我逛各位大佬的博客时,看到了将chrome的离线游戏嵌入博客,就觉得比较有意思,想抄过来,发现原博客的实现方法和源代码实在粗糙,于是我在github上找到了源码,将其进一步更方便嵌入博客,现在讲讲步骤
先来玩下我的吧 点我开始玩耍

正文

首先,项目源码在此:Github

一般网页

使用方法很简单,如果在一般的网页中使用直接添加

<div id="container"></div>
<script src="runner.js"></script>
<script>
 initRunner('#container');
</script>

其中runner.js可以为任意地址,你可以把runner放在本地,也可以把runner放在OSS(阿里云对象储存)等储存。

Typecho博客

我们还可以将这段代码嵌入到博客里去,当然因为在这里图个方便,我直接使用iframe方法来引入,比较方便,我在这贴下我的方法

<iframe align="center" width="100%" height="200px" src="https://cdn.xsiy.ltd/site/typecho/game/index.html"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>

很简单啊,就一句话就可以了,当然你也可以选择常规的方式去嵌入。
我的方法是引入我OSS(阿里云对象储存)存放的html文件,所以要保证你的OSS(阿里云对象储存)和你的网站活的一样久。
index.html的网页源码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Runner</title>
</head>
<body>
<div id="test"></div>
<script src="https://cdn.xsiy.ltd/site/typecho/game/runner.js"></script>
<script>
    initRunner( '#test' );
</script>

</body>
</html>

你可以自己存放在本地服务器去引用,js同理

注意

在typecho中的markdown语法!!!你的代码!!!这样是嵌入代码,记得是英文感叹号。

不要直接复制我的代码使用,因为设置了Referer白名单防止盗链,直接使用是无效的。

本方法支持手机,电脑,等设备玩耍。

Last modification:March 31st, 2020 at 09:23 pm
If you think my article is useful to you, please feel free to appreciate