《HTML5移动开发》—— 1.1 CubeDoo:HTML5移动游戏
教程管理员 发布于2023-09-25 12:01 HTML教程 148
本节书摘来异步社区《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以及一些时间。
相关推荐
- 02-05 游戏策划应聘应聘求职简历模板_简介doc文档Word模板下载
- 01-13 游戏策划应聘求职简历模板下载_简介doc文档Word模板下载
- 12-09 游戏策划应聘求职简历范文模板_简介doc文档Word模板下载
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-