- 网页游戏开发秘笈
- (美)Evan Burchard
- 3393字
- 2021-03-27 06:32:14
1.1 第一步：出题
由于大家的网页开发水平各不相同，所以笔者把第1章尽可能写得简单明了，以便入门级的读者能够看懂。后续各章会越来越复杂，不过理解了本章之后，再去看那些章节，也就不会太难了。每个人对网页开发的掌握程度不一样，有些读者或许真的要从这里开始学起。如果觉得本章内容过于简单，那就可以略读或直接跳过。后面各章会比本章复杂，也会更难一些。
本章通过制作范例游戏，想达成三个主要目标。第一，要使大家理解HTML、CSS和JavaScript的基础知识。在这三者之中，JavaScript最难。若是对某些JavaScript基础知识还不甚了解的话，请参阅附录A。第二，要令读者学会如何引入程序库，因为本书将要用到很多外部程序库。第三，要使大家掌握一套便捷的开发流程，用来创建、编辑、保存和打开本书所用的各种文件，并反复运用此流程，以制作各类游戏。
如果没有文本编辑器，那现在就得找一个。本书用到的这些JavaScript、HTML和CSS文件，拿任何工具来创建或编辑都行。大家若还没找到合适的文本编辑器，那就请参考附录C，根据其内容选择一款。
现在开始做游戏。首先打开文本编辑器，将程序清单1.1中的代码加入quiz/initial/index.html文件中。如果还没下载这份代码文件，那么请先参阅导言部分，按照其中所给的网址将其下载下来。
程序清单1.1 在index.html文件中建立html结构
提示
HTML是HyperText Markup Language（超文本标记语言）的缩写。从前，“链接”（link）曾经叫做“超链接”（hyperlink），那时还有几个与“hyper”有关的东西，用于在文档之间跳转。“超文本”（HyperText）可以理解为含有超链接的普通文本。而“标记”（markup）则是包裹在超文本周围的辅助文本，用来赋予其更多含义。所以说，HTML是一系列语法指南，用于将不同类型的文本制作成可以互相链接的页面，并将其组合起来，而这些页面文件以.html为扩展名。
<以尖括号形式出现的代码>叫做HTML标签（tag） 
之间的代码则称为HTML元素（element），元素也包括首尾两个标签在内。注意，结束标签里要写上“/”字符。
首先声明DOCTYPE。浏览器看到此声明之后，就知道应该按照HTML文件来解析并呈现其内容了。由于浏览器还可以打开其他类型的文件，比如XML文档、音频文件和图片等，所以，为了使浏览器能按普通的网页来处理此文件，我们需要为它加上这条声明。如果不加这一行，会怎么样呢？这取决于你所使用的浏览器，在某些浏览器上可能会产生难于察觉的小毛病，而在另外一些浏览器上则可能会出大问题。实际上无法确定其后果，所以，最好别忘了在文档开头加上这条声明。
接下来是<html>标签。通过此标签，可以把整个文档都包裹在全局容器里，而其内容一般是一个<head>标签和一个<body>标签，此处所举的范例代码也是如此。大家可能已经注意到，这三个标签都有对应的结束标签与之配对（例如<body>标签有</body>标签与之配对），而结束标签里带有斜线字符（/）。通过这种方式，我们可以把其他元素包裹在一对开始标签与结束标签里，使其成为当前元素的内部元素。
<head>标签里的东西通常对浏览器来说很重要，然而用户在浏览器视窗里看到的大部分内容却和这个标签没有直接关系。<meta>标签有许多用途。在本例中，它描述了文档所用的文本编码。如果不加这个标签，那么浏览器在显示常用字符集（这个字符集相当小）之外的字符时，说不定就会出问题。日常所用的大部分英文字符都能正确渲染，但是如果要显示其他国家的字符，那就有可能出错了。此时，在JavaScript控制台（Firefox浏览器的Firebug或Chrome浏览器的开发者工具）中，还会看到警告信息，提示开发者应该加上这个标签。尽管如此，本书在列举范例代码时，为了使读者能专注于相关内容，经常会省去这个标签不写。
浏览器会把<title>标签所描述的文本显示在最上方（不同的浏览器显示的位置也不一样，有些浏览器在标题栏（header bar）中显示，有些在分页（tab）顶部显示，还有些在这两个地方都会显示），另外，某些应用程序可以创建指向网页的快捷方式或书签，而此标签内的文本则会成为快捷方式或书签的名称。
接下来是<link>标签，该标签的rel属性为stylesheet，type属性为text/css，表明这是个样式表文件，而href属性则描述了样式表文件在电脑中的存储路径。在本例中，通过路径可知，样式表文件所处的文件夹与index.html相同（因为路径中只包含文件名，没有其他部分）。在链接外部样式表文件（也就是CSS文件）时，经常会用到这个标签，除了具体文件路径不同之外，其余部分大抵相同。还有一件事要注意，<link>标签与<meta>标签一样，都不需要结束标签（比如<link>标签不需要有</link>标签与之配对）。对于这种不用作容器的标签来说，未必总要写上结束标签。
<body>标签里嵌套了两个元素。首先是标题标签（<h1>），此标签采用默认样式显示文本，但是会将其变大。然后是<div>标签，它是排布元素时所用的一种重要标签，能把各种标记信息按块组织起来。在本例中，该标签在标签名后面写了一个id属性，通过这个属性，开发者可以在CSS中选定某种样式来渲染此元素（比如改用一种与默认样式不同的颜色与大小来渲染文本），也可以使此元素具备JavaScript文件中所设定好的某种行为（比如点击鼠标之后，网页就会上下颠倒）。在网页中实现上述功能时，有三种常见的方式可用于定位相关元素，除了这里提到的通过id属性来指定之外，另两种方式是通过标签名或class属性来进行。
现在<div>元素里什么都没有，然而在添加新东西之前，我们得先确认一下当前网页是否能正常显示。把这份文件保存为index.html，并打开浏览器。然后用浏览器运行此文件：可以直接在浏览器的URL地址栏里输入文件路径，也可以将桌面上的文件图标拖到浏览器中，还可以直接双击文件图标。
用浏览器打开文件之后，就会看到图1.1这样的画面。请注意，分页顶部出现了“Quiz”一词，因为我们刚才在源文件的<title>标签里就是这样写的。
图1.1 在Chrome浏览器中打开html文件
若是现在还没有安装Chrome和Firefox浏览器，那就将其下载下来，并装到电脑里。因为开发HTML5游戏时这两种浏览器各有其用途，所以需要把二者都装上。在学习本书内容时，这两种浏览器均会用到，不能完全以其中一个浏览器取代另外一个。
现在修改<div>标签，将程序清单1.2中的粗体代码加入index.html文件中，这样就可以把问答游戏中需要用到的问题添加到网页里了。这段范例代码虽然比较长，但形式上很整齐。如果嫌敲键盘输代码太麻烦的话，可以直接从quiz/after_recipe1/index.html文件中复制过来用。
程序清单1.2 为问答游戏所设计的问题
以上问答游戏中每道题的源码结构都相同，只是题号、问题和选项不同而已。现在我们单说第一道题。本例中，第一道题用<div>标签来表示，此标签有id属性，其值为question1。id属性是个“唯一标识符”（unique identifier），稍后可以通过该属性来引用此元素。这个<div>标签把整个问题与其答案都包了起来。写好外围的<div>之后，就该写嵌套在里面的那个<div>标签了，此标签用来书写问答游戏将要给玩家出的问题。该标签有个class属性，其值为question。前面讲过，要在源码中引用某元素，有三种方式：可通过标签名（例如<div>）或id属性来引用，也可通过class属性来引用。class属性与id属性的区别在于，id属性的值是唯一的，而class属性的值则可为多个元素所共用。
接下来是<input>标签，它带有三个属性。type="radio"表示单选按钮。若是没见过这种控件的样子，看看图1.2就明白了。第二个属性是name，同一道题所对应的数个备选答案，其name值必须互不相同。value属性的值通常在提交html表单时使用，它就好比用户在文本域（text field）中输入的文本一样，提交表单时会把这个值提交上去。本例不需要提交表单，但是稍后要通过JavaScript代码来检测玩家在页面中选定的答案，那时将用到这些值。至此，大家已经看到，有些元素的标签需要有与之配对的结束标签，有些则不需要。除了刚才说的meta与link外，现在又碰到了input，它也属于那种需要用/>来结尾的标签，这表示此标签既是开始标签，又是结束标签。
图1.2 为问答游戏所设计的问题与回答
在input元素外边所显示的文本可以置于<label>标签中。这种标签的主要功能是：当用户点击标签文本时，浏览器的输入焦点会自动切换到与该标签相对应的单选按钮上。本例不需要实现此功能，你如果需要这项功能，那么可以给每个备选答案所对应的单选按钮都添上属性值互不相同的id属性，比如，某个单选按钮的id属性值是question-10-answer-b，那么与之对应的label元素，其for属性也必须取同一个值，像是这样：<label for="question-10-answer-b">。
每两道题之间用换行标签（<br/>）隔开，此标签以斜线结束，这个标签既是开始标签，也是结束标签。换行标签可以在垂直方向上把两个物体隔开。间隔距离因浏览器而异，所以说，在网页布局很重要的情况下（大多数网页都很重视布局，但是本例不讲究这个），应该改用CSS样式来设定这个间隔距离。
保存这份网页源码文件，并用浏览器将其打开，如果一切顺利，就会看到图1.2那样的画面。