大家好，关于网站游戏源码很多朋友都还不太明白，今天小编就来为大家分享关于个人网站集成js小游戏《圈小猫》教程及源码的知识，希望对各位有所帮助！
第一步
查看小游戏源码，发现这个小游戏完全是由JavaScript编写的，因此，我们可以将这个小游戏轻松集成到我们的个人网站中，或者个人博客中，甚至你可以发布到你的QQ空间等地方！那么怎么做呢？
查看网页源代码，我们可以发现，这个小游戏最主要的两个js文件库来源于
phaser.min.js\ncatch-the-cat.js
这两个文件。那么我们直接在网站上面查看资源，找到这两个库文件,然后保存到本地
当然，你也可以直接引用网站中的https地址资源，无需保存这两个文件。
第二步
我们找到了js文件（或者js路径），那么怎么用呢？
假如我们的个人博客是使用的wordpress搭建好的，那么我们就可以直接在博客后台里面发布这个小游戏了。
进入博客后台，点击文章发布，在正文内容中输入以下代码
<divalign=&34;><fontsize=&34;face=&34;>游戏《圈小猫》</font><p></p><scriptsrc=&34;></script><scriptsrc=&34;></script><scriptsrc=&34;></script><divid=&34;></div><script>window.addEventListener(&34;,resizeCanvas,false);\n\nfunctionresizeCanvas(){\nw=canvas.width=window.innerWidth;\nh=canvas.height=window.innerHeight;\n};window.game=newCatchTheCatGame({w:11,h:11,r:20,backgroundColor:16777215,parent:&34;,statusBarAlign:&34;,credit:&34;})\n</script></div>
代码解释：
如图中所示，我们引用了上面第一步当中的两个js文件，如果你将这两个JS文件放到你自己的服务器上，那么更改图中的src地址即可，你没有服务器的话，你就直接使用代码中的地址即可
window.game=newCatchTheCatGame({w:11,h:11,r:20,backgroundColor:16777215,parent:&34;,statusBarAlign:&34;,credit:&34;}
这一行代码中的参数说明，分别是
w-11-横向格子数；
h-11-竖向格子数；
r-20圆的半径像素；他们分别对应的是游戏界面中的蓝色背景点数量以及整体画布的大小！
最后
OK，本文到此结束，希望对大家有所帮助。