《HTML5移动开发》—— 1.1　CubeDoo：HTML5移动游戏

简介：

本节书摘来异步社区《HTML5移动开发》一书中的第1章，第1.1节，作者：【美】Estelle Weyl（埃斯特尔 韦尔），更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1　CubeDoo：HTML5移动游戏

我学习HTML5和CSS3的方法是在一个单一的移动浏览器上构建一个Web应用，并将其发挥到极致。我初次涉足CSS3是在2007年iPhone首次上市的周末写的一个结合了Twitter和美国职业棒球大联盟的Web应用，叫作Pickleview。当时，iPhone上的Safari浏览器是市场上最先进的浏览器（也许是除了Opera之外的）。通过只为一个单一的浏览器开发这个应用，我无须担心IE6、IE7或是Firefox 2的问题（Chrome当时还不存在[3]）早在2007年的时候，这就是当时网络的状态。

在2010年，我又做了一遍在一个单一的浏览器上使用最现代的HTML5和CSS3编写代码的练习。我和一些朋友们使用动画、存储、离线能力以及所有在桌面版的Chrome 12中支持而在移动版Safari 3.1中不支持的新特性设计了一个记忆游戏。通过使用一个单一的浏览器以及利用我能够使用的所有新技术，我能够学习编写新的但是因为需要支持陈旧的浏览器而无法在生产中使用的HTML5、CSS3以及JavaScript模块。截至2010年，有的浏览器自2007年以后已经有了很大的进展。其他的（IE——你知道我这里说的就是你）就没什么了。

在2013年，大多数的浏览器支持HTML5和CSS3。作为开发人员，我们正受困于不得不支持旧的桌面浏览器，也就是IE9及其更早的版本。在移动上，我们有我们自己的“IE6”。我们在某种程度上受困于功能型手机[4]和运行Android 2.3的智能手机。但即使是功能型手机浏览器和Android 2.3都支持很多新特性。

要学习编写HTML5、CSS3以及相关的JavaScript API，就要暂时地不去考虑旧的浏览器。我们将一起学习使用这些新技术都能做什么。大多数在现代浏览器中获得了广泛支持的特性，我都已经放到本书的代码示例中了。

CubeeDoo，如图1-1所示，是一个完全使用前端代码编写的记忆游戏。在本书中，我使用的代码示例都将来自于这个游戏以及一个原生iPhone“设置”应用的翻版（如图9-3所示）。该游戏使用HTML5元素构建，其中的一些主题包括使用生成的内容匹配图标。CSS转换、过渡和动画以及渐变、圆角和其他CSS特性都被用于设计游戏的外观和感觉。该游戏也使用SVG、JSON、虽然已过时但却是移动平台支持的webSQL、localStorage、sessionStorage、数据属性（data attribute）、HTML5表单、音频、媒体查询（media query）和数据URI（data URI）。

本书中的代码没有使用任何形式的框架。正如前面提到的，一切都是使用普通的JavaScript、HTML5和CSS手工编写代码的。目标是教给你真正的API，而不是腻子脚本。

在生产中，你可能希望使用腻子脚本，但是要想巧妙地使用这些脚本，你需要理解这些腻子脚本都做了什么。这本书就是要教你这些。

本书涵盖了CSS3、HTML5以及相关的API。重点是在移动的环境下学习这些技术。我们生活在一个移动的世界里，但是并不存在所谓的“移动互联网”。不过都是互联网罢了。但是如果你只聚焦于桌面，你所设计的互联网版本可能无法正常服务于日益增长的仅从移动设备访问互联网的人群。而且，如果你只聚焦于桌面，你将只会对较旧的IE浏览器版本的共同标准感兴趣。

永远不要把一个仅在单一浏览器下正常运行的应用推向生产环境。然而要学习那些新兴技术，忽略掉“旧的”浏览器才可以给自己提供机会去学习去挑战自己，跳出框框进行思考，最终达到巅峰。带上在本书中学到的东西，使用一个单一的浏览器，编写程序直到浏览器能做的极限。不断尝试。你会再一次爱上Web开发的。

你只需要一个浏览器、一个IDE以及一些时间。