没有合适的资源?快使用搜索试试~ 我知道了~
首页HTML5游戏开发指南:实战学习与进阶
HTML5游戏开发指南:实战学习与进阶
需积分: 10 2 下载量 157 浏览量
更新于2024-07-18
收藏 7.5MB PDF 举报
"The Essential Guide to HTML5" 是一本专为编程初学者和有一定HTML基础的读者设计的实用指南,特别关注HTML5、JavaScript及CSS在实际应用中的教学。第二版更新了内容,以实例驱动的方式讲解,配合全彩屏幕截图展示了如何在实际项目中运用这些技术。 本书的核心内容围绕游戏开发展开,通过诸如Hangman、Rock-Paper-Scissors等熟悉的益智游戏,以及简单的测验、迷宫和动画模拟,让读者在娱乐中学习编程技巧。章节结构清晰,每款游戏都包含程序结构的表格,代码行旁有详细的注释,便于理解每个环节的工作原理。读者将掌握HTML5的新特性,如利用canvas元素进行图形绘制,嵌入音频和视频,并通过JavaScript实现精确控制。此外,书中还介绍了localStorage功能,用于保存用户的高分或游戏设置,以便下次登录时能快速恢复。 通过本书,读者不仅能理解HTML5的基本概念,还能了解其在Web应用程序和游戏开发中的新途径。重点在于实践操作,读者会被引导构建、测试和上传简单的在线游戏到网站上,从而提升编程技能,为后续学习其他编程语言打下坚实的基础。 对于想要深入学习HTML5并利用游戏进行学习的读者,无论是初次接触编程的初学者还是希望更新知识的专业人员,《The Essential Guide to HTML5》都是一个理想的教育资源,它提供了一种生动且易于理解的教学方式,帮助读者掌握这个现代Web开发的关键技术。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/10776019/bg10.jpg)
1
© Jeanine Meyer 2018
J. Meyer, The Essential Guide to HTML5, https://doi.org/10.1007/978-1-4842-4155-4_1
CHAPTER 1
The Basics
In this chapter, we cover
• The basic structure of an HTML document
• e html, head, title, script, style, body, img, and a elements
• A Cascading Style Sheet (CSS) example
• A JavaScript code example, using Date and document.write
Introduction
Hypertext Markup Language (HTML) is the language for delivering content on the Web.
HTML is not owned by anyone, but is the result of people working in many countries
and many organizations to define the features of the language. An HTML document is
a text document that you can produce using any text editor. HTML documents contain
elements surrounded by tags—text that starts with a < symbol and ends with a > symbol.
An example of a tag is <img src="home.gif"/>. This particular tag will display the image
held in the file home.gif. These tags are the markup. It is through the use of tags that
hyperlinks, images, and other media are included in web pages.
Basic HTML can include directives for formatting in a language called Cascading
Style Sheets (CSS) and programs for interaction in a language called JavaScript.
Browsers, such as Firefox and Chrome, interpret the HTML along with any CSS and
JavaScript to produce what we experience when we visit a website. HTML holds the
content of the website, with tags providing information on the nature and structure
of the content as well as references to images and other media. CSS specifies the
formatting. The same content can be formatted in different ways. JavaScript is a
programming language that’s used to make the website dynamic and interactive. In all
but the smallest working groups, different people may be responsible for the HTML, CSS,
![](https://csdnimg.cn/release/download_crawler_static/10776019/bg11.jpg)
2
and JavaScript, but it’s always a good idea to have a basic understanding of how these
different tools work together. If you are already familiar with the basics of HTML and
how CSS and JavaScript can be added together, you may want to skip ahead to the next
chapter. Still, it may be worth casting your eye over the content in this chapter, to make
sure you are up to speed on everything before we start on the first core examples.
The latest version of HTML (and its associated CSS and JavaScript) is HTML5.
It has generated considerable excitement because of features such as the canvas for
displaying pictures and animation; support for video and audio; and tags for defining
common document elements such as header, section, and footer. You can create a
sophisticated, highly interactive website with HTML5. As of this writing, not all browsers
accept all the features, but you can get started learning HTML5, CSS, and JavaScript
now. Learning JavaScript will introduce you to general programming concepts that will
be beneficial if you try to learn any other programming language or if you work with
programmers as part of a team.
The approach I’ll use in this book is to explain HTML5, CSS, and JavaScript concepts
in the context of specific examples, most of which will be familiar games. Along the way,
I’ll use small examples to demonstrate specific features. Hopefully, this will help you
both understand what you want to do and appreciate how to do it. You will know where
we are headed as I explain the concepts and details.
The task for this chapter is to build a web page of links to other websites. In this way,
you’ll get a basic understanding of the structure of an HTML document, with a small
amount of CSS code and JavaScript code. For this and other examples, please think
of how to make the project meaningful to you. The page could be a list of your own
projects, favorite sites, or sites on a particular topic. For each site, you’ll see text and a
hyperlink. The second example includes some extra formatting in the form of boxes
around the text, pictures, and the day’s date and time. Figure1-1 and Figure1-2 show the
different examples I’ve created.
Chapter 1 the BasiCs
![](https://csdnimg.cn/release/download_crawler_static/10776019/bg12.jpg)
3
Figure 1-1. An annotated list of games
Figure 1-2. Favorite sites, with extra formatting
Chapter 1 the BasiCs
![](https://csdnimg.cn/release/download_crawler_static/10776019/bg13.jpg)
4
When you reload the Favorite Sites page, the date and time will change to the current
date and time according to your computer.
Critical Requirements
The requirements for the list of links application are the very fundamental requirements
for building a web page containing text, links, and images. For the example shown in
Figure1-1, each entry appears as a paragraph. In the example shown in Figure1-2, in
contrast, each entry has a box around it. The second example also includes images and
a way to obtain the current day, date, and time. Later applications will require more
discussion, but for this one we’ll go straight to how to implement it using HTML, CSS,
and JavaScript.
HTML5, CSS, andJavaScript Features
As I noted, HTML documents are text, so how do we specify links, pictures, formatting,
and coding? The answer is in the markup, that is, the tags. Along with the HTML that
defines the content, you’ll typically find CSS styles, which can be specified either inside
the HTML document or in an external document. You might also include JavaScript for
interactivity, again specified in the HTML document or in an external document. We’ll
start with a look at how you can build simple HTML tags, and how you can add inline
CSS and JavaScript all within the same document.
Basic HTML Structure andTags
An HTML element begins with a starting tag, which is followed by the element content
and an ending tag. The ending tag includes a / symbol followed by the element type, for
example /head. Elements can be nested within elements. A standard HTML document
looks like this:
<html>
<head>
<title>Very simple example
</title>
</head>
Chapter 1 the BasiCs
![](https://csdnimg.cn/release/download_crawler_static/10776019/bg14.jpg)
5
<body>
This will appear as is.
</body>
</html>
Note that I’ve indented the nested tags here to make them more obvious, but HTML
itself ignores this indentation (or whitespace, as it’s known), and you don’t need to add
it to your own files. In fact, for most of the examples throughout this book, I don’t indent
my code.
This document consists of the html element, indicated by the starting tag <html> and
ending with the closing tag: </html>.
HTML documents typically have a head and a body element, as this one has. This
head element contains one element, title. The HTML title shows up different places in
different browsers. Figure1-3 shows the title, “Very Simple Example”, on a tab in Firefox.
In most cases, you will create something within the body of the web page that you’ll
think of as a title, but it won’t be the HTML title! Figure1-3 also shows the body of the
web page: the short piece of text. Notice that the words html, head, title, and body do not
appear. The tags “told” the browser how to display the HTML document.
We can do much more with text, but let’s go on to see how to get images to appear.
This requires an img element. Unlike the html, head, and body elements that use starting
and ending tags, the img element just uses one tag. It is called a singleton tag. Its element
type is img (not image) and you put all the information with the tag itself using what are
Figure 1-3. The HTML title on a tab in Firefox browser
Chapter 1 the BasiCs
剩余428页未读,继续阅读
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/b5d3dc2c562c4f32aff8653663013597_demorngel.jpg!1)
SorelCheung
- 粉丝: 61
- 资源: 120
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 岩石滑动与断层冲击地压:声发射特征分析
- 新时代煤炭工业八大战略新取向剖析
- 开采强度对华亭矿区冲击地压危险性的影响分析
- 新安煤矿探采对比:影响安全生产的关键因素与技术支撑
- 210MW循环流化床锅炉引风机变频改造优化与节能效果
- 浅埋煤层开采沉陷预测:方法应用与影响分析
- 优化巷道过陷落柱支护方案:数值模拟与现场试验
- 坚硬顶板定向断裂爆破技术:安全高效采煤新方案
- 北航2019算法课作业解析:投资策略与凸子多边形优化
- 断层破碎带垮冒下堆积体边界抗力分布关键影响因素
- 哈拉沟选煤厂优化末煤系统提高效率与处理能力
- 瓦斯涌出影响下采动煤体蠕变失稳研究
- 提升煤矿装载效率的可控箕斗定量装载设备设计
- 水分调控下烟煤瓦斯吸附特性对比研究
- 重介质悬浮液密度控制硬件设计与选型探讨
- 坚硬顶板巷道支护参数设计:现场测试与数值分析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)