在拉斯维加斯正在举行的CES大会上,微软CEO鲍尔默宣布了基于IE9和HTML 5框架的割绳子游戏,由微软及游戏开发商ZeptoLab共同推出,用于促进IE9的使用及网页的美化,网页版点击这里。

回顾

与“Angry
Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om
Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。

为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML
5版“割绳子”游戏。

尽管这款游戏是为IE 9开发的,但它可以在任何兼容HTML 5的浏览器上运行。

微软随着 Windows 8 操作系统提供了
Internet Explorer 10.0
版,这标志IE浏览器对HTML5等新技术支持性的进一步发展与成熟,同时,IE10也提供了新的
Windows 8 风格的一个轻量级App,更加适合触摸,带给用户沉浸式的用户体验。

游戏主角就是一个贪吃的小绿怪兽,必须通过割绳子来将糖果送到小怪物嘴里,并搜集星星来增加得分。到目前为止,下载量已经超过6000万,潜力足以和《愤怒的小鸟》媲美。

背后的开发故事

在IE9割绳子推出一段时间后,微软发布了“《割绳子》HTML
5版背后的开发故事”一文。在此文当中,除了推荐了一个PxLoader资源加载库
和一堆开发工具和平台(Windows8、IE9、Visual
Web Developer 2010
Express),没有透露一丁点对开发人员有价值的东西。而作为广大的技术狂热份子们,更关心的是GUI组件、游戏引擎、物理引擎、绳子、机关、气囊等物理模型的算法、引擎之间的集成等问题。

所以本人打算从开始,一步一步带领大家制作一个完整的IE9割”绳子”以及制作其相关的物理引擎。如果有可能的话,在IE9割绳子基础上做一些有趣的扩展。

 

虽然基于IE9,但游戏可在任何兼容HTML5的浏览器上玩儿。回顾小家伙贪吃的发展史,2010登陆iOS,去年六月登陆Android,如今又推出HTML 5网页版,不过是否能胜过其本地应用还有待考证。

教程目录

其中包括:

(1)**HTML5 【IE9割绳子】制作教程来袭····**

(2)游戏框架搭建

(3)资源加载

(4)动感气泡loading制作

(5)开场动画

(6)菜单制作

(7)对象建立

(8)碰撞检测

(9)游戏音效

(10)鼠标控制

(11)绳子

(12)气球

(13)喷气囊

(14)机关

(15)物理引擎制作

(16)集成物理引擎

(17)关卡

(18)可玩性扩展

其中【碰撞检测】将会拆成几篇分别介绍,分别如下所示:

球与青蛙、气泡、星星碰撞检测

球与青蛙、气泡、星星碰撞反应

鼠标与绳子、气囊和气泡碰撞检测

鼠标与绳子、气囊和气泡碰撞反应

其中的【物理引擎制作】将会拆分为十四篇分别介绍,分别如下所示:

概述

面向对象编程

建立基本对象

集成单元测试框架

集成图形化输出接口

碰撞检测

AABB

OBB

碰撞反应

重叠处理

静止接触(待定)

物体休眠算法(待定)

关节、机关、绳子、气球、汽车

贴图

由于割绳子不同于《愤怒的小鸟》,其游戏整个过程不包含静止接触接触的状况,所以静止接触和物体休眠算法优先级最低。也就是说:不包含这两项功能的物理引擎也可以满足割绳子游戏的正常制作。

 

IE10 对 HTML5 的表现能力究竟如何?

新版结合Windows 7操作系统,画面和其它版本应用没什么差别,但是可以将游戏添加到Window 7的任务栏当中,新的无锁通关功能是以往版本都不具备的,同时整合Facebook及Twitter,玩家可以将得分晒给朋友或粉丝。

Hello cut the rope在线演示

请使用现代浏览器观看在线演示!

 

 

图片 1

素材

图片 2

素材已经从IE9割绳子官网全部拷贝下来,我已经准备好了,你准备好了吗?


先说一点,那就是 HTML 5
的重要变化之一——引入了针对非标准HTML、特别是错误格式HTML的标准化解析规则。也就是说,当浏览器在遇到存在错误的HTML时(如缺少结束标记),通常会处理得很宽松。这是一个广受赞誉的特点,因为相比XHTML来说,HTML​在此种情况下会继续正常处理。IE10
就是这样一个完全支持 HTML5 标准化解析规则的浏览器。

英国IE开发组领导Hegerty说:“HTML 5真是个好东西,可以让东西一下变得更具价值,画面丰富,漂亮,游戏只是一个部分,其他还有电影,音乐等,这是今后的一个方向。我们一直在寻找新的优秀方法,为IE9用户带来意想不到的HTML5体验”。

 

Via TNW

除此之外呢?我们来简单看看 IE10 中针对 HTML5 等现代 Web
标准又增加的主要功能特性支持:

(文/雷锋网)    

 

HTML5 方面

CSS3方面

其他方面

-异步脚本执行 (Async Script Execution)

– 文件API (File API)

– 历史 (History)

– 表单验证 (Forms Validation)

– Progress 和 Range 控制

– Web workers

– Web sockets

– 拖放(Drag and Drop)

– 应用缓存 (Application Cache)

– 拼写检查 (Spellcheck)

– 通道消息(Channel Messaging)

– 更多

– Flexbox

– Grid

-定位浮动 (Positioned float)

– 3D变换 (3D Transform)

-动画 (Animation)

-渐变 (Gradient)

– Text Shadow

– 去掉了CSS限制

– 更多

– Indexed Database

– Web performance API

– SVG 滤镜效果

– 简化触控开发的 MS Pointers API

– 比 IE9 更加强劲的图形图像处理

– 更多

 

其实早在 IE10 开发者预览版的时候,就有人做过当时的不同主流浏览器之间对
HTML5 支持度的综合测评,这里给出一张图表,展现的是各浏览器处理 HTML5
各种任务的能力考量,分数越高越好:

 

图片 3

 

当然,当时的测评还有其他的各方面,由于篇幅有限,就不一一列举,当时最后的结论是,IE10
除了在对 HTML5 标准支持度方面略显落后外,在 HTML5
其他性能方面都完胜其他浏览器。时隔半年多,如今 IE10 正式版发布了,对
HTML5 标准的支持度方面又有了新的增强。

 

我们不妨找一台带独立显卡的 PC 体验一下鱼缸速度测试(点击图片打开链接)

 

图片 4

 

通过测试我们可以看到 IE10 对图形图像和 JavaScript
处理方面的性能优势,有了高性能的呈现,那么对于富用户体验的 HTML5
交互式网站而言,无疑是流畅体验的一种保障。

其实还有更多针对 HTML5 的测试,大家可以访问
进行体验。

 

IE10 能给消费者和开发者带来什么?

 

图片 5

 

作为消费者的我们,可以通过 HTML5
获得一种轻量、明快的无插件浏览体验,视频、音频和动画均不需要使用任何插件,直接通过浏览器呈现。而
IE10 会继续利用 GPU 资源加速处理这些多媒体和
JavaScript,让浏览体验变得更加快速自然。上图展示的就是一个 cnBeta
新闻站点利用 HTML5 等现代 Web 技术开发出来的新闻阅读体验,该网站在使用
Windows 8 UI 风格的 IE10
打开之后体验更佳,带给用户专注的沉浸式用户体验。

 

图片 6

 

这幅图展示的则是一个基于 HTML5
的网页版游戏——割绳子,它的用户体验毫不逊色于桌面版的应用程序,或者
Windows 8 UI 风格的、从应用商店下载的割绳子 App.

 

图片 7

 

上面这幅图展示的也是一个网站应用,通过浏览器访问,基于
HTML5,在这里,您可以把照片自然地铺开在桌子上,供您把玩和欣赏。该应用着重展示的是触控场景,通过它,您可以用手指轻松将照片铺开、缩放和旋转,您可以体验到自然人机交互带来的乐趣。当然,照片应用只是一个例子,生活中其实还有很多可以用触摸作为交互手段的场景,特别是网页游戏。微软推出的
MS Pointers API 让您的触控开发起于一个全新高度,Pointer
事件封装了触摸、数字笔和鼠标的输入,有助于轻松构建不依赖于硬件设备的交互方式的体验。

 

像这样的炫酷的 HTML5
游戏和实用性网站,能够给用户带来舒心的用户体验。如果用户具备触摸设备,那么用户还可以通过更加自然的人机交互方式与其互动。试想,要是很多网站都具备这样的用户体验,您每天浏览互联网的时候,是不是会更加开心呢?我是非常期待的。

 

图片 8

 

但是,这需要时间,需要开发者们的配合。开发人员一直是新技术普及和投产的核心人物,他们担当着应用新技术开发出产品的重要使命。在
IE10,F12
开发人员工具将一如既往地为开发人员提供直观的错误排查和性能等跟踪分析和调试,助力于
HTML5 网站的开发。国外已经有了很多针对 HTML5
的成功网站和商业案例,国内这一块还得依靠我们国内的广大开发人员的努力。

 

“HTML5 增加了大量提升用户体验的功能标准:canvas
元素可以让开发者在一个特定区域内绘制各种复杂图形,同时可以用 JavaScript
控制你所绘的图形的动效,使得非 flash
的丰富的视觉效果成为可能,用户在移动端和 PC
端可以享受到一致的视觉体验;试想一个你曾经使用过的网络应用程序,一个在线图片编辑程序,你会用它做简单的图片处理,但绝对不会拿它代替
Photoshop,因为它的交互性、响应率和功能性都远不及本地用程序。HTML5
能够很好地解决这些问题。对于交互而言,它支持的 menu
元素能够模拟菜单栏、工具栏、列表栏等本地应用控件,
而且很容易实现,Drag-and-Drop
功能可以模仿”将文件拖拽进垃圾箱”的操作;对于响应率而言, Programmable
HTTP Cache and Serving 功能能使 Web app 内容动态写入浏览器缓存,使 App
响应率接近于本地应用;Web Workers 允许 App
执行多任务,提高用户并发操作的稳定性能;Offline Web Application 允许 App
在离线状态下存储用户数据、正常浏览。你还能通过浏览器获取用户的位置信息以及更多等待你去探索的功能。”——
摘自IE浏览器中文网站 iefans.net

 

我觉得这对于开发者来说,是一个新的机遇,也是一份新的挑战。从现在的趋势看,Web
2.0
时代的网站已经朝着应用程序的趋势在发展,只不过,现有的技术不能很好地满足设计者对于浑然天成的网站效果的追求,也不能带给用户真正完好统一的用户体验。踏入
HTML5
开发的园地,我们不仅可以开发出高质量的、内容精美的网站,更可以编织未来,编写新的基于互联网的
HTML5
应用程序。设想一下未来的用户不再下载应用程序,而是打开一个网站完成他想做的事情的场景。

 

现在,各家主流浏览器厂商也为 HTML5 做好了准备,是时候开始开发 HTML5
的网站了,不论您是对现有的网站进行升级,还是借机会将新的业务搭建在 HTML5
之上,都是很好的起点。使用 HTML5
做开发,不仅可以给用户带来更多优质体验,开发者自身也可以节省很多时间。其中最为突出的是,不必再为了不同的平台和浏览器编写差异性的代码以确保用户体验的一致了。Windows
Phone 8 的移动版 IE 浏览器采用的也是 IE10
的内核,也有更多的掌上设备中的浏览器支持
HTML5,在我看看来,这对于开发者而言,是一个前所未有的机遇。

 

如果您想在这个新的开发领域大展拳脚,那么您也会遇到一些挑战。针对 HTML5
的开发,如果您选择 IE10 作为一个平台,那么正式版的 IE10
已经能够为您的开发提供卓越的支撑。IE10 对 HTML5
的支持已经该进得相当好了,多点触控技术可为用户带来新的自然体验,同时支持多点触控和多种触控方式的
MS Pointers API 为您开发触控友好的网站提供了捷径,IE10
也使用了速度最快的 JavaScript 引擎,同时支持硬件加速,再有就是微软
Windows 8 上桌面版的 IE10 同 Windows 8 UI 风格的 IE10 一起实现了 PC
与平板浏览的体验一致。这从平台的层面,为您步入 HTML5
开发扫清了一些障碍。另外,微软也已通过一些案例的解读和文档的支持,为您扫除了一些头疼的兼容性方面的障碍,例如如何兼容现有网站,如何在用户使用旧版浏览器时,HTML5
网站自动进行优雅的降级(一样具备良好的用户体验)等等。在这里,我想分享一份
IE10
开发兼容性白皮书
给大家,如果您感兴趣,可以抽一点点时间进行阅读,如果它对您有帮助,也希望您能分享给您身边的其他做
Web
开发的朋友们;如果您觉得它不够好,请向我反馈各位的需求,看看大家还希望这份文档讲些什么内容,以对大家的
HTML5 开发提供更大的帮助! J

 

最后,再给出一个针对开发者的资源——HTML5
开发攻略(),这个是微软为开发者准备的聚合资源,这里有成功案例解析,有新特性的解读,有开发好的示例,还有更多其他的您可能会用到的资源。希望大家能够顺利进入
HTML5 开发的进程中,也希望消费者们能够通过新的 HTML5 技术和 IE10
获得您所喜爱的用户体验!