HTML5游戏开发实战分享

现在越来越多的人开始尝试使用html5开发游戏应用,随着设备性能的提高,以及硬件API支持度的完善,这些条件让使用html5开发出一个媲美原生体验的游戏应用变得可能,或许你已经是迫不及待了。Web的优势不言而喻,跨平台特性可以大大降低应用的开发成本;知道地址就够了,服务器端更新,这些同时又能降低用户的获取成本。 但目前来说,使用html5技术还是会碰到不少挑战,本文主要分享手机QQ中一款html5游戏的实战经验,我们在开发的过程中,做了一些创新的地方,希望能给大家打开更多思路。 首先让来大家来玩一款游戏。在手机QQ的好友聊天对话框中,按右下角的“+”号键,即会出现“一起玩”的黄色Logo,点击Logo,即可进入“一起玩”平台选择游戏。 一起玩中的两款游戏都是html5应用,下面是开发过程中的一些要点。

使用DNS Prefetching加速网页

什么是DNS Prefetching? 在网站性能优化方面,大家都知道可以使用多个域名加载静态资源文件,解决一个域名下并发请求数的限制,同时也不会附带不必要的cookie. 但也并非域名越多越好,多个域名将增加DNS的解析时间。另外,在你的站点中,链接出去的也可能是其他域名。DNS解析所花费的时间变化很大,延时范围从大约1毫秒到以常见的几秒钟时间。DNS Prefetching就是为了加速DNS解析时间,它实现了预解析功能,从而减少后面资源的加载时间。 如何使用? <link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”> 非常简单,在网页头部增加rel属性为”dns-prefetch”的link标签,并在href中指定想要预解析的域名。 Example: <html> <head> <link rel=”dns-prefetch” href=”//www.domain1.com”> <link rel=”dns-prefetch” href=”//www.domain2.com”> </head> <body> <img src=”www.domain1.com/image1.jpeg”> <script src=”www.domain2.com/script1.js”> </body> </html> 当你网站包含多个域名时,这个是一个非常实用的功能,现在就开始使用吧。 浏览器支持: Firefox 3.5+, Chrome, Safari 5+ and IE 9+ 参考链接: The Chromium Projects – DNS Prefetching Controlling DNS prefetching

前端开发利器——Koala v1.0正式发布

  koala是一款开发者工具,负责对less、sass、coffeescript的编译工作,帮助web开发者更高效地使用less、sass、coffeescript开发。 项目地址:http://koala-app.com 功能特性: 多语言支持:支持less、sass、coffeescript 和 compass framework。 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。 编译选项:可以设置各个语言的编译选项。 代码压缩:less & sass支持编译后自动代码压缩. 错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。 跨平台:windows、linux、mac都能完美运行。   项目当中越来越多地使用到less,现有的一些工具如winless、simpless功能都比较单一,无法满足开发要求,所以干脆就自己写了一个。 koala是基于nodejs + webkit开发而成,大部分人都无法想到nodejs也能用来开发桌面应用,事实告诉我们是可以的。 这里有一个非常棒的项目,它结合了node与webkit,使用node做为后端处理语言,webkit做为前端界面,这样简直是天作之合,现在前端开发者也能开发桌面应用了。node webkit项目地址:https://github.com/rogerwang/node-webkit

如何调试less & sass

很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。 less & sass 都无法在浏览器中直接执行,需要变成CSS。有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。 看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件 FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。 具体设置如下:

如何在IIS下部署php程序?

一般我们使用LAMP或者WAMP组合,但有时候我们想在windows服务器同时下跑.net与php,这时就必须使用IIS了。IIS是支持php的,而且配置也很简单。 具体操作: 1、打开IIS的CGI功能。 控制面板–打开或关闭windows功能。 2、下载最新php程序,解压到某个目录。 3、安装PHP Manager for IIS,下载地址:http://phpmanager.codeplex.com/。 4、添加一个应用程序池PHP Pool,.NET Framework版本选择“无托管代码”,托管模式选择“集成”。 5、新建站点,应用程序池选择PHP Pool。 6、在网站列表中选中刚刚创建的站点,在右侧的功能视图中找到并打开PHP Manager,点击Register new PHP version,选择刚刚解压的PHP程序目录下php-cgi.exe。 Ok,到这里IIS就能部署PHP程序了。

git简易指南

关于Git的一个很简介,很清爽的学习网站。 效果如下,网站使用css 3完成,建议用新版火狐或Chrome查看。 地址:http://rogerdudler.github.com/git-guide/index.zh.html

Convert JSON object to Custom C# object

最近开发的项目中遇到一个问题,需要批量添加用户,用户信息在View里是一个Javascript对象,多个用户组成一个数组,然后提交到Control。 Google查询了些资料,把问题解决了,在这记录下。

关于URL编码

一、问题的由来 URL就是网址,只要上网,就一定会用到。 一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。比如,世界上有英文字母的网址 “http://www.abc.com”,但是没有希腊字母的网址“http://www.aβγ.com”(读作阿尔法-贝塔-伽玛.com)。这是 因为网络标准RFC 1738做了硬性规定: “…Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.” “只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*’(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。” 这意味着,如果URL中有汉字,就必须编码后使用。但是麻烦的是,RFC 1738没有规定具体的编码方法,而是交给应用程序(浏览器)自己决定。这导致“URL编码”成为了一个混乱的领域。 下面就让我们看看,“URL编码”到底有多混乱。我会依次分析四种不同的情况,在每一种情况中,浏览器的URL编码方法都不一样。把它们的差异解释清楚之后,我再说如何用Javascript找到一个统一的编码方法。 二、情况1:网址路径中包含汉字 打开IE(我用的是8.0版),输入网址“http://zh.wikipedia.org/wiki/春节”。注意,“春节”这两个字此时是网址路径的一部分。 查看HTTP请求的头信息,会发现IE实际查询的网址是“http://zh.wikipedia.org/wiki/%E6%98%A5%E8%8A%82”。也就是说,IE自动将“春节”编码成了“%E6%98%A5%E8%8A%82”。 我们知道,“春”和“节”的utf-8编码分别是“E6 98 A5”和“E8 8A 82”,因此,“%E6%98%A5%E8%8A%82”就是按照顺序,在每个字节前加上%而得到的。(具体的转码方法,请参考我写的《字符编码笔记》。) 在Firefox中测试,也得到了同样的结果。所以,结论1就是,网址路径的编码,用的是utf-8编码。 三、情况2:查询字符串包含汉字 在IE中输入网址“http://www.baidu.com/s?wd=春节”。注意,“春节”这两个字此时属于查询字符串,不属于网址路径,不要与情况1混淆。 查看HTTP请求的头信息,会发现IE将“春节”转化成了一个乱码。 切换到十六进制方式,才能清楚地看到,“春节”被转成了“B4 BA BD DA”。 我们知道,“春”和“节”的GB2312编码(我的操作系统“Windows [...]

面向对象三要素

面向对象三要素是封装 继承 多态 封装 封装就是事物抽象为类,把对外接口暴露,将实现和内部数据隐藏。 继承 面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”。 被继承的类称为“基类”、“父类”或“超类”。 继承的过程,就是从一般到特殊的过程。 要实现继承,可以通过“继承”(Inheritance)和“组合”(Composition)来实现。 在某些 OOP 语言中,一个子类可以继承多个基类。但是一般情况下,一个子类只能有一个基类,要实现多重继承,可以通过多级继承来实现。 继承概念的实现方式有三类:实现继承、接口继承和可视继承。 Ø         实现继承是指使用基类的属性和方法而无需额外编码的能力; Ø         接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力; Ø         可视继承是指子窗体(类)使用基窗体(类)的外观和实现代码的能力。 在考虑使用继承时,有一点需要注意,那就是两个类之间的关系应该是“属于”关系。例如,Employee 是一个人,Manager 也是一个人,因此这两个类都可以继承 Person 类。但是 Leg 类却不能继承 Person 类,因为腿并不是一个人。 抽象类仅定义将由子类创建的一般属性和方法,创建抽象类时,请使用关键字 Interface 而不是 Class。 OO开发范式大致为:划分对象→抽象类→将类组织成为层次化结构(继承和合成) →用类与实例进行设计和实现几个阶段。 多态 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。简单的说,就是一句话:允许将子类类型的指针赋值给父类类型的指针。 实现多态,有二种方式,覆盖,重载。 覆盖,是指子类重新定义父类的虚函数的做法。 重载,是指允许存在多个同名函数,而这些函数的参数表不同(或许参数个数不同,或许参数类型不同,或许两者都不同)。 其 实,重载的概念并不属于“面向对象编程”,重载的实现是:编译器根据函数不同的参数表,对同名函数的名称做修饰,然后这些同名函数就成了不同的函数(至少 对于编译器来说是这样的)。如,有两个同名函数:function func(p:integer):integer;和function func(p:string):integer;。那么编译器做过修饰后的函数名称可能是这样的:int_func、str_func。对于这两个函数的 调用,在编译器间就已经确定了,是静态的(记住:是静态)。也就是说,它们的地址在编译期就绑定了(早绑定),因此,重载和多态无关!真正和多态相关的是 “覆盖”。当子类重新定义了父类的虚函数后,父类指针根据赋给它的不同的子类指针,动态(记住:是动态!)的调用属于子类的该函数,这样的函数调用在编译 期间是无法确定的(调用的子类的虚函数的地址无法给出)。因此,这样的函数地址是在运行期绑定的(晚邦定)。结论就是:重载只是一种语言特性,与多态无 关,与面向对象也无关!引用一句Bruce Eckel的话:“不要犯傻,如果它不是晚邦定,它就不是多态。” 那么,多态的作用是什么 呢?我们知道,封装可以隐藏实现细节,使得代码模块化;继承可以扩展已存在的代码模块(类);它们的目的都是为了——代码重用。而多态则是为了实现另一个 [...]

基本数据结构之“堆栈和队列”

一、堆栈 1.概述   栈(stack)是一种特殊的线性表。作为一个简单的例子,可以把食堂里冼净的一摞碗看作一个栈。在通常情况下,最先冼净的碗总是放在最底下,后冼净的碗总是摞在最顶上。而在使用时,却是从顶上拿取,也就是说,后冼的先取用,后摞上的先取用。好果我们把冼净的碗“摞上”称为进栈,把“取用碗”称为出栈,那么,上例的特点是:后进栈的先出栈。然而,摞起来的碗实际上是一个表,只不过“进栈”和“出栈”,或者说,元素的插入和删除是在表的一端进行而已。   一般而言,栈是一个线性表,其所有的插入和删除均是限定在表的一端进行,允许插入和删除的一端称栈顶(Top),不允许插入和删除的一端称栈底(Bottom)。若给定一个栈S=(a1, a2,a3,…,an),则称a1为栈底元素,an为栈顶元素,元素ai位于元素ai-1之上。栈中元素按a1, a2,a3,…,an 的次序进栈,如果从这个栈中取出所有的元素,则出栈次序为an, an-1,…,a1 。也就是说,栈中元素的进出是按后进先出的原则进行,这是栈结构的重要特征。因此栈又称为后进先出(LIFO—Last In First Out)表。我们常用一个图来形象地表示栈,其形式如下图:   通常,对栈进行的运算主要有以下几种:   (1) 往栈顶加入一个新元素,称进栈;   (2) 删除栈顶元素,称退栈;   (3) 查看当前的栈顶元素,称读栈。   此外,在使用栈之前,首先需要建立一个空栈,称建栈;在使用栈的过程中,还要不断测试栈是否为空或已满,称为测试栈。 2.栈的存储结构   栈是一种线性表,在计算机中用向量作为栈的存储结构最为简单。因此,当用编程语言写程序时,用一维数组来建栈十分方便。例如,设一维数组STACK[1..n] 表示一个栈,其中n为栈的容量,即可存放元素的最大个数。栈的第一个元素,或称栈底元素,是存放在STACK[1]处,第二个元素存放在STACK[2]处,第i个元素存放在STACK[i]处。另外,由于栈顶元素经常变动,需要设置一个指针变量top,用来指示栈顶当前位置,栈中没有元素即栈空时,令top=0,当top=n时,表示栈满。 3.对栈的几种运算的实现方法:  (1)建栈   这比较简单,只要建立一个一维数组,再把栈顶指针置为零。栈的容量根据具体的应用要求而定。  (2)测试栈   测试栈顶指针的值,若top=0,则栈空;若top=n,则栈满。  (3)读栈   若top=0,则栈空,无栈顶元素可读,出错;若top<>0,则回送栈顶元素的值STACK[top]。 使用一维数组来实现以上三种运算都比较简单,不必为其专门编写过程,只要在需要时,在程序中直接写入适当的语句即可。至于进栈和出栈也不复杂,下面给出它们的算法。  (4)进栈   将栈顶指针加1后,再把新元素送到栈顶。假设新元素x为整型。 procedure pushstack(var stack:arraytype;var top:integer;n:integer;x:elementtype); begin  if top=n  then begin witeln(‘Stack full!’); halt end  else begin top:=top+1; stack[top]:= x end end;  (5)退栈   取得栈顶元素的值后,再把栈顶指针top减1。 [...]