查看小游戏源码,发现这个小游戏完全是由Javascript编写的,因此,我们可以将这个小游戏轻松集成到我们的个人网站中,或者个人博客中,甚至你可以发布到你的QQ空间等地方!那么怎么做呢?
这两个文件。那么我们直接在网站上面查看资源,找到这两个库文件,然后保存到本地
我们找到了js文件(或者js路径),那么怎么用呢?
进入博客后台,点击文章发布,在正文内容中输入以下代码
<div align="center"><font size="3" face="黑体">游戏《圈小猫》</font><p></p><script src="https://hm.baidu.com/hm.js?46d556462595ed05e05f009cdafff31a"></script><script src="https://www.yi-max.com/wp-content/themes/generatepress/js/phaser.min.js"></script><script src="https://www.yi-max.com/wp-content/themes/generatepress/js/catch-the-cat.js"></script><div id="catch-the-cat"></div><script>window.addEventListener("resize", resizeCanvas, false);function resizeCanvas() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight;};window.game=new CatchTheCatGame({w:11,h:11,r:20,backgroundColor:16777215,parent:"catch-the-cat",statusBarAlign:"center",credit:"www.yi-max.com"})</script></div>如图中所示,我们引用了上面第一步当中的两个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-横向格子数;
r-20圆的半径像素;
他们分别对应的是游戏界面中的蓝色背景点数量以及整体画布的大小!
最后
看完后是不是非常简单,自己动手试一试吧!
