有你在真好 的个人博客
2019年最火H5小游戏,源码分享
阅读:2280 添加日期:2021/3/27 23:20:09 原文链接:https://www.toutiao.com/item/6735726245725618696/
2019年最火H5小游戏,源码分享

逛吾爱论坛不小心看到的。然后去github看到了源码。试玩了一下,确实挺好玩的。

2019年最火H5小游戏,源码分享

游戏玩法很简单,就是围住小猫,就是用旗子围住它,不让它跑出去。

github源码地址:
https://github.com/xf11075/catch-the-cat

小编将其下载放到手机试玩,发现了两个问题。

1.没有自动缩放,屏幕太小

2.离顶部太近了。

所以小编将其改动了一下,使得其距离屏幕顶部距离100px,然后根据手机分辨率自动缩放。

效果如下:

2019年最火H5小游戏,源码分享

加入的源码如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 

<script type="text/javascript">
 var phoneWidth = parseInt(window.screen.width);
 var phoneScale = phoneWidth/640;
 var ua = navigator.userAgent;
 if (/Android (\d+\.\d+)/.test(ua)){
 var version = parseFloat(RegExp.$1);
 if(version>2.3){
 document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
 }else{
 document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
 }
 } else {
 document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
 }
 </script>

完整源码我已上传github,地址:
https://github.com/Tlntin/catch-the-cat

试玩链接:
https://www.ztjs.top/game/

喜欢的小伙伴关注一下我哦。叩谢啦。

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号