如今商业网站中用于广泛的HTML5无限下拉效果已经越来越受到游戏网站的喜爱。各个品牌为了打造专属自己的游戏特色,纷纷推出了模拟HTML5效果的品牌 站,且都起到了相当好的效果。可是从很多方面来说我们对HTML5的真正形态并不了解,而且在很多方便来说处于探索阶段。视觉上看上去酷炫屌的技术并不都 是HTML5,更多时候我们把HTML5当成了一切技术站点统称。

什么是HTML5?

  广义论及HTML5時,实际指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少浏览器对于需要外挂程式的丰富性网路应用 服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強网路应用的标准集。这样,搜索引擎可以更容易索引Web站点,我们也可以搜索到更快,更准确的信息。

  HTML5会带来一个统一的网络,无论是笔记本,台式机,还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候,开发者需要重新考 虑用户体验,网站浏览,网站结构等因素使得这个网站对任何硬件设备都通用。

  以下将讲述HTML5与常用的Flash的区别,及与IE的常见问题

  HTML5 与 Flash 这个争论由来已久,Flash被某些开发设计者滥用导致一些网页加载缓慢,而HTML5为之带来一线曙光。相对于移动设备用户来说,ios设备用户可能会 从HTML5获得更多好处,因为苹果一直不愿支持Flash。

  现在看来,就页面游戏而言,Flash是更好的选择,但取决于你的浏览器,如果你的游戏不是很复杂,HTML5是更好的选择。Web开发与设计者从这些争 论中应该吸取的东西是,Flash之外还有别的选择,但Flash有牢固的地盘,在为客户提供开发设计的时候,需要对他们的目标客户做一些研究。

  HTML5 与 IE IE9经常高调宣扬它对HTML5的兼容,它确实将是一个很好地支持HTML5的浏览器,因为,IE9使用 Windows现代图形API以及PC的图形加速卡输出文字和图形。微软还曾宣称,IE9将支持GPU加速的 HTML5,将图形滚动,3D图形显示等处理交由图形加速卡。 但是不可忽视的是,在中国用户中还是有一部分固定用户正在使用不支持HTML5的IE6。所以在网站的制作初期,目标用户的定位要明确。

实例欣赏

  李安导演的PI’S EPIC JOURNEY电影创造的一段佳话,而他的网站也极具代表性–以前大家着重在于内容本身,而它有着浓郁的HTML5的特征以交互为核心。整站在不同分辨 率下面css用的不一样,移动设备下面可以有动画,移动设备下面可以播放视频。就设计而言,3d翻转的特效可以大胆构想;可以使用滤镜、圆角,以前这些需 要切图来实现,现在只需几行css即可。这些强大的功能背后都给设计师留下了更多的想象空间,同时也创造出了更大的交互难度。

站址:http://journey.lifeofpimovie.com/

颇具特色的横版滚动站点,无论是视频影音结合技术,亦或是他里面展示的作品,都超级值得一看!

站址:http://vaclavkrbusek.com/

竖版滚动并带声效的站点,更为贴近游戏的感觉,受到游戏类网站设计者的青睐。此类形式被应用到多款游戏网站设计中,吸引观众眼球,并带来欢呼声。

站址:http://www.soul-reaper.com/

游戏网站中Flash模拟HTML5形式案例

>炫舞的品牌站:没有记错的话,炫舞应该是第一个吃螃蟹的吧,虽然他们用的是Flash模拟的HTML5的一个形式,但是他依旧很明确的表现出了炫舞的特色。

站址:http://x5.qq.com/act/a20120520love/

英雄联盟的2012年5月主题活动站:也是Flash模拟的HTML5的一个形式,但是他融入了音乐和声效,在视觉上眼睛一亮的同时,在听觉上也备受震撼。

站址:http://lol.qq.com/act/a20120511brand/

>地下城与勇士:相继推出了好几款模拟HTML5效果卡通的特色页面,里面设计与交互动画细节更为细腻。

站址:http://dnf.qq.com/act/a20120718show/
站址:http://dnf.qq.com/act/a20121011show/


 

以上几个案例在当时来说,已经很具实验尝新精神了,同时也颇具当时阶段性的制约性:

1.预留制作时间不足,很多策划者可能觉得就是向下滚动,制作起来应该是分分钟的事情,但是在HTML5技术未广泛成熟之前,制作所要耗费的时间可能是Flash的3-5倍。就今日而言此问题依旧存在,这点请在项目初期就明确的预留出充分时间。

2.动画的复杂程度,HTML5动画的制作相对于Flash来说制作更为繁琐、耗时更长,而效果却不如Flash细腻,如果该页面需要复杂动画特效,建议还是使用Flash制作,动画达到效果将更加优雅。

昨 天的尝试是为了今天更好的作品而存在的。2013年从NBA2Konline到怪物猎人,再到如今的剑灵的官网与天涯明月刀的公子羽品牌站,几款尝试新技 术站点的问世,预示着技术的越来越成熟的同时也让我们对明年的站点充满了期待。在此,也希望之后能开辟更多更具时代性&特色鲜明的游戏网站。

NBA2Konline站址:http://nba2k.qq.com/act/a20130606lbj/

怪物猎人:很遗憾下线了。。。

天涯明月刀站址:http://wuxia.qq.com/act/a20131010gzy/

原文地址:腾讯游戏tgideas
作者:doris

今日文摘:浅谈 HTML5 的游戏化之路的更多相关文章

  1. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  2. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  3. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  4. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  5. 浅谈公平组合游戏IGC

    浅谈公平组合游戏IGC IGC简介 一个游戏满足以下条件时被叫做IGC游戏 (前面三个字是自己YY的,不必在意) 竞争性:两名玩家交替行动. 公平性:游戏进程的任意时刻,可以执行的操作和操作者本人无关 ...

  6. 浅谈Android Studio3.0更新之路(遇坑必入)

    >可以参考官网设置-> 1 2 >> Fantasy_Lin_网友评论原文地址是:简书24K纯帅豆写的我也更新一下出处[删除]Fa 转自脚本之家 浅谈Android Studi ...

  7. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  8. 浅谈html5及其新特性

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  9. 浅谈html5某些新元素的用途

    大家都知道html是一种前端网页语言,从出现到现在已经经历了很多的版本了,但是随着html的不断发展,现在的html5已经不再是单一的前端页面语言了,html,javascript,css不再单纯的只 ...

随机推荐

  1. FormsAuthentication.SetAuthCookie 方法登录

    FormsAuthentication.SetAuthCookie 方法,登录的原理. FormsAuthentication.SetAuthCookie 方法登录的过期时间. 登录相关阅读 asp. ...

  2. QSerialPort-Qt串口通讯

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QSerialPort-Qt串口通讯     本文地址:http://techieliang. ...

  3. 课堂学习Scrum站立会议

    项目名称:连连看游戏 小组成员:张政,张金生,李权,武志远 Master:张政 站立会议内容 1.已完成的内容 windows下的基本用户页面,实现了多个BUTTON下7*12的页面布局,但是出现了b ...

  4. 探究Android中通过继承ViewGroup自定义控件的原理

    原文地址:http://www.cnblogs.com/kross/p/3378395.html 今天断断续续的折腾了一下午到现在20:38,终于有点明白了.o(╯□╰)o 在Android开发中,我 ...

  5. 图解用HTML5的popstate如何玩转浏览器历史记录

    一.popstate用来做什么的?简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和stat ...

  6. 第93天:CSS3 中边框详解

    CSS3 边框详解 其中边框圆角.边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握. 一.边框圆角  border-radius    每个角可以设置两个值 ...

  7. android面试(1)----布局

    1.说出android 五中布局,并说出各自作用? FrameLayout: 堆叠布局,也是就可以堆在一起.最长应用于Fragment的使用上. LinearLayout: 线性布局,可以是竖排或水平 ...

  8. elsarticle模板 去掉Preprint submitted to

    参考:http://latex.org/forum/viewtopic.php?t=11123 修改elsarticle.cls文件. 我的CTeX装在c盘中,elsarticle.cls文件路径为: ...

  9. logstash收集MySQL慢查询日志

    #此处以收集mysql慢查询日志为准,根据文件名不同添加不同的字段值input { file { path => "/data/order-slave-slow.log" t ...

  10. BZOJ1564 NOI2009二叉查找树(区间dp)

    首先按数据值排序,那么连续一段区间的dfs序一定也是连续的. 将权值离散化,设f[i][j][k]为i到j区间内所有点的权值都>=k的最小代价,转移时枚举根考虑是否修改权值即可. #includ ...