背景与前言
现在什么技术火？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
本文链接
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
