《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浏览器版本的共同标准感兴趣。

3d903a79c67bf1469bfeb2f97ed2e96e1bdef690

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

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

相关文章
|
1月前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`、`<figure>`和`<figcaption>`。常见问题包括滥用标签作布局工具、忽略`<main>`、不恰当嵌套和忽视辅助功能。
|
1月前
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
11 0
|
1月前
|
移动开发 HTML5
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
22 0
|
1月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
18 0
|
1月前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
31 0
|
2月前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
2月前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
2月前
|
移动开发 Android开发 iOS开发
ios标准页面调用HTML5页面和HTML5调用ios的函数
ios标准页面调用HTML5页面和HTML5调用ios的函数
34 0
|
19天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
63 0
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法