今天在某網(wǎng)站瀏覽帖子的時(shí)候，發(fā)現(xiàn)帖子被刪除了，然后彈出了404頁(yè)面，頁(yè)面上集成了一個(gè)小游戲，小游戲長(zhǎng)什么樣子呢？看下面這個(gè)圖！

第一步

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

查看網(wǎng)頁(yè)源代碼，我們可以發(fā)現(xiàn)，這個(gè)小游戲最主要的兩個(gè)js文件庫(kù)來(lái)源于

這兩個(gè)文件。那么我們直接在網(wǎng)站上面查看資源，找到這兩個(gè)庫(kù)文件,然后保存到本地

當(dāng)然，你也可以直接引用網(wǎng)站中的https地址資源，無(wú)需保存這兩個(gè)文件。

第二步

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

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

進(jìn)入博客后臺(tái)，點(diǎn)擊文章發(fā)布，在正文內(nèi)容中輸入以下代碼

代碼解釋?zhuān)?/strong>

如圖中所示，我們引用了上面第一步當(dāng)中的兩個(gè)js文件，如果你將這兩個(gè)JS文件放到你自己的服務(wù)器上，那么更改圖中的src地址即可，你沒(méi)有服務(wù)器的話(huà)，你就直接使用代碼中的地址即可

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

這一行代碼中的參數(shù)說(shuō)明，分別是

w-11-橫向格子數(shù)；

h-11-豎向格子數(shù)；

r-20圓的半徑像素；

他們分別對(duì)應(yīng)的是游戲界面中的藍(lán)色背景點(diǎn)數(shù)量以及整體畫(huà)布的大??！

最后

根據(jù)自己頁(yè)面大小自主調(diào)整上面的三個(gè)值，可以達(dá)到最佳效果，手機(jī)上展示的效果圖如下

看完后是不是非常簡(jiǎn)單，自己動(dòng)手試一試吧！

以上就是【超過(guò)66萬(wàn)人的選擇！干貨分享（js小游戲源碼）js開(kāi)發(fā)的50個(gè)小游戲-個(gè)人網(wǎng)站集成js小游戲《圈小貓》教程及源碼】的全部?jī)?nèi)容。

微信:N915888888

(歡迎您前來(lái)咨詢(xún))