HTML5 游戏前端开发秘籍

　　QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏。(本秘籍主要讲述使用HTML + CSS技术方面)

　　一、自适应

　　Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在某些机型中获取失败，要么用赋值缩放相关元素时造成游戏崩溃……

　　反反复复折腾良久之后，终于在克强同志宣布沪港通A股H股大升的日子里想到了用 absolute 来解决：

　　关键代码：

12345678

.game {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    overflow: hidden;    }

　　以上代码使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧，从而做到了适配各种屏幕。

　　然后使用 background-size:cover; 让背景覆盖全屏，此代码可以使背景 自动缩放 至 覆盖 容器大小。

　　然后内部的元素根据其所接近的边来做动态布局，下面是一个例子：

　　关键代码：

12345678

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。