今天在某网站浏览帖子的时候，发现帖子被删除了，然后弹出了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小游戏《圈小猫》教程及源码相关推荐

SwiftUI 精品项目之完整Go围棋游戏App支持在线对战OGS Alamofire SocketIO（教程含源码）
实战需求 SwiftUI 精品项目之完整Go围棋App支持在线OGS Alamofire SocketIO 本文价值与收获看完本文后,您将能够作出下面的界面基础知识本项目是一个完全由Swift和 ...
HTML5游戏_基于DOM平台跳跃小游戏开发_9.按键监听
HTML5游戏_基于DOM平台跳跃小游戏开发按键监听视频讲解 HTML5游戏效果图本章知识点: 对象自定义名称属性,可以用变量来命名属性名称 //这段代码把多个属性(品牌, 型号, 排量)赋给 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
JavaScript实现跳跃游戏的动态编程自下而上的方法的算法（附完整源码）
JavaScript实现跳跃游戏的动态编程自下而上的方法的算法(附完整源码) dpBottomUpJumpGame.js完整源代码 dpBottomUpJumpGame.test.js完整源代码 dp ...
java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5游戏网站设计与实现MyBatis+系统+LW文档+源码+调试部署本源 ...
Node.js+MySQL开发的B2C商城系统源码+数据库（微信小程序端+服务端），界面高仿网易严选商城
下载地址:Node.js+MySQL开发的B2C商城系统源码+数据库(微信小程序端+服务端) NideShop商城(微信小程序端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计高校教师个人主页网站设计与实现MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计高校教师个人主页网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计高校教师个人主页网站设计与实现MyBatis+系统+LW文档+源码+调试部署 ...

javascript小游戏_个人网站集成js小游戏《圈小猫》教程及源码

第一步

第二步

最后

javascript小游戏_个人网站集成js小游戏《圈小猫》教程及源码相关推荐

最新文章

热门文章