《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以及一些时间。

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
本文介绍了Twaver HTML5中的HTML节点(HTMLNode),这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点,以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素,以及如何自定义告警显示样式。
20 1
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
5月前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`、`<figure>`和`<figcaption>`。常见问题包括滥用标签作布局工具、忽略`<main>`、不恰当嵌套和忽视辅助功能。
103 3
|
5月前
|
移动开发 前端开发 程序员
程序员必知:基于HTML5堆木头游戏
程序员必知:基于HTML5堆木头游戏
32 0
|
5月前
|
移动开发 HTML5
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
html5为什么只需要写<!doctype html>? 一共有多少种Doctype文档类型?
93 0
|
5月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
39 0
|
5月前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
64 0
|
6月前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
6月前
|
移动开发 Android开发 iOS开发
ios标准页面调用HTML5页面和HTML5调用ios的函数
ios标准页面调用HTML5页面和HTML5调用ios的函数
49 0
|
2月前
|
开发框架 Dart Android开发
移动应用开发中的创新之路:探索跨平台解决方案
【9月更文挑战第21天】在移动应用的海洋中,开发者们面临着一个不断变化的挑战——如何在多个操作系统上提供无缝的用户体验。本文将探讨跨平台开发的魅力与挑战,并深入分析Flutter框架如何成为现代开发者的利器。我们将通过实际代码示例,揭示Flutter简化开发流程、提高生产效率的秘密。从Dart语言的基础到热重载的便捷性,本文旨在为读者提供一次全面而深刻的跨平台开发之旅。