背景與前言

現在什么技術火？Android，ios，HTML5，人工智能，云計算……如此多的技術，而且發展非常快，大家都很迷茫，到底要學什么呢？我也很迷茫，只能走一步算一步。

但是人總是有理想的是吧。我的理想很簡單：一步步實現我的下一個理想。大一的時候，我看了一部電影，叫《社交網絡》，那時的理想就是讓學校找我寫代碼。現在大三了，實現了這個理想，給我配了電腦，配了辦公室。下一個理想，做出一番事業，然后去母校演講。

做為一個男性，本能里應該對游戲感興趣。我也很想寫一個自己的游戲，想想，走進網吧，大家玩的都是你寫的游戲，很有成就感。

再學習了android的cocos2d-x之后，又來研究了一下html5的版本，因為這個版本是有專人維護的，所以以后也不用擔心更新問題。

從哪開始？

很多人學一個技術的時候根本不知道從哪里上手，確實，一個技術最難的應該就是入門了，只要入了門，多花點時間很容易就能掌握，這也正是中國的那句古話：師父領進門，修行在個人。

廢話了這么多，cocos2d-html5(以后簡稱cocos2d吧)怎么入門呢？首先可以看官網(http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5)，他有一個名叫Getting?Started?with?Cocos2d-html5的文章。一般有一定規模的技術或項目都有這么一個文檔，教你怎么快速的上手，那是不是照著這篇文章做就行了呢？在我寫這篇日志的時候，那篇文章的教程是一個過時的教程，也就是說看那篇文章是沒用的。(一般的項目是可以從這入門的。)

雖然教程過時了，但是它還是給我們指明了一個方向，那就是去看Hello?World項目。

Hello?World

我認為好的程序員應該養成這樣一個習慣：學習新技術或者開發的時候，從hello?world開始。

我們下載cocos2d的包，解壓之后可以看到一個叫做HelloHTML5World的文件。這里面也就是我們第一個要研究的代碼了。

這個項目不需要服務器容器，直接打開index.html就能看到效果。效果其實很簡單，但是哪個游戲不是通過一系列的簡單效果組成的呢？好了，直接看代碼吧。

我們首先要看的是main.js，為什么首先看這個我后面會說的。

它定義了一個cocos2dApp，調用了cc.Application.extend()方法。如果有一定基礎的人應該知道extend的意思，也就是繼承。這個cocos2dApp繼承了cc.Application，關于這個類我們也不多說，用的一般不多，基本只要用到一個方法applicationDidFinishLaunching。看名字就知道，這個方法是在程序加載完成的時候調用的。

在這個方法上面還有一個ctor方法，大家可以猜猜這個方法的作用，對了，就是構造函數。

好了，我們來一步步的解析代碼吧。

首先是ctor，構造函數中傳進來一個scene，這個scene我們后面就會看到。第一步就是調用父類構造函數，這個是需要注意的，很多錯誤就是沒調用父類的構造函數造成的。下面的代碼是一系列的配置，先配置了DEBUG的模式，它是從this.config里取出來的，那這個config是從哪里來的呢？我們會注意到，HelloHTML5World文件夾下還有一個cocos2d.js。這個文件就是配置文件了。繼續往下，我們就直接看注釋吧。

1 cc.initDebugSetting();//初始化debug設置

2 cc.setup(this.config['tag']);//裝載頁面上的canvas,這個tag就是canvas的id

3 //當程序資源在讀取的時候，顯示加載動畫

4 cc.Loader.getInstance().onloading = function () {

5 cc.LoaderScene.getInstance().draw();

6 };

7 //加載完了之后，調用下面的方法(實際是調用的run方法)

8 cc.Loader.getInstance().onload = function () {

9 cc.AppController.shareAppController().didFinishLaunchingWithOptions();

10 };

11 //提前加載資源

12 cc.Loader.getInstance().preload(g_ressources);

13 再看applicationDidFinishLaunching：

14 // 獲得導演

15 var director = cc.Director.getInstance();

16 // 設置是否顯示FPS

17 director.setDisplayStats(this.config['showFPS']);

18 // 設置幀率

19 director.setAnimationInterval(1.0 /

[3]一些移動端瀏覽器的兼容性Bug

來源:? 發布時間:?2013-11-22

做移動端的Web也有一段時間了，踩過的坑真心不少。

下面列出一些，移動端瀏覽器兼容性的Bug，供大家參考。

【UC瀏覽器】video標簽脫離文檔流

場景：標簽的父元素(祖輩元素)設置transform樣式后，標簽會脫離文檔流。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解決方案：不使用transform屬性。translate用top、margin等屬性替代。

【UC瀏覽器】video標簽總在最前

場景：標簽總是在最前(可以理解為video標簽的z-index屬性是Max)。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。

在8.6的版本,這個情況直接出現。

在8.7之后的版本,當同輩元素的height大于713這個「神奇」的數值時,才會被遮擋。

測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

【QQ手機瀏覽器】不支持HttpOnly

場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript可以直接讀取設置了HttpOnly的Cookie值。

測試環境：QQ手機瀏覽器?4.0/4.1/4.2 + Android 4.0 。

【MIUI原生瀏覽器】瀏覽器地址欄hash不改變

場景：location.hash 被賦值后，地址欄的地址不會改變。

但實際上 location.href 已經更新了，通過JavaScript可以順利獲取到更新后的地址。

雖然不影響正常訪問，但用戶無法將訪問過程中改變hash后的地址存為書簽。

測試環境：MIUI 4.0

【Chrome Mobile】fixed元素無法點擊

場景：父元素設置position: fixed;

子元素設置position: absolute;

此時，如果父元素/子元素還設置了overflow: hidden 則出現“父元素遮擋該子元素“的bug。

視覺(view)層并沒有出現遮擋，只是無法觸發綁定在該子元素上的事件。可理解為：「看到點不到」。

補充： 頁面往下滾動，觸發position: fixed;的特性時，才會出現這個bug，在最頂不會出現。

測試平臺： 小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法： 把父元素和子元素的overflow: hidden去掉。

———— 先這樣吧，應該會持續更新的 ?————

本文鏈接：http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html

作者：Maple Jan

本文鏈接

總結

以上是生活随笔為你收集整理的cocos html5 一直在加载失败,项目进行中的小问题-0426-【Cocos2d-html5】初识Cocos2d-html5-一些移动端浏览器的兼容性Bug_169IT.COM...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。