将Chrome离线小恐龙嵌入博客

, ,

前言

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

正文

首先，项目源码在此：https://github.com/jchwl0527/chrome_dino_game

一般网页

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

1
2
3
4
5
<div id="container"></div>
<script src="runner.js"></script>
<script>
 initRunner('#container');
</script>

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

Typecho博客

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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://ghproxy.net/https://raw.githubusercontent.com/xsy2004/chrome_dino_game@master/runner.js"></script>
<script>
    initRunner( '#test' );
</script>

</body>
</html>

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

注意

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

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

🔰本文标题： 将Chrome离线小恐龙嵌入博客

🔞本文链接： https://193.gs/chromexnksls/index.html

🌡️本文总热度℃