Embedding the Chrome Offline Dinosaur Game in a Blog

Preface

Recently, while browsing other bloggers' sites, I came across someone embedding Chrome's offline dinosaur game into their blog. I found it quite interesting and wanted to do the same. However, I found the original blog's implementation and source code rather rough, so I located the source code on GitHub and further refined it to make it easier to embed in a blog. Now let me walk through the steps.

Come try mine first click here to start playing

Main Text

First, the project source code is here: Github

General Web Pages

Usage is very simple. If you're using it on a regular web page, just add

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

where runner.js can be any address. You can place the runner locally, or store it on OSS (Alibaba Cloud Object Storage) or similar storage.

Typecho Blog

We can also embed this code into the blog. Of course, for convenience here, I directly use the iframe method to include it, which is simpler. Here is my approach:

<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>

It's very simple, just one line is enough. Of course, you can also choose the conventional way to embed it.

My approach is to include the html file stored on my OSS (Alibaba Cloud Object Storage), so make sure your OSS (Alibaba Cloud Object Storage) lasts as long as your website does.

The source code of index.html is as follows:

<!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>

You can store it on your own local server and reference it there. The same goes for the js.

Notes

The markdown syntax in Typecho !!!你的代码!!! like this embeds code. Remember to use an English exclamation mark.

Do not copy my code directly for use, because a Referer whitelist has been set up to prevent hotlinking, so using it directly will not work.

This method supports playing on mobile phones, computers, and other devices.