极客时间已完结课程限时免费阅读

第28讲 | 热点剖析（一）：HTML5技术是如何取代Flash的？

第28讲 | 热点剖析（一）：HTML5技术是如何取代Flash的？-极客时间

第28讲 | 热点剖析（一）：HTML5技术是如何取代Flash的？

2018-06-16 蔡能 来自北京
《从0开始学游戏开发》
课程介绍

讲述：蔡能

时长07:54大小3.63M

本周开始，我将会在每周六更新一篇“热点剖析”，阐述我对 2D 游戏开发之外的热点，比如 HTML5 游戏、移动端游戏、AR 和人工智能在游戏领域的应用，以及我对微信小游戏、移动游戏、独立游戏开发者的一些观点和看法。
我已经为你讲解了核心的开发知识，对于这些相对热门领域的知识，你可以根据兴趣进行选择学习。
本周及接下来两周的周六，我会依次为你介绍 HTML5 游戏，以及如何选择 HTML5 的游戏引擎，并带你编写一款 H5 小游戏。
从前几年开始，H5 这个技术就开始蓬勃发展。不管是懂行的还是不懂行的，都开始以“H5”这个字眼来描述产品。比如老板会说“我们就做个 H5 的页面吧”，或者“这个游戏是 H5 的吗”。很多人已经把 H5 等价于“手机端页面”了，这样的理解显然是错误的。
那么 H5 究竟是什么？它的优点在哪里？为什么现在大家都在谈论 H5？你真的知道 H5 是什么，并真的深入理解了它吗？

Flash 是什么？

首先，在说 H5 之前，我想先介绍一下 Flash 技术。
Flash 是由 Adobe 公司开发的一种富媒体技术，起初是一种放置在浏览器中的插件，填补了当时 HTML 页面平淡的空白，增强了网页交互的能力。你可以在 Flash 中做出任何东西，也可以访问本地电脑中的东西。后来，Adobe 公司推出了播放器，在电脑上不打开浏览器，也可以观看或者游戏 Flash 程序员编写出来的产品。乃至今日，依然有大量应用于 Flash 的富媒体应用，比如视频的播放，比如独立的小游戏，比如网页游戏，甚至桌面应用，都是使用 Flash 开发的。
虽然 Flash 拥有大量优点，并在当时弥补了网页端的很多不足，但是 Flash 的缺点也是很明显的。
首先，它的浏览器插件的运行效率并不高，而且访问电脑资源也很不方便，导致很多程序员在开发的过程中出现许多的问题，就算成功发布了一款 Flash 应用，浏览器也会被 Flash 插件拖得很慢，电脑会因此变得很卡，所以 H5 技术出现后，很多人就开始转投到 H5 的门下。
另一方面，由于 Flash 技术掌握在 Adobe 公司下，一家独大，所以从商业角度讲，很多大公司并不会坐视不管，就开始从 Flash 中抽取内容并制定公有的 Flash 规范，到了后面就添加到了 H5 规范下，成为大家都能掌握的规范。
谷歌苹果等大公司都不支持 Flash 应用，所以在大公司的压力下以及现在 H5 的流行，Adobe 公司决定在 2020 年终止 Flash 技术的提供。

H5 技术究竟是什么？

有了这个铺垫，我们再来看看 H5 技术究竟是什么，它为什么会取代 Flash。
首先，H5 大量应用在手机端的网页上面，但这并不等于“H5 等于手机网页”，因为普通的 HTML 页面也可以适配手机端屏幕。
H5 全称是 HTML5，HTML 是超文本标记语言的首字母缩写。而 HTML4.01 的标准在 1999 年年底发布。HTML5 的草案，前身是网络应用 1.0（Web Application），而 HTML5 的第一份草案于 2008 年 1 月月份公布，定稿是在 2012 年的年底。
在 H5 标准出现后，各大浏览器纷纷开始支持 H5，比如火狐、谷歌的 Chrome、IE9、苹果的 Safari，Opera 等等。事实上，H5 技术很大程度上是为了移动平台所设计，能在移动平台支持多媒体，当然取代 Flash 这是顺理成章的事情，但是，H5 技术并不等同于移动平台网页，我们在很多的 PC 端的网页也能看到 HTML5 的技术。

H5 技术有什么新特性？

H5 技术拥有很多最新的特性。
在语法方面，HTML5 的语法给了网页编写程序员拥有更好的语法结构以及更加丰富的标签。比如，video 标签就可以直接在 H5 页面中嵌入播放器。H5 也支持更多的设备兼容，比如可以支持摄像头，支持麦克风（移动端的或者电脑端的都可以）。
H5 也支持本地存储的功能，我们可以使用 H5 技术来开发网页 app，这些都来自本地存储的缓存技术，所以 H5 网页的载入速度会比传统网页更加迅速和便捷，连接也变得更快。H5 支持多媒体这是必然的，包括音频、视频、摄像头等功能，事实上使用 H5 技术的多媒体技术已经完全可以取代 Flash 技术了。
在编程方面，以前我们需要跨域的技术，在 H5 中，可以使用 XMLHttpRequest 来解决跨域问题。而且 H5 页面一经修改就能直接更新上去，基本上刷新页面就能看到效果，而如果使用 Flash 来做，需要进行编译和发布，并且替换 Flash 页面，才可以看到 Flash 应用的更新，从时间效率讲，H5 技术又是技高一筹。
另外，如果有专业的 SEO 人员，也可以很方便地通过 H5 来做 SEO 优化，做网站的索引和搜索引擎的抓取优化工作，这在 Flash 来说几乎是不可能做到的工作。

用 H5 编写游戏有什么优点？

使用 H5 技术编写的应用和游戏，可以很方便地嵌入到苹果或者安桌的 App 中。这种方式可以免去原生开发两套 App 的麻烦，只需要编写一套类似 App 的 H5 页面，然后使用类似 WebView 的方式来嵌入到原生应用中。
由于 H5 页面可以随时更改，所以现在苹果商店对于 H5 内嵌应用的审核比较严格，所以 H5 页面必须做得好，而且逻辑流程都不能有问题。所以在 H5 发展的阶段，有很多声音说，H5 除了取代 Flash，还会取代 App，事实上这是不可能的。虽然 H5 取代 Flash 已经毋庸置疑，但是 H5 取代原生 App 还是有很多的掣肘，比如 H5 只能编写轻量级的 App，如果需要那种画面效果特别好的 App，或者对设备进行深层次的操控，那就只有原生可以办到了，所以现在有许多的 App 开发，都选择 H5 和原生混合开发，这样会减轻一定的工作量，并且在实现其他深层次的功能的时候也能使用原生代码。
用 H5 比 Flash 编写游戏更快速，占用资源也更少，所以以前利用 Flash 技术编写的游戏，现在都改成 H5 技术编写，当然 H5 编写的游戏仍然比不上原生编写的游戏。毕竟原生有对底层的操控能力，直接而且快速，而 H5 毕竟需要通过浏览器的解释和渲染，所以它的速度基本取决于浏览器，代码优化地再好，也无法直接穿过浏览器这一层去做事情。
所以，用 H5 编写的游戏，如果是在电脑端，我们可以编写大一点的网络游戏，因为电脑的资源能随心所欲地利用；而如果在手机端，H5 技术适合编写小型游戏，比如电商领域、推广平台等营销类的小游戏，再比如玩家操作不是特别复杂的游戏，比如战棋类的、益智类的、策略类的，或者静态画面比较多的游戏（比如选择一个正确答案，猜一个成语那样的等等）。这样的游戏，占用的资源不大，动态资源载入不多，移动平台也不会有太多的卡顿感，各种手机都可以适配和游戏，这样小型的 H5 游戏是比较适合移动平台的。
H5 游戏的传播能力比 Flash 更好。首先 Flash 技术需要安装一个插件才可以使用，然而 H5 游戏只需要浏览器支持即可，所以从这方面讲，只需要你通过浏览器分享一个 H5 游戏到微信、QQ 等社交软件，就可以直接进行传播，而不像 Flash 那样需要安装额外的东西。所以利用 H5 技术编写的营销工具现在占领了绝对的主流，所以才会有本篇文章最初所说，很多人认为“H5 等价于移动平台网页”这样的误解。

小结

总结一下今天的内容：
H5 游戏拥有比 Flash 更好用更开放的规范，开发和发布也更方便，修改代码后放到网上，只需要刷新一下页面就可以看到修改的内容；
另外，Flash 技术需要安装一个插件，而 H5 技术直接在浏览器就可以呈现。所以 H5 技术完全替代 Flash 只是时间问题。
现在留一个小问题给你。
我们都知道浏览器渲染出来的网页都是 2D 的页面和游戏，但是 H5 技术也可以编写 3D 视觉效果的内容。你知道 H5 技术所拥有的 3D 效果是用什么技术实现的吗？
欢迎留言说出你的看法。我在下一节的挑战中等你！
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享

赞 3

提建议

© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
第27讲 | 如何制作游戏内容保存和缓存处理？
下一篇
第29讲 | 热点剖析（二）：如何选择一款HTML5引擎？
 写留言

精选留言(8)

  • 周飞
    2018-06-23
    XMLHttpRequest是原生ajax请求，不能解决跨域问题，还是得用jsonp或cors来解决。h5提供的是postmessage
    9
  • 壬大师
    2018-06-23
    老师，像斗地主、三国杀这种牌类手机游戏是用html5合适还是C++合适？

    作者回复: 看需求。要做APP还是h5

    2
  • 董豪强
    2018-06-19
    threejs ，更底层的其实还是webgl
    3
  • 曹源
    2018-06-16
    WebGL？
    2
  • H.Humbert
    2018-07-22
    webgl
    1
  • 神马*涛💋
    2021-09-07
    老师，比如一个中国象棋游戏。用H5好 ，还是做成安卓app更好？
  • 😯
    2018-11-27
    WebGL吧，我们之前项目做过3D模型在浏览器渲染用到的就是这
  • 王俊涛
    2018-06-17
    canvas webgl