今天在某網站瀏覽帖子的時候，發現帖子被刪除了，然后彈出了404頁面，頁面上集成了一個小游戲，小游戲長什么樣子呢？看下面這個圖！

第一步

查看小游戲源碼，發現這個小游戲完全是由JavaScript編寫的，因此，我們可以將這個小游戲輕松集成到我們的個人網站中，或者個人博客中，甚至你可以發布到你的QQ空間等地方！那么怎么做呢？

查看網頁源代碼，我們可以發現，這個小游戲最主要的兩個js文件庫來源于

phaser.min.jscatch-the-cat.js

這兩個文件。那么我們直接在網站上面查看資源，找到這兩個庫文件,然后保存到本地

當然，你也可以直接引用網站中的https地址資源，無需保存這兩個文件。

第二步

我們找到了js文件(或者js路徑)，那么怎么用呢？

假如我們的個人博客是使用的wordpress搭建好的，那么我們就可以直接在博客后臺里面發布這個小游戲了。

進入博客后臺，點擊文章發布，在正文內容中輸入以下代碼

游戲《圈小貓》

代碼解釋：

如圖中所示，我們引用了上面第一步當中的兩個js文件，如果你將這兩個JS文件放到你自己的服務器上，那么更改圖中的src地址即可，你沒有服務器的話，你就直接使用代碼中的地址即可

window.game=new CatchTheCatGame({w:11,h:11,r:20,backgroundColor:16777215,parent:"catch-the-cat",statusBarAlign:"center",credit:"www.yi-max.com"}

這一行代碼中的參數說明，分別是

w-11-橫向格子數；

h-11-豎向格子數；

r-20圓的半徑像素；
他們分別對應的是游戲界面中的藍色背景點數量以及整體畫布的大小！

最后

根據自己頁面大小自主調整上面的三個值，可以達到最佳效果，手機上展示的效果圖如下

看完后是不是非常簡單，自己動手試一試吧！

總結

以上是生活随笔為你收集整理的javascript小游戏_个人网站集成js小游戏《圈小猫》教程及源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。