面向孩子们的-JavaScript-项目-全-

面向孩子们的 JavaScript 项目（全）

原文：zh.annas-archive.org/md5/9C2A1F6AA0F3566A2BF5430895525455

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

从书名中您可以猜到，这本书是为孩子们设计和设置的，以便他们可以自学 JavaScript，并使用 JavaScript 创建一些项目。

通过以一种无与伦比的方式抽象核心网络编程，JavaScript 永远改变了网站和 Web 应用程序。无聊的静态网站和非交互式网站现在在 JavaScript 的触摸下变得非常棒。使用 JavaScript，您可以快速开发 Web 应用程序，甚至是智能手机应用程序，而不会牺牲质量。如果您开始使用 JavaScript，您可以非常高效地处理几乎不需要在硬件和软件上进行任何配置。请记住，这不是一本参考书，但您可以从中学习 JavaScript 的每个基本概念。因此，对于 10 岁及以上的孩子来说，这将是一本完美的书，可以发现 JavaScript 的世界。

本书涵盖了什么

第一章，在控制台中探索 JavaScript，讨论了 JavaScript 和 JavaScript 开发环境，包括 Google 开发者工具。在本章中，我们将安装必要的软件并打印一些简单的代码行。

第二章，使用 JavaScript 解决问题，涵盖了 JavaScript 的基础知识，从主要语法到控制台中的一些简单命令。我们将学习变量的工作原理以及使用算术运算符可以实现什么。我们还将运行一些简单的命令来解决控制台内的问题。

第三章，介绍 HTML 和 CSS，将真正利用 JavaScript，并涵盖 HTML，使读者能够不仅在控制台中使用 JavaScript，还可以在浏览器的视图中使用。我们还将解释 CSS 的基础知识，如 CSS 选择器和 CSS 布局。

第四章，深入挖掘，涵盖了 JavaScript 提供的一些更高级的功能。我们讨论了 for 和 while 循环，if 语句和 switch-case。

第五章，啊哟！驶向战斗，教会我们如何开发著名的游戏——战舰。在前几章的基础上，小孩们将学会如何将这些信息付诸实践。

第六章，探索 jQuery 的好处，全都是关于 jQuery，一个著名的 JavaScript 库，以及使用它的优势。

第七章，介绍画布，讨论了 HTML 画布，我们将学习如何在我们的项目中使用它。

第八章，构建老鼠人，教会我们开发一个著名的游戏——吃豆人，除了有老鼠，还有一些猫，还有很多很多的奶酪球可以吃！😉

第九章，使用 OOP 整理您的代码，教授面向对象编程（OOP）并讨论 JavaScript 是一种面向对象的语言。

第十章，可能性，向读者展示了使用他们在阅读本书时所学到的技能所能实现的可能性。

你需要什么来读这本书

在整本书中，我们使用 Google Chrome 作为我们的浏览器，在控制台上运行我们的 JavaScript 代码。我们使用 Atom 这个著名的文本编辑器来编写我们的代码。你可以使用任何现代的网络浏览器和文本编辑器，但我强烈建议你使用这些开源软件来完成本书中讨论的任何项目。

这本书适合谁

如果您以前从未编写过代码，或者您完全是网络编程世界的新手，那么这本书就是您的正确选择。这本书适合 10 岁及以上的孩子和完全不了解编程世界的成年人，他们想要介绍编程。

约定

在本书中，您会发现一些文本样式，用于区分不同类型的信息。以下是一些样式的示例及其含义的解释。

文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名显示如下：“点击AtomSetup.exe文件开始安装 Atom。”

一段代码设置如下：

document.write("Hello");
document.write("World");
document.write("!");

新术语和重要词汇以粗体显示。屏幕上看到的词语，例如菜单或对话框中的词语，以这种方式出现在文本中：“点击下一步按钮将您移至下一个屏幕。”

注意

警告或重要提示以这样的框出现。

提示

提示和技巧是这样显示的。

第一章：在控制台中探索 JavaScript

在我们开始讨论代码行，对象，变量等之前，我们需要知道 JavaScript 是什么。 JavaScript 是一种用于向网页添加交互性并构建 Web 应用程序的编程语言。静态网站如今并不太受欢迎，因此我们使用 JavaScript 使我们的网站具有交互性。

有些人也将其称为脚本语言，因为它是一种简单的语言，不像其他语言那样需要编译器。 JavaScript 并不是设计为通用编程语言，而是设计为操纵网页。您可以使用 JavaScript 编写桌面应用程序。 JavaScript 还可以访问您计算机的硬件。您可以尝试使用软件开发工具包（SDK）（例如 PhoneGap 用于移动设备或 Microsoft 应用程序 SDK 用于桌面）制作桌面应用程序。 JavaScript 代码在网页上被解释，然后由浏览器运行。例如 Firefox，Safari，Google Chrome，UC 浏览器，Opera 等任何现代互联网浏览器都支持 JavaScript。

注意

编译器是一种处理代码并将其转换为机器语言的计算机程序。使网站交互意味着向网站添加由用户控制的功能。例如，在线注册表格，在线计算器等。静态网站具有固定的对象和内容，并向所有访问者显示相同的信息。

基本上，JavaScript 包含在 HTML 页面上或写在具有.js扩展名的单独文件中。如果您对 HTML 一无所知，不用担心，因为您将在第三章 介绍 HTML 和 CSS中学习到。那么，您可以在哪里使用 JavaScript？

答案很简单，您可以执行以下操作：

• 您可以创建一个活跃的用户界面。

• 您可以控制网络浏览器。

• 您可以验证用户输入（如果输入错误）。

• 您可以创建自定义网页，可以在浏览器上弹出，包含信息或图像。

• 您可以创建动态页面而无需公共网关接口（CGI）。 CGI 由 Web 服务器用于处理浏览器的信息。

注意

您应该记住的是 JavaScript 不是由 Sun Microsystem 开发的编程语言 Java。

在本书中，我们将使用Google Chrome作为默认浏览器，Atom作为文本编辑器。

如果您的计算机上尚未安装这两个软件，则需要下载并安装它们。

我们将使用 Atom 文本编辑器，因为它是跨平台编辑器，具有内置包管理器，智能自动完成功能，并具有许多其他优势。

安装谷歌浏览器

要安装谷歌浏览器，请转到www.google.com/chrome并单击立即下载，如下面的屏幕截图所示：

然后按下接受并安装按钮，如下面的屏幕截图所示：

安装将根据您的网络速度和计算机硬件配置而完成。

注意

如果您不想将谷歌浏览器设置为默认浏览器，请取消选中将谷歌浏览器设置为我的默认浏览器。

安装 Atom

要安装 Atom 文本编辑器，请转到atom.io/链接并单击下载 Windows 安装程序，如下面的屏幕截图所示：

名为AtomSetup.exe的文件将开始下载。

单击AtomSetup.exe文件开始安装 Atom。

提示

确保在安装时赋予管理权限以获得更好的性能。

安装完成后，Atom 将自动启动。

如果您在另一个平台上，请使用其他平台链接：

• 如果您是 Mac 用户，请转到github.com/atom/atom/releases/latest链接，并下载atom-X.X.X-full.nupkg文件，其中X.X.X是 Atom 的版本号。双击该文件进行安装。

• 如果您是 Ubuntu 用户，您可以按照github.com/atom/atom/releases/latest链接并下载atom-amd64.deb文件。下载后，在相同的文件夹中启动您的终端，然后编写以下代码：

sudo dpkg --install atom-amd64.deb

您可能需要管理员密码来安装它。安装完成后，您可以通过在终端中输入Atom并按Enter来运行 Atom。

Chrome 开发者工具

让我们来看看用于 JavaScript 的Chrome 开发者工具，特别是控制台。由于 Google Chrome 已下载并安装在您的计算机上，打开 Google Chrome 浏览器，转到菜单（右上角），悬停在更多工具上，然后选择开发者工具，如下图所示：

您将看到以下工具：

• 元素

• 网络

• 资源

• 时间线

• 配置文件

• 资源

• 审核

• 控制台

我们的第一个程序

现在，让我们检查 JavaScript 是否在您的计算机上运行。

从工具中选择控制台。如果找不到控制台，请点击>>符号，如下所示：

一旦您的控制台打开，输入以下代码并在键盘上按Enter：

document.write("Hello World");

如果您可以在左侧面板上看到如下所示的输出，那么您已成功在浏览器上配置了 JavaScript：

您将看到以下输出：

Hello World

恭喜！

注意

下载示例代码

您可以从www.packtpub.com的帐户中下载您购买的所有 Packt 图书的示例代码文件。如果您在其他地方购买了这本书，您可以访问www.packtpub.com/support并注册，以便直接将文件发送到您的电子邮件。

如果您看不到文本，请检查您的代码或以管理员权限安装 Google Chrome。

您还可以单击控制台的齿轮按钮。检查禁用 JavaScript是否未选中：

您还可以使用此工具调试您的 JavaScript 代码。

如果您输入任何错误；考虑到您忘记了Hello World字符串的引号，您将会得到以下错误：

为了加快编写代码的速度，您可以学习一些控制台和 Atom 文本编辑器的键盘快捷键。

以下是控制台的一些键盘快捷键：

• Ctrl + L：清除控制台

• Tab：自动完成常见前缀

• 右箭头：接受建议

• Ctrl + U：清除控制台提示

• 上/下：下一行/上一行

• Enter：执行命令

以下是 Atom 文本编辑器的一些键盘快捷键：

• Ctrl + B：浏览打开文件列表

• Ctrl +Alt + R：重新加载 Atom

• Ctrl +Shift + L：更改语法高亮

• Alt +Shift + S：显示可用代码片段

• Ctrl +Shift + M：Markdown 预览

• Ctrl +Alt + I：切换开发者工具

• Ctrl + N：新文件

• Ctrl +Shift + N：新窗口

• Ctrl + P：打开文件（输入名称进行搜索）

• Ctrl + O：打开文件

• Ctrl +Shift + O：打开文件夹

• Ctrl + S：保存

• Ctrl +Shift + S：另存为

• Ctrl + W：关闭标签

• Ctrl +Shift + W：关闭窗口

• Ctrl + G：转到行

• Ctrl + L：选择行

• Ctrl +Shift + D：复制行

• Ctrl +Shift + K：删除行

• Ctrl + 上/下：上移/下移行

• Ctrl + /：切换注释行

• Ctrl + Enter：在下方插入新行

• Ctrl + [/]：缩进/取消缩进所选行

• Ctrl + J：连接行

• Ctrl + Alt + .：完成括号

• Ctrl + M：转到匹配的括号

• Ctrl + Alt + M：选择匹配括号内的代码

• Ctrl + Alt + /：折叠/展开代码

• Ctrl + Alt + F：折叠选定的代码

• Ctrl + Alt + [/]：折叠/展开所有代码

• Ctrl + F：在当前文件中查找

• Ctrl + Shift + F：在项目中查找

• F3：查找下一个

• Shift + F3：查找上一个

• Ctrl + Enter：替换所有

• Ctrl + Alt + /：在搜索中使用正则表达式

• Ctrl + Shift + =/-：增加/减少文本大小

• Ctrl + 0（零）：重置文本大小

• F11：切换全屏

为什么我们要使用 Chrome 开发者工具？

以下是 Chrome 开发者工具的使用方法：

• 易于查看错误

• 使用行号轻松编辑/调试代码

• 实时输出（无需刷新页面）

为什么我们要使用 Atom 作为文本编辑器？

以下是 Atom 作为文本编辑器的使用方法：

• 可嵌入性和可用性的零妥协组合

• 一个开源文本编辑器

• 每个 Atom 窗口本质上都是一个本地渲染的网页

练习

为了增进对 JavaScript 的了解，编写一个能打印您的名字的程序。

总结

在本章中，我们看到了如何下载 Google Chrome 和 Atom，并安装它们。

您学会了如何使用 Chrome 开发者工具（控制台）编写您的第一行代码。您还学会了一些 Chrome 开发者工具和 Atom 文本编辑器的键盘快捷键。

您还了解了 JavaScript 是什么，为什么学习 JavaScript 很重要，以及 JavaScript 与其他语言的不同之处。

现在我们可以进入 JavaScript 的世界。

您的旅程始于第二章，使用 JavaScript 解决问题。

第二章：使用 JavaScript 解决问题

在上一章中，你已经学会了如何使用 JavaScript 在控制台上打印东西。现在，让我们看看 JavaScript 语法、变量、算术运算符和注释背后的基本原理。

在计算机世界中，除了数据什么都没有。你可以读取、修改和创建新的数据；然而，任何不是数据的东西根本就不存在。在 JavaScript 中，我们需要处理数据来开发网站。

要理解 JavaScript 的基本语法，首先你需要知道 JavaScript 是区分大小写的。你不能在 JavaScript 中交换大小写字母。因此，在处理 JavaScript 语法时，你需要记住写代码不是唯一重要的任务，你还必须注意语法是否写得正确。

让我给你举个例子。在上一章中，你已经成功地使用document.write();语法在浏览器上打印了Hello World。

如果你写了Document.write("Hello World");会发生什么？是的！它不会成功运行。你会得到一个错误消息。这种错误被称为未捕获的语法错误。

JavaScript 语句通常写在一行上。你可以用分号结束你的语句，也可以不用。结束语句不是强制性的。然而，每个语句后面加上分号是一个好习惯。

让我们考虑以下例子：

document.write("Hello");
document.write("World");
document.write("!");

它的输出将如下所示：

注意

JavaScript 关键字（如 for、while、if、switch、case 等）始终是小写的。内置对象（如 Date、Math、Number 等）以大写字母开头。

变量

我们已经知道计算机世界除了数据什么都没有。

有不同类型的数据（我们称之为数据类型），如下所示：

• 你的名字是一种数据

• 你的年龄是数据

• 你的成绩也是数据

然而，它们都是不同的。它们之间有什么区别？你的名字只包含一组字符，或者有些人也称之为字符串。你的年龄是一个整数类型的数据。你的成绩是一个浮点数类型的数据。JavaScript 中的奇妙之处在于，在写一个变量的名字之前，你不必指定数据类型。

注意

JavaScript 允许使用三种数据类型。字符串（例如，"这是一个字符串的例子"），数字（例如，2015，3.1415等），和布尔值（例如，true或false）。

我们讨论过变量了吗？好吧，你已经知道了数据类型。你需要某物来存储你的数据。这个某物就叫做变量。在 JavaScript 中，我们在变量名之前使用var。记住，var以小写字母开头。

让我们考虑以下例子：

var x;
var y;
var sum;
var name;

假设我们有 14 个苹果和 6 个橙子。为了把它们存储在变量中，我们将使用以下方法：

var apples = 14;
var oranges = 6;

下面的例子不一样。你能告诉为什么吗？

var Apples = 14;
var apples = 14;
var APPLES = 14;
var appleS = 14;

是的，JavaScript 是区分大小写的。所有的变量在这里都是不同的，尽管变量的值是相同的。

现在，让我们做一些编码。之前在控制台上，你打印了你的名字作业。我希望你能毫无困难地完成。现在我们用一个变量来以不同的方式打印你的名字，怎么样？假设你的名字是夏洛克·福尔摩斯。这是什么类型的数据？

你说得对，它是字符串类型。通常对于字符串类型的数据，我们把字符串放在两个引号之间。

让我们考虑以下例子：

var name = "Sherlock Holmes";
var occupation = "Detective"

要在控制台上打印它们，你需要输入每个语句并按Enter。看一下下面的图片：

注意

不要在控制台上复制和粘贴代码。你可能会得到一个语法错误。

当你按下Enter后，会出现一个额外的行，显示undefined。现在不用担心这个。这只是返回了一个控制台日志。

您将福尔摩斯字符串存储在name变量中，将侦探存储在occupation中。每次访问name或occupation时，您都可以访问到这些字符串。

假设您想要在屏幕上打印福尔摩斯。只需输入以下内容：

document.write(name);

输入后，按Enter。您将看到福尔摩斯被打印在屏幕上，如下所示：

输入document.write(occupation);并按Enter，如下截图所示：

您可能会想知道为什么福尔摩斯和侦探之间没有空格。因为在控制台上，左侧的网页历史不会自动从上一个字符串之后移除，并且在您为第二个输出（occupation）按Enter之后，字符串会直接放在前一个字符串的后面。这种情况将一直发生，除非您使用Ctrl + L键盘快捷键清除控制台，并按F5键重新加载网页。

注意

当重新加载网页时，您存储的变量也将从内存中被擦除。不用担心，下一章节将教您如何在文件中使用存储的变量。

如果您想要连接两个（或多个）变量，您需要在两个变量之间添加加号（+），如下所示：

document.write(name+occupation);
document.write(occupation+name);

您能告诉我这些命令的输出将是什么吗？

是的，您是对的。输出将如下所示：

福尔摩斯侦探

侦探福尔摩斯

注意

您的输出可能会在网页上显示为一行。如果您想要换行，可以添加<br>HTML 标签。最简单的方法是输入document.write("<br>");并按Enter。您的下一个输出将在新的一行上。

如果您想在两个字符串之间添加任何字符串（例如空格），而不是任何变量，只需输入以下内容：

document.write(name+" "+occupation);

输出将如下所示：

福尔摩斯侦探

当您输入以下代码并按Enter时会发生什么？

document.write("My name is "+name+" and I am a "+occupation);

是的！您是绝对正确的。输出将如下所示：

我的名字是福尔摩斯，我是一名侦探

现在，在控制台上添加另一个变量。考虑福尔摩斯是 24 岁。您还记得年龄是什么类型的数据吗？

是的，这是一个整数类型的数字。因此，输入以下代码并按Enter：

var age = 24;

您现在有以下三个变量：

• 姓名

• 职业

• 年龄

让我们在网页上打印以下输出：

我的名字是福尔摩斯，我今年 24 岁，我是一名侦探

我们的控制台代码将是什么？

代码如下：

document.write("My name is "+name+", I\'m "+age+" years old and I am a "+occupation);

输出如下所示：

提示

打印引号/倒置逗号

如果您想使用document.write();语法打印莎士比亚说：“生存还是毁灭，这是一个问题！”，您可能会输入以下代码：

document.write("Shakespeare said, "To be, or not to be: that is the question!"");

然而，这将导致一个名为SyntaxError的错误。为了摆脱这个错误，您需要在两个倒置逗号之前使用反斜杠（\）。正确的代码将如下所示：

document.write("Shakespeare said, \"To be, or not to be: that is the question!\"");

输出将如下所示：

莎士比亚说：“生存还是毁灭，这是一个问题！”

单引号（'）也适用相同的规则。

这里有一个快速练习给你：

1. 假设汤姆有一只猫（露西）。这只猫，露西，今年2.4岁。将姓名、猫的名字和年龄分别存储在三个不同的变量中，并使用控制台打印以下输出：

汤姆的猫露西今年 2.4 岁。

1. 假设您购买了4磅的苹果。每磅花费了您$1.2。将苹果的价格和数量分别存储在两个不同的变量中，并使用控制台打印以下输出：

我买了 4 磅的苹果。每磅我需要支付 1.2 美元。

评论

假设你已经做了很多编码和一些逻辑操作，并在 JavaScript 中使用了许多变量，如果出现任何错误，你希望我帮你处理代码。当你把代码发给我时，除非我对 JavaScript 有清楚的了解，或者你在重要的行上做了注释，否则我不会知道你输入了什么。

注释基本上是浏览器在运行时忽略的一行文本或代码。你可以把注释比作便利贴或提醒。

让我们考虑以下例子：

Var name = "Sherlock Holmes"; // This is a string
Var occupation = "Detective"; // This variable stores information
Var age = 14; // This is an integer type of data.

如何创建多行注释？你可以这样提到注释：

/*
  This is a multiline comment.
  The browser will ignore this.
  You can type any important information on your comment.
*/

你的多行注释应该在/*和*/之间，如下截图所示：

算术运算符

在 JavaScript 中，就像其他编程语言一样，我们可以进行一些算术运算。在学校里，你可能已经学会了如何将两个数字相加，从一个数字中减去另一个数字，将两个数字相乘，并将一个数字除以另一个数字。你可以用几行代码在 JavaScript 中做所有这些事情。

在 JavaScript 中，我们使用以下算术符号进行运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	找到余数（称为取模运算符）

加法

假设你有两个变量x和y，它们的值分别是3和4。我们应该在控制台上做什么来存储变量的值？

是的，我们做以下操作：

var x = 3; // 3 is stored on variable x
var y = 4; // 4 is stored on variable y

然后，按Enter。

再取另一个变量，它将保存x和y的总和，如下所示：

var z = x+y; // This syntax stores the sum of x and y on z

你能告诉我当我们打印z时会发生什么吗？

document.write(z);

是的，你是对的，这将打印7，如下截图所示：

减法

要从一个数字中减去另一个数字，你需要在它们之间放一个减号（-）。

让我们考虑以下例子：

var x = 9; // 9 is assigned to the variable x.
var y = 3; // 3 is assigned to the variable y.
var z = x - y ; // This syntax subtracts y from x and stores on z.
document.write(z); // Prints the value of z.

这段代码的输出是6，如下截图所示：

乘法

要对存储在两个整数或浮点类型数据的变量或数字进行乘法，只需在变量或数字之间放一个星号（*）。

让我们看下面的例子：

var x = 6; // 6 is assigned to the variable x.
var y = 2; // 2 is assigned to the variable y.
var z = x * y; // For two numbers you can type z = 6 * 2 ;
document.write(z); // Prints the value of z

这段代码的输出是12，如下截图所示：

除法

要将一个数字除以另一个数字，你需要在数字之间放一个斜杠（/）。

让我们看下面的例子：

var x = 14; // assigns 14 on variable x.
var y = 2; // assigns 2 on variable y. 
var z = x / y; // divides x with y and stores the value on z. 
document.write(z); // prints the value of z. 

这段代码的输出是7，如下截图所示：

取模

如果你想找到一个数字与另一个数字的模，你需要在数字之间放一个百分号（%）。

让我们考虑以下例子：

var x = 34; // assigns 34 on the variable x. 
var y = 3; // assigns 3 on the variable y. 
var z = x % y ; // divides x with y and returns the reminder and stores on the variable z
document.write(z);

这段代码的输出是1，如下截图所示：

提示

取模（%）运算符是做什么的？

好吧，从你的数学课上，你已经学会了如何将一个数字除以另一个。比如，你将 10 除以 2。结果将是 5，这是一个整数类型的数字。然而，如果你将 10 除以 3 会发生什么？答案不会是一个整数。值是 3.333333333333。你也可以说答案是 3，余数是 1。考虑以下：

10 = 9 + 1;

也就是，(9+1)/3

= 9/3+1/3

= 3 + 1/3;

因此，余数是 1。取模的作用是找出余数并返回它。因此，10%3 = 1。

现在，让我们总结我们迄今为止学到的所有算术运算符在一个单一的代码中。

你能告诉我以下行的输出是什么吗？

var x = 5 ;
var y = 4 ;
var sum = x + y ;
var sub = x - y ;
var mul = x * y ;
var div = x / y ;
var mod = x % y ;
document.write("The summation of x and y is "+ sum + "<br>") ;
document.write("The subtraction of x and y is " + sub + "<br>") ;
document.write("The multiplication of x and y is " + mul + "<br>");
document.write("The division of x and y is " + div + "<br>") ;
document.write("The modulus of x and y is " + mod + "<br>") ;

你将得到以下输出：

x 和 y 的总和是 9

x 和 y 的减法是 1

x 和 y 的乘积是 20

x 和 y 的除法是 1.25

x 和 y 的模是 1

这个输出可以在以下截图中看到：

我猜你做对了。现在，让我们在下面解释它们：

• 我们分别给x和y分配了5和4

• 我们将x和y的总和分配给sum变量，x和y的减法分配给sub变量，x和y的乘法分配给mul变量，x和y的除法分配给div变量，x和y的模数分配给mod变量

• 然后，我们使用document.write();语法打印它们

• 我们使用<br>HTML 标签来分隔每行的输出

考虑以下示例：

约翰有 56 支笔。他想把它们排成七行。每行将有相等数量的笔。编写一个代码，将打印出每行的笔数。

（提示：为笔的数量和行数取两个变量，将笔的数量除以行数并将值存储在一个新变量中。）

示例输出如下：

约翰将不得不在每行放置 XX 支笔。 // XX 是笔的数量

更多的运算符和操作

JavaScript 有更多的运算符，除了前面提到的那些。让我们深入一点。

增量或减量运算符

如果您有一个整数，想要将其增加 1 或任何数字，您可以输入以下内容：

var x = 4; // assigns 4 on the variable x.
x = x + 1;
/* since x=4, and you are adding 1 with x, so the final value is 4 + 1 = 5, and 5 is stored on the same variable x. */

您也可以通过输入以下内容将变量增加 1：

var x = 4; // assigns 4 on the variable x.
x++; // This is similar to x = x + 1.

如果您想要将变量增加多于 1，您会怎么做？好吧，您可以按照以下步骤：

var x = 4; // assigns 4 on the variable x.
x = x + 3; // Say, you want to increment x by 3.
/* since x = 4, and you are adding 3 with x, so the final value is 4 + 3 = 7, and 7 is stored on the same variable x. */

您也可以通过输入以下内容来增加您的变量：

var x = 4; // assigns 4 on the variable x.
x += 3; // This is similar to x = x + 3.

提示

请记住，您不应该在运算符（例如+，-，*，/等）和等号（=）之间放置空格。

输出将在控制台上看起来类似于以下截图：

那么减量运算符呢？是的，你完全正确。减量操作与增量操作相同。唯一改变的是符号。您的加法（+）运算符将被减法运算符（-）替换。让我们看一个例子：

var x = 9; // assigns 9 on the variable x.
x = x - 1;
/* since x = 9, and you are subtracting 1 from x, so the final value is 9 - 1 = 8, and 8 is stored on the same variable x. */

您还可以通过输入以下内容将变量减少1：

var x = 9; // assigns 9 on the variable x.
x--; // This is similar to x = x - 1.

如果您想要将变量减少多于1，您可以按照以下步骤：

var x = 9; // assigns 9 on the variable x.
x = x - 4; // Say, you want to decrement x by 4.
/* since x = 9, and you are subtracting 4 from x, so the final value is 9 - 4 = 5, and 5 is stored on the same variable x. */

您还可以通过输入以下内容将变量减少：

var x = 9; // assigns 9 on the variable x.
x -= 4; // This is similar to x = x - 4.

这些代码的输出可以在以下截图中看到：

这种类型的操作对于 JavaScript 中的逻辑操作非常重要。您将在第四章深入了解中了解它们的用途。

赋值运算符

赋值运算符将一个值分配给一个运算符。我相信你已经了解了赋值运算符，不是吗？好吧，你在一个变量和它的值之间使用一个等号(=)。通过这样做，您将值分配给变量。

让我们看看以下示例：

var name = "Sherlock Holmes"

Sherlock Holmes字符串被分配给name变量。您已经学习了增量和减量运算符。你能告诉我以下代码的输出将是什么吗？

var x = 3; 
x *= 2; 
document.write(x); 

输出将是6。

您还记得为什么会发生这种情况吗？

x *= 2;等式类似于x = x * 2;，因为x等于3，然后乘以2。最终的数字（3 x 2 = 6）被分配给相同的x变量。这就是为什么我们得到以下输出的原因：

让我们进行以下练习：

以下代码的输出是什么？

var w = 32;
var x = 12;
var y = 9;
var z = 5;
w++;
w--;
x*2;
y = x;
y--;
z%2;
document.write(" w = "+w+ ", x = "+x+ ", y =  "+ y+", z =  "+z  );

我们将得到以下输出：

w = 32, x = 12, y = 11, z = 5

这个输出可以在以下截图中看到：

JavaScript 比较和逻辑运算符

如果您想在 JavaScript 中做一些逻辑操作并比较两个数字或变量，您需要使用一些逻辑运算符。以下是一些比较运算符的示例：

运算符	描述
==	等于
!=	不等于
>	大于
<	小于
=>	等于或大于
<=	小于或等于

以下是使用这些运算符的一些示例：

您将在接下来的章节中了解更多关于这些运算符的用法。

让我们讨论一些位逻辑运算符和位运算符：

运算符	描述
&&	这意味着 AND 运算符。我们使用它来检查两个或更多语句是否为真。
||	这意味着 OR 运算符。我们使用它来检查任何语句是否为真。
~	这意味着 NOT 运算符。
^	这意味着 XOR 运算符。
>>	这意味着右移运算符。
<<	这意味着左移运算符。

它们可能对您现在来说很难学。不用担心，您现在不必使用它们。我们将在第四章，深入了解中使用它们。

总结

在本章中，您学习了 JavaScript 语法。我们讨论了 JavaScript 变量以及如何为变量赋值。您学会了如何对代码进行注释。您现在知道了为什么注释很重要。最后，您学会了一个重要的主题：运算符和操作。如今，JavaScript 如果不使用运算符和逻辑函数，就不会那么丰富。因此，学习逻辑运算是获得 JavaScript 良好知识的关键。

我建议您在家里练习本章中的所有代码。您只需在控制台上输入它们，避免复制和粘贴代码。这将妨碍您的学习。作为程序员必须有良好的打字速度，复制和粘贴代码不会提高这一技能。您可能在输入代码时遇到问题；然而，您会学到的。

您可以使用 JavaScript 解决任何算术问题。您还可以在控制台上检查您的逻辑是真还是假。如果您能做到这一点，我们可以继续下一章，第三章，介绍 HTML 和 CSS，在那里您将学习有关 HTML、CSS 等的知识。

第三章：介绍 HTML 和 CSS

您已经在上一章学习了 JavaScript 语法、算术运算符和注释。我们用控制台来实现这些目的。现在，您想学习一些有趣的东西，这将为您成为一名优秀的 JavaScript 程序员铺平道路吗？在本章中，我们将学习超文本标记语言（HTML）语法、层叠样式表（CSS）语法以及如何在 HTML 页面中使用 JavaScript。

HTML 是网页的源代码。您在 Web 浏览器上加载的所有网页都是用 HTML 构建的。转到任何网站（例如，www.google.com）并在键盘上按Ctrl + U（在 Mac 上，点击command + U），您将获得网页的源代码。这适用于所有现代 Web 浏览器，如 Firefox，Google Chrome，UC 等。

您将看到的整个代码都是 HTML。您还可能会找到一些带有 JavaScript 的行。因此，为了了解网页的结构（页面背后的代码），您需要了解 HTML。这是网络上最简单的语言之一。

HTML

HTML 是一种标记语言。这是什么意思？嗯，标记语言使用特定的代码来处理和呈现文本，用于格式、样式和布局设计。有很多标记语言（例如，业务叙述标记语言（BNML），ColdFusion 标记语言（CFML），Opera 二进制标记语言（OBML），系统 生物标记语言（SBML），虚拟人标记语言（VHML）等）；然而，在现代网络中，我们使用 HTML。HTML 基于标准通用标记语言（SGML）。SGML 基本上用于设计文档纸。

注意

有许多 HTML 版本。HTML 5 是最新版本。在本书中，我们将使用最新版本的 HTML。

在开始学习 HTML 之前，让我问问您最喜欢的网站是什么。网站包含什么？一些网页？您可能会看到一些文本，一些图像，一两个文本字段，按钮以及每个网页上的一些其他元素。所有这些元素都是由 HTML 格式化的。

让我向您介绍一个网页。在您的互联网浏览器中，转到www.google.com。您将看到以下图像中显示的页面：

您在浏览器顶部看到的第一件事是网页的标题。让我们观察一下刚刚加载的页面：

• 在这里，标记的框，1，是我们加载的网页的标题。

• 第二个框，2，表示一些链接或文本。

• 页面中间的Google是一个图像。

• 第三个框，3，包含两个按钮。

• 你能告诉我页面右上角的登录是什么吗？是的，这是一个按钮。

让我们演示 HTML 的基本结构。术语标签将经常用于演示结构。

HTML 标签只是在小于号（<）和大于号（>）之间的一些预定义词。因此，标签的结构是<WORD>，其中WORD是互联网浏览器识别的预定义文本。这种类型的标签称为开放标签。还有另一种类型的标签，称为关闭标签。关闭标签的结构类似于</WORD>。您只需在小于号后面放一个斜杠。

在本节之后，您将能够使用 HTML 制作自己的网页。HTML 页面的结构类似于以下图像。这个图像有八个标签。让我们介绍所有这些标签及其活动，如下所示：

• 1：标签<html>是一个开放标签，在第15行关闭，使用</html>标签。

• 这些标签告诉您的互联网浏览器，这两个标签中的所有文本和脚本都是 HTML 文档。

• 2：这是<head>标签，是一个开放标签，在第7行关闭，使用</head>标签。

• 这些标签包含网页的标题、脚本、样式和元数据。

• 3：这是<title>标签，在第4行关闭，使用</title>标签。

• 此标签包含网页的标题。上一张图片的标题是Google。要在 Web 浏览器上看到这个，您需要输入以下内容：

<title> Google </title>

• 4：这是<title>标签的关闭标签。

• 5：这是<head>标签的关闭标签。

• 6：这是<body>标签，在第13行关闭，使用</body>标签。

您在网页上看到的所有内容都是在这两个标签之间编写的。每个元素、图像、链接等都在这里格式化。要在浏览器上看到这是一个网页，您需要输入以下内容：

<body>
This is a web page.
</body>

• 7：</body>标签在此处关闭。

• 8：</html>标签在此处关闭。

您的第一个网页

您刚刚学习了 HTML 页面的八个基本标签。现在您可以制作自己的网页。怎么做？为什么不和我一起尝试一下呢？

1. 打开您的文本编辑器（您已经在本书的第一章中安装了 Atom，在控制台中探索 JavaScript）。

2. 按下Ctrl + N，将打开一个新的untitled文件，如下图所示：

3. 在空白页面上输入以下 HTML 代码：

<html>
  <head>
    <title>
      My Webpage!
    </title>
  </head>
  <body>
    This is my webpage :)
  </body>
</html>

1. 然后，按下Ctrl + Shift + S，这将提示您在计算机上的某个位置保存您的代码：

2. 在文件名：字段中输入一个合适的名称。我想将我的 HTML 文件命名为webpage，因此我输入了webpage.html。您可能想知道为什么我添加了一个扩展名（.html）。

注意

由于这是一个 HTML 文档，您需要在给网页命名后添加.html或.htm。.htm扩展名是.html的旧形式。它的限制是保持文件扩展名为三个字符，因此人们使用.htm而不是.html。您也可以使用.htm。

1. 按下保存按钮。这将在您的计算机上创建一个 HTML 文档。转到您刚刚保存 HTML 文件的目录。

注意

请记住，您可以给您的网页任何名称。但是，这个名称不会显示在您的浏览器上。这不是您网页的标题。最好不要在网页名称中保留空格。例如，您想将 HTML 文件命名为这是我的第一个网页.html。您的计算机在 Internet 浏览器上显示结果时不会遇到问题；但是，当您的网站在服务器上时，这个名称可能会遇到问题。因此，我建议您在需要添加空格的地方使用下划线（_），例如This_is_my_first_webpage.html。

1. 您会发现一个类似以下图像的文件：

2. 现在，双击文件。您将在 Internet 浏览器上看到您的第一个网页！！您的第一个网页

您在<title>和</title>标签之间输入了My Webpage!，这就是为什么您的浏览器在第一个选择框中显示这个。1。您在<body>和</body>标签之间输入了This is my webpage :)。因此，您可以在第二个选择框中在浏览器上看到文本。2。

恭喜！您创建了您的第一个网页！

注意

你可以通过右键单击文件并选择使用 Atom 打开来编辑webpage.html文件的代码和其他文本。在重新在浏览器中打开文件之前，您必须保存（Ctrl + S）您的代码和文本。

更多 HTML 标签

有许多 HTML 标签可用于格式化网页的文本和对象。我们现在来学习其中一些吧？

描述	带示例的语法	浏览器上的结果
粗体文本	<b>这是粗体</b>	这是粗体
斜体文本	<i>这是斜体</i>	这是斜体
下划线文本	<u>下划线文本</u>
删除的文本	<del>删除我</del>
下标文本	CO<sub>2</sub>	CO2
上标	3x10<sup>8</sup>	3x108
最大标题	<h1>嗨，孩子们！</h1>
最小标题	<h6>嗨，孩子们</h6>
段落文本	<p>这是一个段落</p>	这是一个段落
断开标签	This <br>is <br>a break;	This is a break;

注意

有六个标题标签（<h1>到<h6>）。如果需要，你可以为一个文本添加多个标签。例如：<b><i><u> JavaScript </b></i></u>将有以下输出：。关闭标签的顺序没有特定的顺序。最好的做法是遵循打开标签的顺序。

着色 HTML 文本

要给 HTML 文本着色，我们可以输入以下内容：

<font color = "Green"> I am green </font>

你可以在两个引号之间输入任何标准颜色名称（" "）。你也可以使用十六进制颜色代码，如下所示：

<font color = "#32CD32"> I am green </font>

这里，32CD32是绿色的十六进制代码。看看下面的图片。左边是代码，我们在其中使用了颜色名称和十六进制代码。右边是我们浏览器的输出：

注意

十六进制颜色代码由六位数字组成（它是一个十六进制数）。它以井号或哈希号（#）开头，我们在其后放置六位十六进制数。十六进制数表示红色、蓝色和绿色的数量。每两位数字表示00到FF（十六进制数）。在这个例子中，我们使用#32CD32表示绿色。32、CD和32分别是十六进制中红色、蓝色和绿色的数量。

如果你不知道什么是十六进制数，记住我们使用十进制数，其中使用了 10 个数字（0、1、2、3、4、5、6、7、8 和 9）。然而，在十六进制数中，我们使用 16 个数字（0、1、2、3、4、5、6、7、8、9、A、B、C、D、E 和 F）。

我建议你使用这个网站（html-color-codes.info/）获取你喜欢的颜色的十六进制代码，而不用考虑十六进制代码。

链接 HTML 文本

要创建文本超链接，我们使用锚标签如下所示：

<a href = "http://www.google.com"> Go to Google </a>

这段代码的输出将是一个链接。如果你点击链接，它会将你发送到我们在引号中使用的 URL（这里是www.google.com）。

如果你想在浏览器的新标签中打开你的链接，你需要添加一个目标，如下所示：

<a href = "http://google.com" target = "_blank" > Go to Google </a>

这里，target="_blank"是一个属性，告诉你的浏览器在新标签中打开链接。还有一些其他属性。你可以在家里尝试它们，然后告诉我们你在浏览器上看到了什么。

其他属性还有_parent、_self和_top。以下图像具有带有_blank属性的代码。它在新标签中打开google.com。我建议你找出其他属性的作用：

插入图像

在 HTML 文档中插入图像非常容易。你只需要找到图像文件的扩展名。我们用来插入图像的标签如下所示：

<img src = "Image_name.extension">

src属性是你的图像来源。如果你的图像放在 HTML 文件的同一个目录中，你不需要写整个文件来源。在本书中，我们将保持我们的图像文件在同一个目录中，我们保存我们的 HTML 文件。

假设我在保存 HTML 文档的同一个文件夹中有一张图片。图片的名称是physics，扩展名是.png。现在，要在 HTML 文档中添加这个图片，我需要添加以下代码：

<img src= "physics.png">

注意

在 HTML 文档中使用三种类型的图像。可移植网络图形（PNG），图形交换格式（GIF）和联合图像专家组（JPG或JPEG）。要找到图像的扩展名，请右键单击图像，转到属性，然后点击详细信息选项卡，直到找到名称字段。您将找到带有扩展名的图像名称。根据您的操作系统，您的机器上的程序可能有所不同。

如果您想设置图像的高度和宽度，您需要使用两个属性，如下所示：

< img src = "physics.png" width="100" height="40">

这里，100和40是图像的像素。在以前的 HTML 版本中，它被定义为像素或百分比。

注意

像素是图像的最小单位。如果您希望在不同屏幕尺寸上看到相同比例的图像，最好使用百分比（%），否则，您可以使用像素（px）单位。

输出将类似于以下内容：

还有更多的 HTML 标签；但是，我们已经涵盖了大部分用于构建网页的标签。您能想象以下代码的输出吗？

<html>
  <head>
    <title>
      Example
    </title>
  </head>
  <body>
    <h1> This is a headline </h1>
    <h2> This is a headline </h2>
    <h3> This is a headline </h3>
    <h4> This is a headline </h4>
    <h5> This is a headline </h5>
    <h6> This is a headline </h6>
    <b>This is a bold text</b>. But <i>This is an italic text</i>. We can <u> underline</u> our text. <a href = "http://www.google.com">Go to Google </a> <br>
    <font color = "#AA2FF">This is colorful text</font>
    <br>
    <img src="img/math.png">
  </body>
</html>

代码的输出将类似于以下图像：

CSS

如果您想要使您的网页美观，您必须了解 CSS。CSS 是一种语言，允许您描述您的网页，为文本着色，更改文本的字体，并修改网页的布局。

CSS 语法有两个部分：

• 选择器

• 装饰器

在继续学习 CSS 之前，您需要介绍自己使用 HTML 标签：

<style>

</style>

此标签应保留在<head></head>标签之间。因此，代码的结构将如下所示：

<html>
  <head>
    <title>
    </title>
    <style>
      // your codes will be typed here
    </style>
  </head>
  <body>
  </body>
</html>

CSS 代码将被写在<style></style>标签之间。

要格式化文本，您需要记住用于文本的标签。假设您在 HTML 文档的正文中使用<h1></h1>标签中有一段文本，如下所示：

<h1> This is an example of HTML text. </h1>

要应用 CSS，您需要在<style> </style>标签之间输入以下内容：

<html>
  <head>
    <title>
    </title>
    <style>
      h1 {
      color:green;
      text-decoration: underline;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>This is an example of HTML text </h1>
  </body>
</html>

代码的输出将如下所示：

仔细看代码。我们在<h1></h1>标签中的文本中使用了以下 CSS：

      h1 {
      color:green;
      text-decoration: underline;
      text-align: center;
      }

在这里，我们使用了一些 CSS 语法（color，text-decoration等）。还有许多 CSS 语法，也称为属性（每个属性可能包含多个值）。

HTML 页面上的 JavaScript

您已经学会了如何在控制台上使用 JavaScript 打印内容。在 HTML 页面上怎么样？在这之前，让我们介绍一个 HTML 标签，<script></script>。我们的 JavaScript 代码将在这些标签之间。

由于有很多脚本语言，我们需要在这些标签之间定义我们正在使用的语言类型。因此，我们输入以下内容：

<script type = "text/javascript">
  // Our JavaScript Codes will be here. 
</script>

让我们看一个例子。在上一章中，您学会了如何在控制台上使用 JavaScript 进行基本操作。现在，我们将在 HTML 页面的<script></script>标签之间执行一些操作。仔细看以下代码：

<html>
  <head>
    <title>
      JavaScript Example
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var x = 34;
      var y = 93;
      var sum = x+y;
      document.write("The sum of "+x+" and "+y+" is "+sum);
    </script>
  </body>
</html>

代码的输出将如下所示：

我希望你能自己猜出代码的输出。

摘要

在本章中，您学会了 HTML，CSS 及其语法和用法。我们还介绍了如何在 HTML 文档中实现 JavaScript。现在，您可以构建自己的网页，并使用 JavaScript 使其更加美妙。我建议您不要跳过本章的任何部分，以便更好地理解下一章，第四章，深入了解。

第四章：深入了解

在我们迄今学到的大多数 JavaScript 程序中，代码行是按照它们在程序中出现的顺序执行的。每行代码只执行一次。因此，代码不包括测试条件是否为真或假，或者我们没有执行任何逻辑语句。

在本章中，您将学习一些逻辑编程。您将学习以下主题：

• 循环

• if 语句

• 开关情况

您已经知道如何在 HTML 文档中嵌入 JavaScript 代码。在开始本章之前，您将学习一些 HTML 标签和 JavaScript 方法。这些方法和标签将在整本书中使用。

注意

在面向对象编程中，我们不直接对对象外部的数据执行任何操作；我们通过传递一个或多个参数来要求对象执行操作。这个任务被称为对象的方法。

JavaScript 方法

在之前的章节中，您学会了如何使用document.write()打印内容。现在，您将学到更多内容。

我们将在控制台和 HTML 文档上检查这些方法，如下所示：

• 使用 JavaScript 显示警报或弹出框，我们使用以下方法：

alert("Hello World");

在控制台上输入以下内容并按Enter，您将看到一个弹出框显示Hello World：

您可以编写代码在 HTML 文档中显示类似以下内容的弹出框：

<html>
  <head>
    <title>Alert</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("Hello World");

    </script>
  </body>
</html>

输出将如下所示：

• 如果您想从用户那里获取信息，您需要使用提示框来做到这一点。例如考虑以下内容：

• 您想要输入用户名并在主网页上打印它。

• 您可以使用window.prompt()方法来实现这一点。

• window.prompt()的结构与以下内容类似：

window.prompt("What is your name?"); // You can type anything between the inverted commas.

• 现在，您需要将信息存储在一个变量中。您已经从之前的章节中知道如何做到这一点。输入以下内容并按Enter：

var name = window.prompt("what is your name?");

• 在控制台上运行此代码后，您将被要求在文本框中输入一些内容。输入信息后，您需要按OK按钮。您的信息现在存储在name变量中：

• 如果您想在网页上打印变量，您可以使用document.write();方法，如下所示：

document.write("Hello "+name+"!");

• 这些步骤的输出如下截图所示：

• HTML 文档中的代码如下所示：

<html>
  <head>
    <title>Prompt</title>
  </head>
  <body>
    <script type="text/javascript">
      var name = window.prompt("What is your name?");
      document.write("Hello "+name+"!"); 
    </script>
  </body>
</html>

HTML 按钮和表单

在上一章中，您学习了一些 HTML 标签。现在，我们将学习一些标签，这些标签将使学习 HTML 更有趣。

按钮

如果您想在 HTML 网页上添加按钮，您可以使用<button></button>标签。标签的结构如下所示：

<button type="button">Click Here </button>

如果您想让按钮执行某些操作，例如打开一个 URL，您可以考虑以下代码：

<a href="http://google.com/"><button type="button">Click Me </button> </a>

代码的输出如下：

形式

在 HTML 中，我们使用表单来表示包含交互控件以向 Web 服务器提交信息的文档部分。HTML 表单的基本结构如下所示：

<form>
  User ID: <input type = "text"><br>
  Password: <input type ="password"><br>
</form>

代码的输出将如下所示：

现在让我们深入一点！

if 语句

假设约翰有 23 个苹果，汤姆有 45 个苹果。我们想要使用 JavaScript 编程来检查谁有更多的苹果。我们需要让我们的浏览器理解if 语句。

注意

if 语句比较两个变量。

要检查我们的条件，我们需要声明包含苹果数量的两个变量，如下所示：

var john = 23;
var tom = 45;

要检查哪个数字更大，我们可以应用如下所示的 if 语句：

if(john > tom)
{
  alert("John has more apples than tom");
}

假设我们不知道哪个变量更大。然后，我们需要检查这两个变量。因此，我们需要将以下代码包含到我们的程序中：

if(tom > john )
{
  alert("Tom has more apples than John");
}

在 HTML 页面中的整个代码如下：

<html>
  <head>
    <title>
      If statement
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var john = 23;
      var tom = 45;
      if(john > tom){
        alert("John has more apples than Tom");
      }
    if(tom> john ){
      alert("Tom has more apples than John");
    }
    </script>
  </body>
</html>

输出将如下所示：

您在前几章中学习了条件运算符。在 if 语句中，您可以使用所有这些条件运算符。以下是一些带有注释的示例：

If(tom => john){
//This will check if the number of apples are equal or greater. 
}
If(tom <= john)
{
//This will check if the number of apples are equal or less. 
}
If(tom == john)
{
//This will check if the number of apples are equal. 
}

要检查多个条件，您需要使用 OR（||）或 AND（&&）。

考虑以下示例：

If(john == 23 || john => tom)
{
/* This will check if John has 23 apples or the number of John's apple is equal to or greater than Tom's. This condition will be full filled if any of these two conditions are true. 
*/
}
If(tom == 23 && john <= tom)
{
/* This will check if Tom has 23 apples or the number of john's apple is less than Tom's or equal. This condition will be full filled if both of these two conditions are true. 
*/
}

Switch-case

如果您有三个以上的条件，最好使用switch-case语句。switch-case 的基本结构如下所示：

switch (expression) {
  case expression1:
    break;
  case expression2:
    break;
  case expression3:
    break;
//-------------------------------
//-------------------------------
//  More case
//-------------------------------
//  -------------------------------
  default:    
}

每个case都有一个break。但是，default不需要break。

假设汤姆有 35 支笔。他的朋友约翰、辛迪、劳拉和特里分别有 25、35、15 和 18 支笔。现在，约翰想要检查谁有 35 支笔。我们需要将汤姆的笔数与每个人的笔数进行比较。我们可以使用 switch-case 来处理这种情况。代码将如下所示：

<html>
  <head>
    <title>
      Switch-Case
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var Tom = 35;
      switch (Tom) {
        case 25: //Number of John's pens
          document.write("John has equal number of pens as Tom");
        break;
        case 35: //Number of Cindy's pens
          document.write("Cindy has equal number of pens as Tom");
        break;
        case 15: //Number of Laura's pens
          document.write("Laura has equal number of pens as Tom");
        break;
        case 18: //Number of Terry's pens
          document.write("Terry has equal number of pens as Tom");
        break; 
        default:
          document.write("No one has equal pens as Tom");
      }
    </script>
  </body>
</html>

输出将如下所示：

注意

现在，将第二个案例（35）的值更改为其他，并检查您的结果。

练习

1. 假设您每天都需要上学，除了星期六和星期天。编写一个代码，您将输入今天的日期数字，网页将向您显示是否需要去上学。（提示：使用 switch case。）

2. 假设您有一个花园，您在月份的偶数天给所有植物浇水。编写一个代码，它将向您显示您是否需要在那一天给植物浇水。（提示：使用 if 条件和模运算符（%）。）

循环

在本段中，我们将学习一个有趣的东西，称为循环。

假设您需要使用 JavaScript 打印一行 100 次。您会怎么做？

您可以在程序中多次输入document.write("我想让您写的行");，也可以使用循环。

循环的基本用法是多次执行某些操作。比如，您需要打印1 + 2 + 4 + 6 +…………+100系列的所有整数，直到 100。计算是相同的，您只需要多次执行。在这些情况下，我们使用循环。

我们将讨论两种类型的循环，即for 循环和while 循环。

for 循环

for 循环的基本结构如下：

for(starting ; condition ; increment/decrement)
{
  statement
}

starting参数是您循环的初始化。您需要初始化循环以启动它。condition参数是控制循环的关键元素。increment/decrement参数定义了您的循环如何增加/减少。

让我们看一个例子。您想要打印javascript 很有趣10 次。代码将如下所示：

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
  <script type="text/javascript">
    var java; 
    for(java=0;java<10;java++){
      document.write("javascript is fun"+"<br>");
    }
  </script>
  </body>
</html>

输出将类似于以下内容：

是的！您打印了 10 次该行。如果您仔细查看代码，您将看到以下内容：

• 我们声明了一个名为java的变量

• 在for循环中，我们将0初始化为其值

• 我们添加了一个java<10的条件，使浏览器从0计数到10

• 我们通过1递增变量；这就是为什么我们添加了java++

练习

1. 使用 JavaScript 编写一个代码，将打印以下输出：

I have 2 apples.
I have 4 apples.
I have 6 apples.
I have 8 apples.
I have 10 apples.
I have 12 apples.
I have 14 apples.
I have 16 apples.
I have 18 apples.
I have 20 apples.

1. 编写一个代码，打印从 2 到 500 的所有偶数。

while 循环

您已经学会了如何使用 for 循环多次执行某些操作。现在，我们将学习另一个称为 while 循环的循环。while 循环的结构如下：

initialize;
while(condition){
  statement; 
  increment/decrement; 
}

前面示例的代码将如下所示：

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
    <script type="text/javascript">
      var java = 0;
      while(java < 10){
        document.write("javascript is fun"+"<br>");
        java++;
      }
    </script>
  </body>
</html>

输出将与for循环相同。

练习

1. 编写一个代码，使用 while 循环打印从 1 到 600 的所有奇数值。（提示：使用模运算符。）

2. 编写一个代码，将打印以下输出：

5 x 1  = 5
5 x 2  = 10
5 x 3  = 15
5 x 4  = 20
5 x 5  = 25
5 x 6  = 30
5 x 7  = 35
5 x 8  = 40
5 x 9  = 45
5 x 10 = 50

总结

在本章中，您学习了使用 JavaScript 的逻辑操作。您学习了循环、条件操作和其他 HTML 标签。

我们需要专注于这一章，因为我们在这里讨论了 JavaScript 中最重要的属性。如果你练习了这一章和前三章，你就可以成为 JavaScript 大师。我建议你在没有掌握这四章所有知识之前不要继续往下学习。如果你已经学习了我们之前讨论的所有主题，让我们继续第五章，“啊哟！航行进入战斗”。

第五章：啊呵！驶向战斗

在本章中，我们将使用 HTML、CSS 和 JavaScript 开发一个完整的游戏。我们将专注于 JavaScript 编码，因此，我们不会关心游戏的图形。我们将编写一个名为战舰的游戏。你们中的许多人以前听说过它。这是一个记忆游戏。你的想象力和直觉将帮助你赢得游戏。有几种不同的玩法。

让我们讨论一下游戏的外观。有一些相互连接的正方形几何物体，如下所示。行数和列数需要相等：

行和列通常用数字系统或字母来命名。假设行是 1，2，3，4，5，6，7，8，9 和 10。列是 A，B，C，D，E，F，G，H，I 和 J。我们可以用数字或字母来命名它们：

这是一个双人游戏。以下是它的规则：

• 两名玩家将秘密地在他们的矩阵/网格上放置他们的船只（可以是不同类型的船只或水上交通工具）。

• 玩家可以将他们的船只放置在垂直或水平位置；但不能对角线放置。

• 玩家必须在开始游戏之前将所有船只放在网格上。

• 他们的船只不能重叠。

• 当所有船只都放置好后，玩家就不能再移动他们的船只了。

• 放置所有船只后，第一个玩家将说明第二个玩家的坐标，如果有属于第二个玩家的船只，那艘船将被击中。

• 然后，第二个玩家将说明第一个玩家的坐标。如果有属于第一个玩家的船只，它将被击中。

• 坐标可能类似于A2、B2、D5等。第一个字母将是网格的x轴，数字将代表网格的y轴。

• 击沉对手的所有船只的玩家将获胜。

以下图显示了网格上放置的一些船只：

现在，我们将进入游戏的编程部分。

我们将遵循以下规则，以便我们的游戏不会变得难以编码：

1. 每个玩家将拥有一艘船只。

2. 船只将占据网格的四个部分。

3. 玩家将不得不在提示框中输入x和y轴坐标。

4. 网格将是 9 x 9。

5. 玩家将不得不为船只的水平或垂直位置放置h或v。

6. 为了简化绘图，我们将在网格的位置上放置点（.）。网格将类似于以下图像：

7. 我们将需要一个Fire按钮来开始游戏。

HTML 部分

HTML 部分将类似于以下代码：

<html>
  <head>
  </head>
  <body>
    <h1> Battleship Game </h1>
  </body>
  <style>
// We will code in CSS here
  </style>
  <script type = "text/javascript">
//We will code in JavaScript here
  </script>
</html>

代码的输出将如下图所示：

CSS 部分

我们在<style></style>标签中使用 CSS 编码来设置 body。由于我们只关注 JavaScript 编码，我们不会关心游戏的视觉部分。为了使游戏的主体色彩丰富多彩，我们将使用以下代码：

  <style>
    body { 
      background-color: #eff; 
    }
  </style>

JavaScript 部分

这部分是我们游戏的主要部分，我们将最关注这部分。我们将在<script></script>标签中编写所有的代码。

对于网格，我们将需要一个二维数组。我们将使用一个game变量来存储数据，如下所示：

注意

许多程序可能需要处理具有共同特征的多个数据项。在这种情况下，将数据项放在数组中通常是方便的，它们将共享相同的名称。个别数据可以是字符、浮点数、整数等。但是，它们必须是相同的类型和类。

var game = [    [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
           ];

我们将使用一个变量来在 HTML 页面上显示二维数组：

var board = document.createElement("PRE");

现在我们将这个添加到 body 并创建一个按钮：

document.body.appendChild(board);
var button=document.createElement("BUTTON");

这个按钮将调用fire函数（我们稍后会编写这个函数）：

button.onclick = fire;

现在，我们将在 body 部分放置按钮：

var t=document.createTextNode("Fire!");
  document.body.appendChild(button);
  button.appendChild(t);

让我们创建一个绘制棋盘的函数：

  function drawBoard() {
    var boardContents = "";
    var i;
    var j;
    for (i=0; i<9; i++) {
      for (j=0; j<9; j++) {
        boardContents = boardContents + game[i][j]+" ";
        // Append array contents for each board square
      }
      boardContents = boardContents + "<br>";
      // Append a line break at the end of each horizontal line
    }
    return boardContents;
    // Return string representing board in HTML
  }

现在，通过编写以下代码在 HTML 页面上绘制棋盘：

board.innerHTML = drawBoard();

我们将使用prompt()函数询问玩家他想把船放在哪里：

var x=prompt("Where would you like to place your ship? Enter an X coordinate: (0-8)");
  var y=prompt("Where would you like to place your ship? Enter a Y coordinate: (0-8)");
  var direction=prompt("Place (h)orizontally, (v)ertically");
  x = Number(x);  // Convert the string returned by "prompt" into a number
  y = Number(y);  // Convert the string returned by "prompt" into a number

如果玩家选择他们的船的水平方向，我们需要用以下代码替换点：

if (direction[0] == "h") {
  var c;
  for (c = x; c < (x + 4); c++)
  {
    game[y][c] = '#';
  }
}

如果玩家选择他们的船的垂直方向，我们需要用以下代码替换点：

if (direction[0] == "v") {
  var c;
  for (c = y; c < (y + 4); c++)
  {
    game[c][x] = '#';
  }
}

放置船后，我们需要重新绘制棋盘，如下所示：

  board.innerHTML = drawBoard();

让我们创建fire()函数。

我们的fire()函数将如下所示：

function fire() {
//We will write codes here.
}

当调用fire()函数时，我们需要从玩家那里获取输入，如下所示：

  var fireX=prompt("Where would you like to fire? Enter an X coordinate: (0-8)");
  var fireY=prompt("Where would you like to fire? Enter a Y coordinate: (0-8)");

将输入转换为数字，如下所示：

  fireX = Number(fireX);
  // Convert the string returned by "prompt" into a number
  fireY = Number(fireY);
  //  Convert the string returned by "prompt" into a number

如果输入与#字符不匹配，我们将使用以下代码打印You Missed.：

  if (game[fireY][fireX] == ".") {
    // Check if the specified coordinate is occupied by the cruiser
    alert("You Missed.");
  }

如果输入命中了船，我们将打印一些消息并重新绘制棋盘：

  else if (game[fireY][fireX] == "*") {
    alert("You already hit the ship there.");
  } else {
    alert("Kaboom! You hit a ship");
    game[fireY][fireX] = "*";
    board.innerHTML = drawBoard();
    // Redraw board with hit marker at specified coordinate
  }

现在，我们需要检查棋盘上是否还有船。我们将使用以下代码：

  var shipfound;
  var i;
  var j;
  // Check if there are any ships remaining on the board
  for (i=0; i<9; i++) {
    for (j=0; j<9; j++) {
      if (game[i][j] != "." && game[i][j] != "*") {
        shipfound = true;
        // Taking a boolean data type to set it if a ship is found
      }
    }
  }

如果没有船剩下，我们将结束游戏：

if (!shipfound) {
  // If no ships are found end the game
  alert("All ships have been sunk. Well done Captain! Game over");
  document.body.removeChild(button);
  // Remove the fire button from the page after game over
}

最终代码

我们的最终代码将类似于以下内容：

<html>
  <head>
  </head>
  <body>
    <h1> Battleship Game </h1>
  </body>
  <style>
  body {
    background-color: #eff;
  }
  </style>
  <script>
    var game = [  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
               ];
    var board = document.createElement("PRE");
    // preparing the HTML <pre> element to display the board on the page
    document.body.appendChild(board);
    var button=document.createElement("BUTTON");
    // Preparing the "Fire! button to allow the player to fire at the ship
    button.onclick = fire;       // Clicking the button calls the fire() function
    var t=document.createTextNode("Fire!");
    document.body.appendChild(button);
    button.appendChild(t);
    function drawBoard() {
      var boardContents = "";
      var i;  var j;
      for (i=0; i<9; i++) {
        for (j=0; j<9; j++) {
          boardContents = boardContents + game[i][j]+" ";
          // Append array contents for each board square
        }
        boardContents = boardContents + "<br>";
        // Append a line break at the end of each horizontal line
      }  return boardContents;
      // Return string representing board in HTML
    }
    board.innerHTML = drawBoard();
    // Display the board on the page using the above function
    var x=prompt("Where would you like to place your cruiser? Enter an X coordinate: (0-8)");
    var y=prompt("Where would you like to place your cruiser? Enter a Y coordinate: (0-8)");
    var direction=prompt("Place (h)orizontally, (v)ertically");
    x = Number(x);  // Convert the string returned by "prompt" into a number
    y = Number(y);  // Convert the string returned by "prompt" into a number
    if (direction[0] == "h") {
      var c;
      for (c = x; c < (x + 4); c++)
      {
        game[y][c] = '4';
      }
    }
    // Draw cruiser vertically
    if (direction[0] == "v") {
      var c;
      for (c = y; c < (y + 4); c++)
      {
        game[c][x] = '4';
      }
    }
    board.innerHTML = drawBoard(); // Redraw board with cruiser added
    // Function for firing a shot when the "Fire! button is pressed
    function fire() {
      var fireX=prompt("Where would you like to fire? Enter an X coordinate: (0-8)");
      var fireY=prompt("Where would you like to fire? Enter a Y coordinate: (0-8)");
      fireX = Number(fireX);
      // Convert the string returned by "prompt" into a number
      fireY = Number(fireY);
      //  Convert the string returned by "prompt" into a number
      if (game[fireY][fireX] == ".") {
        // Check if the specified coordinate is occupied by the cruiser
        alert("Missed.");
      }
      else if (game[fireY][fireX] == "*") {
        alert("You already hit the ship there.");
      } else {
        alert("Kaboom! You hit a ship");
        game[fireY][fireX] = "*";
        board.innerHTML = drawBoard();
        // Redraw board with hit marker at specified coordinate
      } 
      var shipfound;  
      var i;  
      var j;
      // Check if there are any ships remaining on the board
      for (i=0; i<9; i++) {
        for (j=0; j<9; j++) {
          if (game[i][j] != "." && game[i][j] != "*") {
            shipfound = true;
            // Set to true if a ship is found
          }
        }
      }if (!shipfound) {
        // If no ships are found end the game
        alert("All ships have been sunk. Well done Captain! Game over");
        document.body.removeChild(button);
        // Remove the fire button from the page after game over
      }
    }
  </script>
</html>

如果您运行上述代码，您将看到以下提示：

让我们玩我们创建的游戏。第一个玩家必须放置他的船。他必须输入船的坐标。

假设我们在x轴上输入3，在y轴上输入2。将我们的船放在垂直方向。游戏屏幕将如下所示：

您可以看到您的船已经放好了。现在，您可以通过按下Fire按钮来射击对手（计算机）。您将被要求输入您想要射击的网格的坐标。如果您没有命中，您将看到我们编写的消息You Missed.

我希望您能玩您建立的游戏。

恭喜！

如果您想进一步开发您的游戏（例如增强图形，船只数量等），您只需要开发 CSS 和 JavaScript。

现在，我们将看到战舰游戏的更好代码，如下所示：

1. 在您的计算机的任何位置创建一个js文件夹。

2. 在js文件夹中，放置本章中包含的三个文件：battleship.js，functions.js和jquery.min.js。

3. 在js文件夹外，放置battleship.css和index.html文件。

在记事本中打开index.html文件，您将看到以下代码：

<html>
  <head>
    <title>Battleship</title>
    <meta name="viewport" content="width=device-width" />
    <link href="battleship.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h1>BATTLESHIP</h1>
    <div class="game-types">
      <h2 class='game-choice'>Choose a game type</h2>
      <dl class="game-description">
        <dt>Standard</dt>
        <dd>Classic Battleship with randomly placed ships</dd>
        <dt>Custom</dt>
        <dd>Choose any 5 ships and place them where you like. The computer will have the same 5 ships, randomly placed</dd>
      </dl>
      <div class='button-wrapper'>
        <button class="standard">Standard</button>
        <button class="custom">Custom</button>
      </div>
    </div>
    <div class='ship-picker'>
      <h2>Pick 5 Ships</h2>
      <h3>Selected ships</h3>
      <ul class="ship-list">
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
      </ul>
      <ul class='ship-choices button-wrapper'>
        <li class="ship-choice">Carrier</li>
        <li class="ship-choice">Battleship</li>
        <li class="ship-choice">Submarine</li>
        <li class="ship-choice">Cruiser</li>
        <li class="ship-choice">Destroyer</li>
      </ul>
      <div class='button-wrapper'>
        <button class='build-fleet inactive'>Build Fleet</button>
      </div>
    </div>
    <div class="ship-placer">
      <div class="board placer-board">
        <div class="labels">
          <div class="row-label">
          </div>
          <div class="column-label">
          </div>
        </div>
        <div class="playable-area">
        </div>
      </div>
      <div class='ships-to-place'>
        <h3>Ships to place</h3>
        <ul>
        </ul>
      </div>

      <div class="clear"></div>
      <div class="instructions">
        <p>Use 'WASD' keys to rotate pieces</p>
      </div>

      <div class='button-wrapper'>
        <button class="start inactive">Start game</button>
      </div>
    </div>
    <div class="game-area">
      <div class="board-wrap">
        <h1 class="hidden">BATTLESHIP</h1>
        <div class="single-board-wrap">
          <div class="board human-board">
            <div class="labels">
              <div class="row-label">
              </div>
              <div class="column-label">
              </div>
            </div>
            <div class="playable-area">
            </div>
          </div>
          <h2>Human Board</h2>
        </div>
        <div class="single-board-wrap">
          <div class="board ai-board">
            <div class="labels">
              <div class="row-label">
              </div>
              <div class="column-label">
              </div>
            </div>
            <div class="playable-area">
            </div>
          </div>
          <h2>Opponent Board</h2>
        </div>
        <div class="button-wrapper">
          <button class="new-game">New Game</button>
          <button class="stats hidden">Show Stats</button>
        </div>
      </div>
      <div class="info-area">
        <h2>Enemy ships remaining</h2>
        <div class="scoreboard">
          <div class="ships-left">
          </div>
        </div>
        <div class="gamelog-container">
          <h2>GAME LOG</h2>
        </div>
      </div>
    </div>
    <script src="img/jquery.min.js"></script>
    <script src="img/functions.js"></script>
    <script src="img/battleship.js"></script>
  </body>
</html>

我们在 HTML 文件中包含了三个 JavaScript 文件。我们添加了一个 jQuery 文件，我们将在下一章中讨论。上述代码的输出将显示以下屏幕：

您可以点击标准按钮来玩标准战场，或者点击自定义按钮来玩非标准战场。

如果您选择标准按钮，您将看到以下屏幕：

现在，您可以猜测对手的船的位置并点击网格。屏幕右侧将有一个日志面板。您还可以从游戏日志面板的前面面板中看到您摧毁了多少艘船以及哪些船。

如果您选择自定义游戏，您将看到以下屏幕：

添加完五艘船后，您可以玩游戏。如果需要，您可以多次添加相同的船只。

您可以将您的船垂直或水平放置，并点击瓷砖来击中对手的船。您一次只能点击一个瓷砖。

摘要

在本章中，我们构建了一个完整的游戏并进行了游戏。我们还玩了一个我们构建的游戏的更好版本。你需要记住的是，你必须了解我们之前讨论的所有代码背后的逻辑。本章附有更好版本游戏的源代码。我希望你能学习这些代码并编写自己的战舰游戏。在我们改进的战舰游戏中，我们使用了jquery.js JavaScript 文件。jquery.js文件有很多行代码（我们将在第六章中讨论这个问题，探索 jQuery 的好处）。

如果你掌握了本章讨论的所有代码，我们现在可以转到下一章。

第六章：探索 jQuery 的好处

如果你已经阅读了上一章，你可能已经在你的战舰游戏中实现了jQuery。在本章中，我们将详细讨论 jQuery。

jQuery 库是一个 JavaScript 框架。它于 2006 年发布。人们过去称它为jSelect。我们在我们的网站中使用 jQuery，这样我们就可以更轻松地使用 JavaScript 并为我们的网页添加效果。你可能会认为 jQuery 与 JavaScript 不同。不！jQuery 只是另一个 JavaScript 文件。它是一个非常轻量级的库，可以帮助你更轻松地装饰你的网页，编写更少的代码。

我们使用 jQuery 是因为以下优势：

• 它是开源的；如果需要，你可以编辑或修改它的代码

• 它是一个小型库（大约 150 KB 文件）

• jQuery 的社区支持非常强大；你可以轻松地从用户那里获得帮助

• 它用户友好且流行

• 它支持跨浏览器

• 它是公开开发的；你可以通过编辑代码来修复任何错误或添加功能

• 它帮助开发人员通过使用 AJAX 构建响应式网站

• 它具有内置的动画功能，帮助开发人员在他们的网站中创建动画

安装 jQuery

问题是在哪里找到 jQuery。嗯，你可以在jquery.com/找到它。我也在这本书中附上了文件。你可以从那里下载。

如果你去jquery.com/，你会看到以下屏幕：

点击下载 jQuery按钮。你将被重定向到以下页面：

jQuery 有两个版本：1.x.x和2.x.x。这些版本之间只有一些差异。压缩版本的代码不可读，因为该版本没有空格和注释；然而，未压缩版本的代码清晰且格式良好，它还有重要的注释来理解代码和函数的工作。如果你想学习 jQuery 的函数如何工作，我建议你阅读 jQuery 未压缩版本。

在本章中，我们将使用2.x.x版本。最新版本的2.x.x是2.2.0。

注意

你可以下载压缩或未压缩版本的 jQuery。

我建议你使用压缩版本，因为它很轻量级。

我们将在本章中使用未压缩版本，这样你就可以学习jquery.js并清楚地了解它的工作原理。点击下载未压缩的开发版 jQuery 2.2.0后，你将在浏览器上看到 jQuery 库。按下键盘上的Ctrl + S来保存文件，如下面的截图所示：

下载 jQuery 后，将其放在你的电脑上。为了简单起见，将其重命名为jquery。

在同一个文件夹中创建一个新的 HTML 文件，并通过在<head></head>标签中输入以下代码将jquery.js包含在你的 HTML 文档中：

<script src="img/jquery.js"></script>

要检查你导入的jquery.js是否工作，输入以下代码。我稍后会解释代码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script type="text/JavaScript">
    jQuery(document).ready(function()
    {
      jQuery('h1').click(function()
      {
        alert("jQuery is working!");
      } //click function ends here.
      );
    } // ready function ends here.
    );
  </script>
  <body>
    <h1>Click Here!</h1>
  </body>
</html>

打开 HTML 文件后，点击点击这里！ 你会看到以下屏幕：

这意味着你的 jQuery 正在工作。

让我们讨论一下我们写的代码。

注意

你也可以在不下载的情况下安装 jQuery。这种安装方式称为内容交付网络（CDN）安装。

你需要将以下行添加到你的 HTML 文档中，如果你在线连接，你的浏览器将自动加载 jQuery。

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

解释代码

现在，让我们讨论我们之前使用的代码。我们在我们的代码中使用了以下函数：

jQuery(document).ready(function(){
//our codes. 
});

这是一个 jQuery 函数，允许你设置你的 jQuery 准备好被使用。你可以用下面的代码将jQuery替换为美元符号（$）：

$(document).ready(function(){
//our codes.
});

您需要考虑在哪里应用 jQuery。我们在 body 标签中写了<h1>点击这里！</h1>。我们希望我们的点击这里！在被点击时做一些事情，这就是为什么我们添加了一个类似于以下格式的click函数：

  jQuery('h1').click(function(){
    //our codes.
  });

jQuery可以被替换为$，如前所述。

我们添加了一个alert函数，这样当我们点击文本时，就会出现一个警报框。

深入了解

让我们详细讨论我们经常使用的 jQuery 函数/方法。

所有方法都应该写在ready()函数中。一些常用的方法如下：

• 加载

• keyup

• 按键

• 更改

• 焦点

• 模糊

• 调整大小

• 滚动

load()方法

使用这种方法，您可以在浏览器上加载文件。考虑您想要从浏览器上的.txt文件中获取一些文本。您可以进行以下编码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#click").load("test.txt");
      });
    });
  </script>
  <body>
    <div id="click">
      Hello;
    </div>
    <button type="button" name="button">Click to replace "Hello" from text file</button>
  </body>
</html>

单击按钮后，click div 中的文本将更改为恭喜！您已经加载了您的文件！！，如下所示：

！load()方法

keyup()和 keydown()方法

使用这种方法，您可以控制键盘按钮的按键。当按下或未按下键时，您可以让浏览器执行某些操作。假设您有一个文本框，您想从中获取输入。当按下键时，您希望您的文本框变为红色；否则颜色应保持为绿色。您可以通过实现/编写以下代码来实现这一点：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color", "green");
      });
      $("input").keyup(function(){
        $("input").css("background-color", "red");
      });
    });
  </script>
  <body>
    Type Something:  <input type="text">
  </body>
</html>

！keyup()和 keydown()方法

change()方法

要更改一些文本，您可以使用以下代码来使用此方法：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
  $(document).ready(function(){
    $("input").change(function(){
      alert("The text has been changed.");
    });
  });
  </script>
  <body>
    Type Something:  <input type="text">
  </body>
</html>

您的输出将类似于以下图像：

！change()方法

模糊()和聚焦()方法

要使您的文本或按钮模糊或聚焦，您可以实现以下代码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
  $(document).ready(function(){
    $("button").blur(function(){
      alert("Your button is not focused!");
    });
  });
  </script>
  <body>
    <button type="button">CLick Me!</button>
  </body>
</html>

您也可以对focus()方法执行此操作，如下所示：

！blur()和 focus()方法

resize()方法

如果您想查看浏览器调整大小了多少次，您可以在 HTML 文档中执行以下操作：

！resize()方法

scroll()方法

您可以使用以下代码为鼠标滚动添加动作：

<html>
  <head>
    <script src="img/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $("div").scroll(function(){
          $("span").text("You are scrolling!");
        });
      });
    </script>
  </head>
  <body>
    <div style="border:2px solid black;width:200px; height:200px;overflow:scroll;">
      Cowards die many times before their deaths;<br>
      The valiant never taste of death but once.<br>
      Of all the wonders that I yet have heard,<br>
      It seems to me most strange that men should fear;<br>
      Seeing that death, a necessary end,<br>
      Will come when it will come.<br>
    </div>
    <span></span>
  </body>
</html>

当您用鼠标滚动时，您可以看到您在scroll()函数中创建的事件，如下所示：

！scroll()方法

总结

jQuery 库非常有趣且易于新学习者使用。您所要做的就是练习 jQuery 的方法和函数。有很多 jQuery 插件在线。您也可以下载并将它们安装到您的网页上。使用 jQuery 及其插件，您可以轻松地美化和编写您的网站。对我来说，jQuery 最有趣的部分是动画。我将在下一章中解释如何使用 jQuery 来制作动画。

第七章：介绍画布

在本章中，我们将学习 HTML 画布。HTML 画布可以帮助您在 HTML 页面上绘制图形（例如圆圈、正方形、矩形等）。<canvas></canvas>标签通常由 JavaScript 控制。画布可以绘制文本，也可以进行动画。让我们看看使用 HTML 画布我们能做些什么。

实现画布

要在您的 HTML 页面上添加画布，您需要在<canvas></canvas>标签中定义画布的高度和宽度，如下所示：

<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
  <canvas id="canvasTest" width="200" height="100" style="border:2px solid #000;">

    </canvas>
  </body>
</html>

我们已经将画布 ID 定义为canvasTest，将用它来操作画布。我们在画布上使用了内联 CSS。使用 2 像素的实线边框可以更好地查看画布。

添加 JavaScript

现在，我们将为我们的画布添加几行 JavaScript。我们需要在<script></script>标签中的<canvas></canvas>标签之后添加我们的 JavaScript。

画一个矩形

要测试我们的画布，让我们在画布中画一个矩形，输入以下代码：

<script type="text/javascript">
  var canvas = document.getElementById("canvasTest"); //called our canvas by id
  var canvasElement = canvas.getContext("2d"); // made our canvas 2D
  canvasElement.fillStyle = "black"; //Filled the canvas black
  canvasElement.fillRect(10, 10, 50, 50); //created a rectangle
</script>

在脚本中，我们声明了两个 JavaScript 变量。canvas变量用于使用我们在<canvas></canvas>标签中使用的画布 ID 来保存我们画布的内容。canvasElement变量用于保存画布的上下文。我们将black赋给fillstyle，这样我们要绘制的矩形在填充时变黑。我们使用canvasElement.fillRect(x, y, w, h);来确定矩形的形状。其中x是矩形距离x轴的距离；y是矩形距离y轴的距离；w和h分别是矩形的宽度和高度。

完整的代码如下所示：

<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvasTest" width="200" height="100" style="border:2px solid #000;">
    </canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("canvasTest"); //called our canvas by id
      var canvasElement = canvas.getContext("2d"); // made our canvas 2D
      canvasElement.fillStyle = "black"; //Filled the canvas black
      canvasElement.fillRect(10, 10, 50, 50); //created a rectangle
    </script>
  </body>
</html>

代码的输出如下：

画一条线

要在画布中画一条线，您需要在<script></script>标签中插入以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.moveTo(0,0);
  canvasElement.lineTo(100,100);
  canvasElement.stroke();
</script>

在这里，canvasElement.moveTo(0,0);用于使我们的线从画布的(0,0)坐标开始。canvasElement.lineTo(100,100);语句用于使线对角线。canvasElement.stroke();语句用于使线可见。我建议您更改canvasElement.lineTo(100,100);和canvasElement.moveTo(0,0);中的数字，并查看画布绘制的线的变化。

以下是代码的输出：

一个快速的练习

1. 使用画布和 JavaScript 画一条与画布的y轴平行的线。

2. 画一个高 300 像素，宽 200 像素的矩形。在同一画布上画一条线，触及矩形。

画一个圆

要在画布中画一个圆，您需要在<script></script>标签中添加以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.beginPath();
  canvasElement.arc(95,50,40,0,2*Math.PI);
  canvasElement.stroke();
</script>

在这里，我们使用了canvasElement.beginPath();来开始画圆，canvasElement.arc(95,50,40,0,2*Math.PI);来确定圆的形状，canvasElement.stroke();来设置圆可见。

注意

canvasElement.arc(95,50,40,0,2*Math.PI);语句类似于canvasElement.arc(x, y, r, sA, eA, ac);,

其中x是从x轴开始的坐标，y是从y轴开始的坐标，r是圆的半径，sA是圆的起始角度，eA是圆的结束角度，ac是圆的方向。在这里，ac表示逆时针。

我们的代码的输出将是以下图像：

绘制线性渐变

让我们画点新东西。我们将画一个矩形，并使其颜色逐渐变淡。在您的<script></script>标签中输入以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  // Create the gradient
  var grdient = canvasElement.createLinearGradient(0,0,100,0);
  grdient.addColorStop(0,"blue"); // here we added blue as our primary color
  grdient.addColorStop(1,"white"); //here we used white as our secondary color. 
  // Fill with gradient
  canvasElement.fillStyle = grdient;
  canvasElement.fillRect(10,10,150,80);
</script>

我们添加了canvasElement.createLinearGradient(0,0,100,0);来创建渐变或淡化。我们添加了grdient.addColorStop(0,"blue");和grdient.addColorStop(1,"white");来给矩形上色。

代码的输出如下图所示：

一个快速的练习

1. 使用 HTML 画布绘制以下笑脸。（提示：您将不得不绘制三个完整的圆和一个半圆。诀窍是您可以通过玩转画布的圆形代码来绘制图形。）：

2. 用颜色渐变绘制一个圆。

让我们制作一个时钟！

我们将绘制一个模拟时钟，并使其像真正的时钟一样工作。在 HTML 文档的 body 部分中，键入以下代码：

<canvas id="myclock" height="500" width="500"></canvas>
In your <script></script> tags, take the following variables:
Var canvas; // the clock canvas
var canvasElement; // canvas's elements

// clock settings
var cX = 0; 
var cY = 0;
var radius = 150;

在这里，cX和cY是我们时钟的中心坐标。我们将时钟的半径取为 150 像素。您可以增加或减少它。

然后，我们需要初始化变量。在定义前述变量之后，创建一个init();函数。

该函数应该看起来类似于以下内容：

function init() {

  canvas = document.getElementById("myclock");
  //Called the element to work on. 
  canvasElement = canvas.getContext("2d");
  //Made the context 2d. 

  cX = canvas.width / 2;
  // we divided by two to get the middle point of X-axis
  cY = canvas.height / 2;
  // we divided by two to get the middle point of Y-axis
  initTime(); //called the initTime() function.
  drawClock(); //Called the drawClock() function to draw the graphics. 

  setInterval("animateClock()", 1000); // Made the animation for each second. Here 1000 is equal to 1 second. 

}

让我们初始化时钟的秒、分和时针：

function initTime() {
  date = new Date();
  hours = date.getHours() % 12; // Divided by 12 to make our clock 12 hours. 
  minutes = date.getMinutes(); 
  seconds = date.getSeconds();

}

在这里，date.getHours()，date.getMinutes()和date.getSeconds()将返回您计算机的时间并将其保存在我们的变量中。

创建另一个函数，用于为我们的时钟添加动画：

function animateClock() {
  //This function will help our 'second' hand to move after an interval. 
  clearCanvas(); // This will clear the canvas 
  refreshTime(); // This will refresh time after 1 second. 
  drawClock();   // This will draw the clock. 

}

我们现在将编写clearCanvas()，refreshTime()和drawClock()：

function clearCanvas() {
  canvasElement.clearRect(0, 0, canvas.width, canvas.height);
}

在这里，canvasElement.clearRect(0, 0, canvas.width, canvas.height);将在一定时间间隔后重置我们的画布。

我们的refreshTime()函数应该如下所示：

function refreshTime() {
  seconds += 1;
  if (Math.floor((seconds / 60)) != 0) { //we divide seconds by 60 until second is equal to zero. 
    minutes += 1; // If 60 second is passed we increment minute by 1\. 
    seconds %= 60; 
  }
  if (Math.floor((minutes / 60)) != 0) { 
    hours += 1; //We increment hour by 1 after 60 minutes. 
    minutes %= 60; 
  }
}

我们在refreshTime()函数中递增了我们的seconds变量。因此，每当调用此函数时，我们的变量将递增1。然后，我们对hours和minutes进行了两个条件操作。

现在，让我们绘制时钟：

function drawClock() {
  drawClockBackground(); //This draws clock background. 
  drawSecondsHand(); //This draws clock's second hand. 
  drawMinutesHand(); //This draws clock's minute hand. 
  drawHoursHand(); //This draws clock's hour hand.
}

我们将编写drawClockBackground()，drawSecondsHand()，drawMinutesHand()和drawHoursHand()函数：

function drawClockBackground() {
  //this function will draw the background of our clock. We are declaring few variables for mathematical purposes. 
  var correction = 1/300;
  var shift_unit = 1/170;
  var shift_factor = 1/30;
  var angle_initial_position = 2;
  var angle_current_position_begin = 0;
  var angle_current_position_end = 0;
  var repeat = 60;
  var lineWidth = 10;

  for (var i=0; i < repeat; i+=1) {
  //These lines are written for making our clock error free with the angle of the hands (hands' positions)
  angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
  angle_current_position_end = angle_current_position_begin + shift_unit;

  if (i % 5 === 0) 
  lineWidth = 20;
  else 
  lineWidth = 10;

  drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
  }
  drawLittleCircle(cX, cY);
}

我们在这个函数中进行了一些数学运算，并编写了drawLittleCircle(cX, cY)函数，用于在时钟中心绘制一个小圆。

该函数应该看起来类似于以下内容：

function drawLittleCircle(cX, cY) {
  drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}

编写drawSecondsHand()函数。此函数将绘制秒针，如下所示：

function drawSecondsHand() {
  /* Simple mathematics to find the co ordinate of the second hand; 
    You may know this: x = rcos(theta), y = rsin(theta). We used these here.
    We divided the values n=by 30 because after 5 seconds the second hand moves 30 degree. 
  */ 
  endX = cX + radius*Math.sin(seconds*Math.PI / 30);
  endY = cY - radius*Math.cos(seconds*Math.PI / 30);
  drawHand(cX, cY, endX, endY);
}

我们的drawMinutesHand()函数应该如下所示。此函数将绘制时钟的分针，如下所示：

function drawMinutesHand() {
  var rotationUnit = minutes + seconds / 60;
  var rotationFactor = Math.PI / 30;
  var rotation = rotationUnit*rotationFactor;
  var handLength = 0.8*radius;
  endX = cX + handLength*Math.sin(rotation);
  endY = cY - handLength*Math.cos(rotation);
  drawHand(cX, cY, endX, endY);
}

现在，让我们看看我们的drawHoursHand();函数。此函数将绘制时针：

function drawHoursHand() {
  var rotationUnit = 5 * hours + minutes / 12;
  var rotationFactor = Math.PI / 30;
  var rotation = rotationUnit*rotationFactor;
  var handLength = 0.4*radius;

  endX = cX + handLength*Math.sin(rotation);
  endY = cY - handLength*Math.cos(rotation);
  drawHand(cX, cY, endX, endY);
}

我们在前述函数中使用了drawHand();函数。让我们编写该函数，如下所示：

function drawHand(beginX, beginY, endX, endY) {
  canvasElement.beginPath();
  canvasElement.moveTo(beginX, beginY);
  canvasElement.lineTo(endX, endY);
  canvasElement.stroke();
  canvasElement.closePath();
}

现在，我们将编写我们时钟的最后一个函数，如下所示：

function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
  canvasElement.beginPath();
  canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
  canvasElement.lineWidth = lineWidth;
  canvasElement.strokeStyle = "black";
  canvasElement.stroke();
  canvasElement.closePath();
}

我们时钟的完整代码应该看起来类似于以下代码：

<html>
  <head>
    <script type="text/javascript">
      var canvas; 
      var canvasElement;

      // clock settings
      var cX = 0;

      var cY = 0;
      var radius = 150;

      // time settings
      var date;
      var hours;
      var minutes;
      var seconds;

      function init() {
        canvas = document.getElementById("myclock");
        canvasElement = canvas.getContext("2d");

        cX = canvas.width / 2;
        cY = canvas.height / 2;

        initTime();
        drawClock();
        setInterval("animateClock()", 1000);
      }

      // get your system time
      function initTime() {
        date = new Date();
        hours = date.getHours() % 12;
        minutes = date.getMinutes();
        seconds = date.getSeconds();
      }

      // animate the clock
      function animateClock() {
        clearCanvas();
        refreshTime();
        drawClock();
      }

      // clear the canvas
      function clearCanvas() {
        canvasElement.clearRect(0, 0, canvas.width, canvas.height);
      }

      // refresh time after 1 second
      function refreshTime() {
        seconds += 1;
        if (Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }
        if (Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }
      }

      // draw or redraw Clock after time refresh function is called
      function drawClock() {
        drawClockBackground();
        drawSecondsHand();
        drawMinutesHand();
        drawHoursHand();
      }
      function drawHand(beginX, beginY, endX, endY) {
        canvasElement.beginPath();
        canvasElement.moveTo(beginX, beginY);
        canvasElement.lineTo(endX, endY);
        canvasElement.stroke();
        canvasElement.closePath();
      }

      // draw Hand for seconds
      function drawSecondsHand() {
        endX = cX + radius*Math.sin(seconds*Math.PI / 30);
        endY = cY - radius*Math.cos(seconds*Math.PI / 30);
        drawHand(cX, cY, endX, endY);
      }

      // draw Hand for minutes
      function drawMinutesHand() {
        var rotationUnit = minutes + seconds / 60;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit*rotationFactor;
        var handLength = 0.8*radius;

        endX = cX + handLength*Math.sin(rotation);
        endY = cY - handLength*Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
      }

      // draw Hand for hours
      function drawHoursHand() {
        var rotationUnit = 5 * hours + minutes / 12;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit*rotationFactor;
        var handLength = 0.4*radius;

        endX = cX + handLength*Math.sin(rotation);
        endY = cY - handLength*Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
      }

      function drawClockBackground() {
        var correction = 1/300;
        var shift_unit = 1/170;
        var shift_factor = 1/30;
        var angle_initial_position = 2;
        var angle_current_position_begin = 0;
        var angle_current_position_end = 0;
        var repeat = 60;
        var lineWidth = 10;

        for (var i=0; i < repeat; i+=1) {
          angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
          angle_current_position_end = angle_current_position_begin + shift_unit;

          if (i % 5 == 0) lineWidth = 20;
          else lineWidth = 10;

          drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
        }
        drawLittleCircle(cX, cY);
      }

      function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
        canvasElement.beginPath();
        canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
        canvasElement.lineWidth = lineWidth;
        canvasElement.strokeStyle = "black";
        canvasElement.stroke();
        canvasElement.closePath();
      }
      function drawLittleCircle(cX, cY) {
        drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
      }

    </script>
  </head>
  <body onload="init()">
    <canvas id="myclock" height="500" width="500"></canvas>
  </body>
</html>

如果您能看到代码的输出如下图像，则恭喜您！您成功地使用画布创建了您的 HTML 时钟：

摘要

在本章中，我们学习了 HTML 画布的基础知识。我希望您现在可以使用 HTML 画布绘制任何东西。您可能已经玩过在线游戏；它们大多数的组件都是使用 HTML 画布绘制的。因此，如果您想开发自己的 Web 应用程序或游戏，您需要学习画布。您可以轻松编写 JavaScript 代码来绘制和动画形状。

在下一章中，我们将使用 HTML 画布开发一个名为Rat-man的游戏。在开始第八章之前，构建 Rat-man！，我希望您通过本章学到了很多关于 HTML 画布的知识。如果您学到了，让我们现在开发我们的游戏。

第八章：构建老鼠人！

在本章中，我们将构建一个名为老鼠人的游戏，实际上是著名游戏吃豆人的修改版本。我们将使用 canvas、JavaScript、CSS 和 HTML 来构建我们的游戏。

让我们开始介绍我们游戏的角色：

• 我们的游戏将有一只老鼠。玩家将扮演老鼠。

• 将有四只猫试图抓住老鼠，还有很多奶酪可以让老鼠吃。

• 游戏的主要目标是吃掉所有的奶酪，而不被怪猫抓住。

听起来很有趣，对吧？让我们开始吧...

注意

为了使我们的代码更清晰，我们将把我们的 JavaScript、CSS 和图像文件放在单独的文件夹中。我们将有三个主要文件夹，命名如下：

• css

• img

• scripts

游戏用户界面

要开始构建我们的游戏，我们需要准备我们的画布。我们的 HTML 文件应该类似于以下内容：

<html>
  <head>
  </head>
  <body>
    <canvas id="main_canvas"></canvas>
  </body>
</html>

我们的游戏用户界面将在<body></body>标签中。我们很快会在我们的画布上添加 JavaScript。

在css文件夹中，创建一个名为styles.css的 CSS 文件，其中包含以下代码，用于我们的 HTMLbody、canvas和一个播放button：

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 10px solid rgba(63, 72, 204, 0.7);
  border-radius: 20px;
  box-shadow: 0 0 500px 100px #ffffff;
}

button {
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 60px;
  opacity: 0;
  z-index: 1000;
  transition: 5s ease;
  visibility: hidden;
}

在同一个文件夹中创建另一个名为reset.css的 CSS 文件，并将以下代码添加到 CSS 文件中。这个文件将设计游戏初始屏幕的用户界面：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

保存这两个文件并在您的 HTML 文件中包含它们，代码如下在<head></head>标签中：

<link href="css/styles.css" rel="stylesheet"/>
<link href="css/reset.css" rel="stylesheet"/>

如果现在打开浏览器的 HTML 文件，您将看到以下图像：

我们将在前面的矩形中绘制我们的游戏界面。

为游戏添加功能

为了添加用户界面和游戏功能，我们将需要 JavaScript。我们将在scripts文件夹中需要以下 JavaScript 文件：

• app.main.js

• app.display_functions.js

• app.init.js

• app.key_handler.js

• app.movement_functions.js

• app.constants.js

app.main.js 文件

我们的app.main.js文件应该包含以下函数，用于处理app.key_handler.js文件和您计算机的键盘。它还将调用app.init.js文件来初始化我们的变量。

注意

在这里我们使用了app.main.js；您不需要像这样命名您的 JavaScript 文件。但是保持命名约定是一个好习惯。

以下代码是app.main.js文件的内容：

(function () {
  "use strict";
  APP.Init();
  APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
  window.addEventListener("keydown", APP.Keydown_Handler, false);
  APP.Reset = function () {
    APP.map.Init();
    APP.player.Init();
    APP.monsters.Init();
    APP.blackout.style.transition = "0s";
    APP.blackout.style.visibility = "hidden";
    setTimeout(function () {
      APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
      APP.blackout.style.opacity = 0;
      APP.blackout.style.transition = "5s ease";
    }, 100);
  };
}());

app.display_functions.js 文件

在我们的app.display_functions.js文件中，我们将编写一个函数，其中我们将包括APP.Show_world函数，该函数在app.init.js文件中使用。

该函数应包含以下代码（参考注释以了解每个步骤的作用）：

  APP.Show_World = function () {
    var i,
    dots = 0; //initialized cheese number
    dots = APP.map.Draw(); //put our cheese on the canvas
    if (!dots) {
      APP.Game_Over("YOU WIN!"); //if all cheese are ate by the rat, then the screen should display this.
    }
    */This loop is determine if the rat is caught by the cats  */
    for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
      if (APP.monsters[i].x === APP.player.x) {
        if (APP.monsters[i].y === APP.player.y) {
          APP.Game_Over("YOU LOSE!");
        }
      }
    }
    APP.monsters.Move(); //cats' movement function
    APP.player.Move();  // rat's movement function
    APP.player.Check_For_Dots(); //This function will check number of chees. 
    APP.portals.Show(); //This will display two portals by using these the rat can escape. 
    APP.player.Show(); //This will show the rat on the canvas. 
      /* this function will show the monster on the canvas */
    for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
      APP.monsters[i].Show();
    }
  };

APP.map.Draw函数将包含以下代码：

    APP.map.Draw = function () {
      var i, j, image, x, y, dot_counter = 0; //initialized variables. 
      /*this loop will create our game map/maze */
      for (i = 0; i < APP.MAP_WIDTH; i++) {
        for (j = 0; j < APP.MAP_HEIGHT; j++) {
          image = APP.images[APP.map.cells[j][i]];
          x = i * APP.CELL_WIDTH;
          y = j * APP.CELL_HEIGHT;
          APP.context.drawImage(image, x, y);
          if (APP.map.cells[j][i] === APP.DOT_CELL_DIGIT) {
            dot_counter++;
          }
        }
      }
      return dot_counter;
    };

对于猫的移动，我们将使用以下代码的APP.monsters.Move函数：

    APP.monsters.Move = function () {
      var i;
      /*This loop will define the cats' quantity */
      for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
        if (APP.monsters[i].frame === APP.monsters[i].speed) {
          if (APP.monsters[i].direction !== APP.Direction.STOP) {
            APP.monsters[i].previus_direction =
            APP.monsters[i].direction;
          }
          APP.monsters[i].Select_Direction(); //Will select the cats' direction.
          APP.monsters[i].Check_Direction(); //Will check the cats' direction.
          APP.monsters[i].Check_Wall();//Will check the surroundings of the canvas or any block. 
        }
        /* These conditions will check the boundaries of the canvas and make the cats move. */
        if (APP.monsters[i].direction !== APP.Direction.STOP) {
          if (APP.monsters[i].up) {
            APP.monsters[i].Move_Up();
          }
          if (APP.monsters[i].down) {
            APP.monsters[i].Move_Down();
          }
          if (APP.monsters[i].left) {
            APP.monsters[i].Move_Left();
          }
          if (APP.monsters[i].right) {
            APP.monsters[i].Move_Right();
          }
        }
      }
    };

当调用APP.player.Move()函数时，我们的老鼠将移动，代码如下：

    APP.player.Move = function () {
      if (APP.player.frame === APP.player.speed) {
        APP.player.Check_Direction();
        APP.player.Check_Wall(); //This will check wall
      }
      /* these conditions will check our rat's valid movements */
      if (APP.player.direction !== APP.Direction.STOP) {
        if (APP.player.up) {
          APP.player.Move_Up(); 
        }
        if (APP.player.down) {
          APP.player.Move_Down();
        }
        if (APP.player.left) {
          APP.player.Move_Left();
        }
        if (APP.player.right) {
          APP.player.Move_Right();
        }
      }
    };
    /*this function will feed our rat the chees */
    APP.player.Check_For_Dots = function () {
      if (APP.map.marks[APP.player.y][APP.player.x] === APP.DOT_MARK) {
        APP.player.bonuses++;
        APP.map.marks[APP.player.y][APP.player.x] = APP.BLANK_MARK;
        APP.map.cells[APP.player.y][APP.player.x] = APP.BLANK_CELL_DIGIT;
      }
    };

现在，我们将在画布上使我们的老鼠可见，同时通过以下代码调用函数来移动老鼠：

APP.player.Show = function () {
  //initializing our needed variables. 
  var figure_offset = 5,
  frame_number = 2 - Math.floor(this.frame / 3),
  frame_offset = 1 - this.frame / this.speed,
  image, x, y;
  /* conditions for the rat's direction for up, down, left, right*/
  if (this.up) {
    image = this.up_images[frame_number];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.down) {
    image = this.down_images[frame_number];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.right) {
    image = this.right_images[frame_number];
    x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  } else {
    image = this.left_images[frame_number];
    x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  }
  APP.context.drawImage(image, x, y);
};

要在画布上显示我们的猫，我们需要在我们的APP.Show_Monster()函数中使用以下代码：

APP.Show_Monster = function () {
  //initializing needed variables. 
  var figure_offset = 15,
  frame_offset = 1 - this.frame / this.speed,
  image, x, y;
  /* binding the cats' directions for 4 directions*/
  if (this.up) {
    image = this.up_images[0];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.down) {

    image = this.down_images[0];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.right) {

    image = this.right_images[0];
    x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  } else {

    image = this.left_images[0];
    x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  }

  APP.context.drawImage(image, x, y);
};

要显示传送门，我们需要编写另一个名为APP.portals.Show()的函数，包括以下代码：

    APP.portals.Show = function () {
      //initialized variables and incremented. 
      var offset, frame_offset, sw = +!this.raise;
      frame_offset = sw - this.frame_counter / (this.speed * APP.GAME_FPS); 
      /*controlled frame of the game */
      offset = Math.abs(this.width * frame_offset);
      APP.context.drawImage(this[0].image, this[0].x - offset, this[0].y);
      APP.context.drawImage(this[1].image, this[1].x + offset, this[1].y);
      this.frame_counter++;
      if (this.frame_counter === this.speed * APP.GAME_FPS) {
        this.frame_counter = 0;
        this.raise = !this.raise;
      }
    };

游戏结束后，用户需要看到一条消息或使屏幕模糊。为此，我们需要声明另一个名为APP.Game_Over()的函数，其中包含以下代码：

    APP.Game_Over = function (condition) {
      clearInterval(APP.timer);
      APP.blackout = document.getElementById("blackout");
      APP.blackout.textContent = condition;
      APP.blackout.style.visibility = "visible";
      APP.blackout.style.opacity = 0.7;
    };

app.init.js 文件

我们的app.init.js文件将包含一个函数。在这个函数中，我们将声明以下变量：

  APP.map = {};
  APP.player = {};
  APP.monsters = [{}, {}, {}, {}];
  APP.portals = [{}, {}];
  APP.images = [];
  APP.timer = {};
  APP.canvas = {};
  APP.context = {};
  APP.blackout = document.getElementById("blackout");

编写一个包含几个变量的函数，如下所示：

  APP.Init = function () {
    APP.map.Init();
    APP.player.Init();
    APP.portals.Init();
    APP.monsters.Init();
    APP.images.Init();
    APP.canvas.Init();
  };

现在，我们将初始化游戏地图：

APP.map.Init = function () {

  //initializing few variables ; few of them may look ugly, but don't worry they are a little bit random. 
  var i, j, map_in_strings = [
                "5000000000000250000000000002",
                "1777777777777117777777777771",
                "1750027500027117500027500271",
                "1716617166617117166617166171",
                "1740037400037437400037400371",
                "1777777777777777777777777771",
                "1750027527500000027527500271",
                "1740037117400250037117400371",
                "1777777117777117777117777771",
                "4000027140026116500317500003",
                "0000217150036436400217150000",
                "6666117116666666666117116666",
                "0000317116502665026117140000",
                "0000037436153664216437400000",
                "6666667666116666116667666666",
                "0000027526140000316527500000",
                "0000217116400000036117150000",
                "6666117116666666666117116666",
                "0000317116500000026117140000",
                "5000037436400250036437400002",
                "1777777777777117777777777771",
                "1750027500027117500027500271",
                "1740217400037437400037150371",
                "1777117777777777777777117771",
                "4027117527500000027527117503",
                "5037437117400250037117437402",
                "1777777117777117777117777771",
                "1750000340027117500340000271",
                "1740000000037437400000000371",
                "1777777777777777777777777771",
                "4000000000000000000000000003"
            ];
  APP.map.cells = [];
  for (i = 0; i < APP.MAP_HEIGHT; i++) {
    APP.map.cells[i] = [];
    for (j = 0; j < APP.MAP_WIDTH; j++) {
      APP.map.cells[i][j] = +map_in_strings[i].charAt(j);
    }
  }
  APP.map.marks = [];
  /* This loop will determine the map's size */
  for (i = 0; i < APP.MAP_HEIGHT; i++) {
    APP.map.marks[i] = [];
    for (j = 0; j < APP.MAP_WIDTH; j++) {
      if (APP.map.cells[i][j] <= APP.WALL_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.WALL_MARK;
      } else if (APP.map.cells[i][j] === APP.BLANK_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.BLANK_MARK;
      } else if (APP.map.cells[i][j] === APP.DOT_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.DOT_MARK;
      }
    }
  }
};

Rat-man 的图像！

为了构建游戏，我们将需要一些图像。我们将把所有图像放在img文件夹中。在img文件夹中，我们将创建四个文件夹，如下所示：

• 怪物

• 玩家

• portal

• 墙

我们将在img文件夹中保留两个图像，命名为dot.png和blank.png。

怪物文件夹

在monsters文件夹中，创建四个以我们猫的名字命名的文件夹。

假设我们的猫的名字如下（您可以随意命名它们）：

• blinky

• inky

• pinky

• clyde

每个猫文件夹将有四个文件夹，用于猫的定向图像。文件夹名称如下：

• up

• down

• left

• right

每个方向文件夹应包含老鼠的图像。图像名称应为0.png。

您需要保持您的图像尺寸为 50 x 50 像素。

player 文件夹

player文件夹应包含四个用于老鼠方向的文件夹。文件夹应命名如下所示：

• up

• down

• left

• right

每个文件夹应包含老鼠的定向图像。需要有两个图像，0.png和1.png。一个图像是张开嘴的老鼠，另一个是闭嘴的老鼠。图像的尺寸应为 50 x 50 像素。

传送门文件夹

portal文件夹应包含两个传送门的图像，通过这些传送门，我们的老鼠将从一端传送到另一端。图像名称应为0.png和1.png。

墙壁文件夹

walls文件夹应该有五个图像来绘制画布上的墙壁。

图像应命名为0.png，1.png，2.png，3.png和4.png。图像将是墙的角落和直线。

在构建游戏中使用的图像的分层表示如下：

为我们的猫添加图像

我们将编写四个函数，为我们的猫添加完美的图像。函数应该类似于以下函数：

  APP.monsters[0].Init = function () {
    APP.monsters[0].up_images = [];
    APP.monsters[0].right_images = [];
    APP.monsters[0].down_images = [];
    APP.monsters[0].left_images = [];
    APP.monsters[0].up_images[0] = new Image();
    APP.monsters[0].up_images[0].src = "img/monsters/blinky/up/0.png";
    APP.monsters[0].right_images[0] = new Image();
    APP.monsters[0].right_images[0].src = "img/monsters/blinky/right/0.png";
    APP.monsters[0].down_images[0] = new Image();
    APP.monsters[0].down_images[0].src = "img/monsters/blinky/down/0.png";
    APP.monsters[0].left_images[0] = new Image();
    APP.monsters[0].left_images[0].src = "img/monsters/blinky/left/0.png";
    APP.monsters[0].up = false;
    APP.monsters[0].right = true;
    APP.monsters[0].down = false;
    APP.monsters[0].left = false;
    APP.monsters[0].x = APP.INITIAL_BLINKY_X;
    APP.monsters[0].y = APP.INITIAL_BLINKY_Y;
    APP.monsters[0].frame = APP.INITIAL_BLINKY_FRAME;
    APP.monsters[0].speed = APP.BLINKY_SPEED;
  };

我们将更改APP.monsters[0].Init = function ();函数的索引编号为APP.monsters[1].Init = function ();以用于第二只猫。对于第三和第四只猫，我们将更改APP.monsters[2].Init = function ()和APP.monsters[3].Init = function ()。

我们还需要更改猫的图像位置和索引编号。

为了使用图像初始化墙壁和奶酪，我们需要编写一个函数，如下所示：

  APP.images.Init = function () {
    var i;
    for (i = 0; i <= APP.DOT_CELL_DIGIT; i++) {
      APP.images[i] = new Image();
    }
    APP.images[0].src = "img/walls/0.png";
    APP.images[1].src = "img/walls/1.png";
    APP.images[2].src = "img/walls/2.png";
    APP.images[3].src = "img/walls/3.png";
    APP.images[4].src = "img/walls/4.png";
    APP.images[5].src = "img/walls/5.png";
    APP.images[6].src = "img/blank.png";
    APP.images[7].src = "img/dot.png";
  };

绘制画布

我们将通过向我们的app.init.js文件添加以下函数来绘制我们的画布：

APP.canvas.Init = function () {
  APP.canvas = document.getElementById("main_canvas");
  APP.canvas.width = APP.MAP_WIDTH * APP.CELL_WIDTH;
  APP.canvas.height = APP.MAP_HEIGHT * APP.CELL_HEIGHT;
  APP.context = APP.canvas.getContext("2d");
  APP.context.fillStyle = APP.BG_COLOR;
  APP.context.fillRect(0, 0, APP.canvas.width, APP.canvas.height);
};

app.key_handler.js 文件

现在，在app.key_handler.js文件中，我们将编写我们的代码，以使玩家能够使用键盘移动我们的老鼠。代码应该类似于以下内容：

APP.Keydown_Handler = function (event) {
  "use strict";
  var KEYS = {
    /* We will initialize the arrow keys first. 37 = left key, 38 
      = up key, 39 = right key and 40 = down key. */
    LEFT    : 37,
    UP      : 38,
    RIGHT   : 39,
    DOWN    : 40
  }; 
  /* This switch-case will handle the key pressing and the rat's 
    movement. */
  switch (event.keyCode) {
    case KEYS.UP:
      APP.player.direction = APP.Direction.UP;
      break;
    case KEYS.RIGHT:
      APP.player.direction = APP.Direction.RIGHT;
      break;
    case KEYS.DOWN:
      APP.player.direction = APP.Direction.DOWN;
      break;
    case KEYS.LEFT:
      APP.player.direction = APP.Direction.LEFT;
      break;
  }
};

app.movement_functions.js 文件

当按下键时，我们需要查看墙壁的结束或开始位置。当我们到达边缘时，我们需要停止移动老鼠。因此，我们必须为此设置一些条件。第一个条件是检查方向。函数可以编写如下所示：

  APP.Check_Direction = function () {
    switch (this.direction) {
      case APP.Direction.UP:
        if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK){
          this.up = true;
          this.down = false;
          this.right = false;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.DOWN:
        if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
          this.up = false;
          this.down = true;
          this.right = false;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.RIGHT:
        if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
          this.up = false;
          this.down = false;
          this.right = true;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.LEFT:
        if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
          this.up = false;
          this.down = false;
          this.right = false;
          this.left = true;
          return true;
        }
        break;
    }
    return false;
  };

在检查方向时，我们还需要朝正确的方向移动。选择方向的函数可以编写如下：

APP.Select_Direction = function () {
  var possible_directions = [],
  direction_quantity = 9,
  rnd;
  switch (this.previus_direction) {
    case APP.Direction.UP:
      possible_directions[0] = APP.Direction.UP;
      possible_directions[1] = APP.Direction.UP;
      possible_directions[2] = APP.Direction.UP;
      possible_directions[3] = APP.Direction.UP;
      possible_directions[4] = APP.Direction.UP;
      possible_directions[5] = APP.Direction.UP;
      possible_directions[6] = APP.Direction.RIGHT;
      possible_directions[7] = APP.Direction.DOWN;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.RIGHT:
      possible_directions[0] = APP.Direction.RIGHT;
      possible_directions[1] = APP.Direction.RIGHT;
      possible_directions[2] = APP.Direction.RIGHT;
      possible_directions[3] = APP.Direction.RIGHT;
      possible_directions[4] = APP.Direction.RIGHT;
      possible_directions[5] = APP.Direction.RIGHT;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.DOWN;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.DOWN:
      possible_directions[0] = APP.Direction.DOWN;
      possible_directions[1] = APP.Direction.DOWN;
      possible_directions[2] = APP.Direction.DOWN;
      possible_directions[3] = APP.Direction.DOWN;
      possible_directions[4] = APP.Direction.DOWN;
      possible_directions[5] = APP.Direction.DOWN;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.RIGHT;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.LEFT:
      possible_directions[0] = APP.Direction.LEFT;
      possible_directions[1] = APP.Direction.LEFT;
      possible_directions[2] = APP.Direction.LEFT;
      possible_directions[3] = APP.Direction.LEFT;
      possible_directions[4] = APP.Direction.LEFT;
      possible_directions[5] = APP.Direction.LEFT;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.RIGHT;
      possible_directions[8] = APP.Direction.DOWN;
      break;
  }
  rnd = Math.floor(Math.random() * direction_quantity);
  this.direction = possible_directions[rnd];
};

现在，我们必须检查墙壁。我们可以通过向函数添加一些条件来实现这一点，如下所示：

  APP.Check_Wall = function () {
    if (this.up) {
      if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK) {
        this.up = true;
        this.down = false;
        this.right = false;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.right) {
      if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
        this.up = false;
        this.down = false;
        this.right = true;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.down) {
      if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
        this.up = false;
        this.down = true;
        this.right = false;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.left) {
      if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
        this.up = false;
        this.down = false;
        this.right = false;
        this.left = true;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }
  };

箭头键的移动应该有明确定义。我们应该为箭头键创建以下功能：

APP.Move_Up = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.y--;
  } else {
    this.frame--;
  }
  if (this.y < 0) {
    this.y = APP.MAP_HEIGHT - 1;
  }
};
APP.Move_Right = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.x++;
  } else {
    this.frame--;
  }
  if (this.x >= APP.MAP_WIDTH) {
    this.x = 0;
  }
};
APP.Move_Down = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.y++;
  } else {
    this.frame--;
  }
  if (this.y >= APP.MAP_HEIGHT) {
    this.y = 0;
  }
};
APP.Move_Left = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.x--;
  } else {
    this.frame--;
  }
  if (this.x < 0) {
    this.x = APP.MAP_WIDTH - 1;
  }
};

app.constants.js 文件

为了保持我们游戏的画布清洁并保持良好状态，我们需要用一些固定的变量初始化一些变量（例如，地图的高度，单元格的高度，地图的宽度，单元格的宽度等）。我们可以通过在app.constants.js文件中编写以下代码来实现这一点。检查带有代码的注释，以清楚地了解代码的工作原理：

var APP = {};
(function () {
  "use strict";
  //used for map's size and each cell's size
  APP.MAP_WIDTH = 28;
  APP.MAP_HEIGHT = 31;
  APP.CELL_WIDTH = 20;
  APP.CELL_HEIGHT = 20;
  APP.BG_COLOR = "#000000";
  APP.GAME_FPS = 40;
  APP.PLAYER_SPEED = 8;
  APP.INITIAL_PLAYER_FRAME = 8;
  APP.INITIAL_PLAYER_X = 14;
  APP.INITIAL_PLAYER_Y = 23;
  APP.WALL_CELL_DIGIT = 5;
  APP.BLANK_CELL_DIGIT = 6;
  APP.DOT_CELL_DIGIT = 7;
  APP.WALL_MARK = "W";
  APP.BLANK_MARK = "B";
  APP.DOT_MARK = "D";
  APP.PORTAL_BLINKING_SPEED = 2;
  APP.PORTAL_WIDTH = 20;
  APP.FIRST_PORTAL_X = 0;
  APP.FIRST_PORTAL_Y = 265;
  APP.SECOND_PORTAL_X = 510;
  APP.SECOND_PORTAL_Y = 265;
  APP.MONSTERS_QUANTITY = 4;
  APP.INKY_SPEED = 7;
  //for the cat's speed and position. 
  APP.INITIAL_INKY_X = 12;
  APP.INITIAL_INKY_Y = 14;
  APP.INITIAL_INKY_FRAME = 7;
  APP.PINKY_SPEED = 7;
  APP.INITIAL_PINKY_X = 13;
  APP.INITIAL_PINKY_Y = 14;
  APP.INITIAL_PINKY_FRAME = 4;
  APP.BLINKY_SPEED = 7;
  APP.INITIAL_BLINKY_X = 14;
  APP.INITIAL_BLINKY_Y = 11;
  APP.INITIAL_BLINKY_FRAME = 4;
  APP.CLYDE_SPEED = 7;
  APP.INITIAL_CLYDE_X = 15;
  APP.INITIAL_CLYDE_Y = 14;
  APP.INITIAL_CLYDE_FRAME = 7;
  APP.Direction = {
    UP      : "UP",
    RIGHT   : "RIGHT",
    DOWN    : "DOWN",
    LEFT    : "LEFT",
    STOP    : "STOP"
  };
})();

玩游戏

如果您正确集成了代码，并且您的 HTML 文件现在看起来类似于以下内容，您现在可以运行 HTML 文件：

<html>
  <head>
    <link href="css/reset.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <canvas id="main_canvas"></canvas>
    <button id="blackout" onclick="APP.Reset()"></button>
    <script src="img/app.constants.js"></script>
    <script src="img/app.init.js"></script>
    <script src="img/app.display_functions.js"></script>
    <script src="img/app.movement_functions.js"></script>
    <script src="img/app.key_handler.js"></script>
    <script src="img/app.main.js"></script>
  </body>
</html>

在浏览器上运行 HTML 文件后，您将能够看到以下屏幕：

恭喜！您已成功构建了老鼠侠！

要玩游戏，请单击画布上的任何位置，并使用箭头键移动您的老鼠。

如果您失去所有生命，您将看到以下屏幕：

如果您赢了，您将看到以下屏幕：

总结

我们已经建立了老鼠人！我希望你现在正在玩你建立的游戏。如果你编码了几个小时后无法玩游戏，不要担心。保持冷静，再试一次。整个源代码和所需的图像都包含在这本书中。你可以下载并运行它。然而，在这之前，我建议你至少尝试两次。让我们继续阅读第九章，“使用 OOP 整理您的代码”，以更好地了解如何创建文件或文件夹并访问它们。

第九章：使用 OOP 整理您的代码

在本章中，我们将学习面向对象编程（OOP）并讨论著名游戏Hangman的代码。

“OOP 是一种使用抽象来创建基于现实世界的模型的编程范式。OOP 使用了几种来自先前建立的范式的技术，包括模块化、多态和封装。”或者“OOP 语言通常通过使用类来标识，以创建具有相同属性和方法的多个对象。”

您可能已经假定 JavaScript 是一种面向对象的编程语言。是的，你是完全正确的。让我们看看它为什么是一种 OOP 语言。如果计算机编程语言具有以下几个特点，我们称之为面向对象：

• 继承

• 多态

• 封装

• 抽象

在继续之前，让我们讨论对象。我们以以下方式在 JavaScript 中创建对象：

var person = new Object();
person.name = "Harry Potter";
person.age = 22;
person.job = "Magician";

我们为一个人创建了一个对象。我们添加了一些人的属性。

如果我们想要访问对象的任何属性，我们需要调用该属性。

假设您想要弹出前面person对象的name属性。您可以使用以下方法来实现：

person.callName = function(){
  alert(this.name);
};

我们可以将前面的代码写成以下形式：

var person = {
  name: "Harry Potter",
  age: 22,
  job: "Magician",
  callName: function(){
  alert(this.name);
  }
};

JavaScript 中的继承

继承意味着从父母或祖先那里获得某些东西（如特征、品质等）。在编程语言中，当一个类或对象基于另一个类或对象以保持父类或对象的相同行为时，这被称为继承。

我们还可以说这是获得其他东西的属性或行为的概念。

假设，X 从 Y 那里继承了一些东西；这就像 X 是 Y 的一种类型。

JavaScript 占据了继承的能力。让我们来看一个例子。鸟从动物那里继承，因为鸟是动物的一种。因此，鸟可以做与动物相同的事情。

JavaScript 中的这种关系有点复杂，需要一种语法。我们需要使用一个名为prototype的特殊对象，它将属性分配给一种类型。我们需要记住只有函数有原型。我们的Animal函数应该类似于以下内容：

function Animal(){
//We can code here. 
}; 

要添加函数的一些属性，我们需要添加一个原型，如下所示：

Animal.prototype.eat = function(){
  alert("Animal can eat.");
};

让我们为我们的Bird函数创建原型。我们的函数和原型应该类似于以下内容：

function Bird(){
};
Bird.prototype = new Animal();
Bird.prototype.fly = function(){
  alert("Birds can fly.");
};
Bird.prototype.sing = function(){
  alert("Bird can sing.");
};

原型和函数的结果是，您创建的任何Bird都将具有Animal和Bird的属性。但是，如果您创建Animal，那么它只会具有Animal的属性。Bird继承了Animal的属性。

因此，我们可以说 JavaScript 具有继承属性。

JavaScript 中的封装

在面向对象编程中，封装是一个非常重要的概念，它允许对象将公共和私有类的成员组合在一个名称下。我们使用封装来保护我们的类免受意外或故意的愚蠢。封装意味着将某物封装在内，就好像某物在胶囊中一样。

现在，我们将看看 JavaScript 是否支持封装。如果是这样，我们可以说 JavaScript 是一种 OOP 语言。让我们看看以下例子：

var person = {
  "name" : "Harry Potter",
  "age" : 22,
};
alert(person.name);
person.name = "John";
alert(person.name);

如果我们在控制台上运行这个。第一个警报框将打印以下图像：

我们将变量name更改为John。因此，第二个警报框将类似于以下图像：

如果我们意外地将一个数字赋给name变量会发生什么？

将数字赋给name变量是完全可以接受的。就 JavaScript 而言，变量可以接受任何类型的数据作为其值。但是，我们不希望在名字的位置上出现数字。我们该怎么办？我们可以使用 JavaScript 的封装属性，如下所示：

var person = function () {
  var Name = "Harry Potter";
  var reg = new RegExp(/\d+/);
  return { 
    "setName" : function (newValue) {
      if( reg.test(newValue) ) {
        alert("Invalid Name");
      }
      else {
        Name = newValue;
      }
    },
    "getName" : function () {
      return Name; 
    }
  }; 
}(); 

alert(person.getName());   // Harry potter
person.setName( "John" );
alert(person.getName());  // John
person.setName( 42 ); // Invalid Name; the name is not changed.
person.Name = 42;     // Doesn't affect the private Name variable.
alert(person.getName());  // John is printed again.

现在，如果我们在控制台上运行上面的代码，第一个输出将显示一个弹出窗口，其中包含Harry Potter，因为我们只调用了getName()函数。getName()函数有一个初始值，即Harry Potter：

第二个输出将如下，因为我们将person的Name属性更改为John，然后再次调用getName()函数：

第三个输出将如下所示，因为我们试图将一个数字推送到一个字符串变量中。一个名字不能是整数，因此，在if语句下出现了Invalid Name：

第四个输出将如下所示，因为数字没有添加到Name属性。因此，我们将得到我们推送到Name属性的最后数据：

我们现在可以确认 JavaScript 支持封装。

JavaScript 还支持多态和抽象。如果您想了解它们，可以参考以下链接：

developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

让我们做一些有趣的事情。你可能听说过一个叫做“绞刑架”的游戏。我们将讨论该游戏中的面向对象编程。首先，让我们向您介绍这个游戏。

玩家需要猜一个单词。如果他能猜对单词，他就安全了；否则，他将被绞死。看一下以下图像，以清楚地了解游戏：

解剖绞刑架

绞刑架游戏有两个文件夹和一个 HTML 文件。这两个文件夹的名称分别为css和js。index.html HTML 文件应包含以下代码：

<html lang="en" ng-app="hangman"> 
  <head>
    <title>Hangman</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="img/angular.min.js"></script>
  </head>
  <body ng-controller="StartHangman">
    <p>Hangman</p>
    <svg width="400" height="400">
      <rect ng-show="failedGuess.length >= 1" x="0" y="0" width="40" height="400"></rect>
      <rect ng-show="failedGuess.length >= 2" x="40" y="20" width="200" height="40"></rect>
      <rect ng-show="failedGuess.length >= 3" x="173" y="50" width="4" height="100"></rect>
      <circle ng-show="failedGuess.length >= 3" cx="175" cy="120" r="40"></circle>
      <line ng-show="failedGuess.length >= 4" x1="175" y1="150" x2="175" y2="185" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 4" x1="175" y1="180" x2="100" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 5" x1="175" y1="180" x2="250" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 6" x1="175" y1="180" x2="175" y2="265" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 7" x1="175" y1="260" x2="120" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 8" x1="175" y1="260" x2="230" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
    </svg>

    <div ng-show="stage == 'initial'">
      <h2>Please enter your secret words:</h2>
      <input type="text" ng-model="secretWords" autofocus ng-keyup="$event.keyCode == 13 ? startGame() : null">
      <button ng-click="startGame()">Enter</button>
    </div>

    <div ng-show="stage == 'play'">
      <h1>{{ answer }}</h1>
      <h2>Failed guess ({{ failedGuess.length }}) = {{ failedGuess}}</h2>

      <input type="text" ng-model="charGuess" id="char-guess" ng-keyup="$event.keyCode == 13 ? guess(charGuess) : null" placeholder="Guess a letter">
      <button ng-click="guess(charGuess)">Enter</button>
    </div>

    <div ng-show="stage == 'won'">
      <h1>You Win! :)</h1>
      <h2>That's right, the secret words is {{ secretWords }}</h2>
      <p>Press F5 to replay</p>
    </div>

    <div ng-show="stage == 'lost'">
      <h1>You Lose! :(</h1>
      <h2>The secret word is {{ secretWords }}</h2>
      <p>Press F5 to replay</p>
    </div>

    <script src="img/hangman.js"></script>
  </body>
</html>

css文件夹应该有一个styles.css文件。styles.css文件应包含以下代码：

body {
  font-family: monospace;
  text-align: center;
  font-size: 16px;
  line-height: 1.40;
}

input[type="text"] {
  padding: 5px;
  font-family: monospace;
  height: 30px;
  font-size: 1.8em;
  background-color: #fff;
  border: 2px solid #000;
  vertical-align: bottom;
}

svg {
  margin: 0 0 30px;
}

button {
  cursor: pointer;
  margin: 0;
  height: 44px;
  background-color: #fff;
  border: 2px solid #000;
}

js文件夹中应该有两个 JavaScript 文件，angular.min.js和hangman.js。

angular.min.js文件是一个框架。您可以从angularjs.org/下载它，或者它可以与本书的代码捆绑包一起提供。

hangman.js文件应该包含以下代码：

var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman);
  function StartHangman($scope, $document) {
    $scope.stage = "initial";
    $scope.secretWords = "";
    $scope.answer = "";
    $scope.failedGuess = [];
    var hasWon = function() {
      var foundDash = $scope.answer.search(/-/);
      return (foundDash == -1);
    }
    var hasLost = function() {
      return ($scope.failedGuess.length >= 8);
    }
    $scope.startGame = function() {
      $scope.secretWords = $scope.secretWords.toLowerCase();
      for(i in $scope.secretWords) {
        $scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
      }
      $scope.stage = "play"
    }
    $scope.guess = function(ch) {
      ch = ch.toLowerCase();
      $scope.charGuess = "";
      if(ch.length != 1) {
        if(ch.length > 1) {
          alert("Please only enter one character at a time");
        }
      return ;
    }
    /* If ch is already in the failed guess list */
    for(i in $scope.failedGuess) {
      if(ch == $scope.failedGuess[i]) return ;
    }
    /* Check if it's part of the answer */
    var found = false;
    $scope.answer = $scope.answer.split(""); /* convert to array of char */
    for(i in $scope.secretWords) {
      if($scope.secretWords[i] === ch) {
        found = true;
        $scope.answer[i] = ch;
      }
    }
    $scope.answer = $scope.answer.join(""); /* convert back to string */
    if(!found) {
      $scope.failedGuess.push(ch);
    }
    if(hasWon()) {
      $scope.stage = "won";
    }
    if(hasLost()) {
      $scope.stage = "lost";
    }
  }
}

让我们讨论一下代码。

我们使用var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman);来导入我们的angular.min.js文件，并开始控制游戏其余的代码。

我们编写了一个StartHangman($scope, $document) {}函数，在这里我们将编写我们的代码。我们从我们的angular.min.js文件中传递了两个变量，$scope和$document。

我们初始化了一些变量，如下所示：

$scope.stage = "initial";
$scope.secretWords = "";
$scope.answer = "";
$scope.failedGuess = [];

我们为赢得和输掉游戏编写了两个函数，如下所示：

var hasWon = function() {
  var foundDash = $scope.answer.search(/-/);
  return (foundDash == -1);
}
var hasLost = function() {
  return ($scope.failedGuess.length >= 8);
}

我们在这里固定了我们的猜测次数。然后，我们编写了一个函数来开始我们的游戏。我们创建了一个对象，并使用了 JavaScript 的继承属性，如下所示：

$scope.startGame = function() {
  $scope.secretWords = $scope.secretWords.toLowerCase();
  for(i in $scope.secretWords) {
    $scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
  }
  $scope.stage = "play"
}

我们从玩家那里得到一个输入，以便将其作为我们的秘密单词存储。

游戏的提示页面将类似于以下图像：

然后，我们介绍了我们最重要的函数$scope.guess = function(ch){}。我们向函数传递一个字符，并检查它是否与玩家输入的任何字母匹配秘密单词。

总结

在本章中，您学习了面向对象编程语言的特性。我们还看到了面向对象编程特性在著名游戏“绞刑架”中的用途！希望您喜欢创建和玩“绞刑架”。在本书的下一章和最后一章中，我们将看到 JavaScript 的可能性。

第十章：可能性

在整本书中，我们已经探讨了许多与 JavaScript 相关的主题。您学会了如何使用控制台玩耍；用 JavaScript 解决问题，HTML 标签，CSS 属性和控制语句；使用 jQuery；用画布绘图；构建项目；等等。然而，您是否曾想过通过阅读本书和学习 JavaScript 获得的机会？

好吧，在这一章中，我们将看到为什么学习 JavaScript 很重要，以及 JavaScript 的领域是什么。

JavaScript 作为您的第一种编程语言

JavaScript 是最容易开始学习的语言。它不需要任何软件来运行。现代浏览器和记事本就足够开始使用 JavaScript 进行编码。JavaScript 拥有一些最好的在线学习材料。

诸如 Codecademy（www.codecademy.com）、Code School（www.codeschool.com）、CodePen（codepen.io）、JS Bin（jsbin.com）和 JSFiddle（jsfiddle.net）等网站将帮助您在短时间内学习 JavaScript。

JavaScript 随处可见

JavaScript 是几乎在每个浏览器中运行的唯一语言；甚至在智能手机浏览器中也是如此。由于 Web 无处不在，JavaScript 也无处不在。

作为 JavaScript 开发人员的职业

如果您喜欢编程并希望通过编程来建立您的职业，JavaScript 是最好的语言之一。我可以说，选择 JavaScript 比 JavaScript 更好的选择可能会更困难。如果您看一些 Web 开发的趋势，您会发现实时网站就像桌面应用程序。网站上的大量用户交互，例如拖放，音频和视频交互以及数据可视化，现在都很常见。所有这些大部分都是使用 JavaScript 完成的。没有 JavaScript，我们将无法获得很酷的 Web 应用程序（Google 地图，Google 地球，Gmail，Facebook 等）。JavaScript 使一切成为可能。在构建 Web 应用程序时，没有其他语言像 JavaScript 那样强大。现在的世界是基于 Web 的，Web 是由 JavaScript 驱动的，以使其美观，动态和安全。因此，选择 JavaScript 与 HTML 和 CSS 作为您未来的职业将是您生活中最好的决定之一。开发人员被称为前端或全栈开发人员。

所有的琐事都可以由 JavaScript 完成

使用 JavaScript，您可以做很多令人惊叹的事情。从机器人技术到 Web 应用程序开发，JavaScript 都是一个强大的工具。让我们看看人们如何在他们的技术生活中使用 JavaScript：

• 机器人技术

• 3D 游戏

• 为智能手机制作应用程序

• 运行 Web 服务器

• 运行 Ruby 和 Python

• 编写独立于操作系统的桌面应用程序

• Web 抓取和截图

• Web 分析

• 响应式和交互式内容

• 动画

• 创建 Cookie

机器人技术

在机器人技术中，您需要用逻辑控制您的机器人。在现实世界中，逻辑由微控制器处理。您可能听说过 Arduino，这是一种处理微电子的开源硬件。基本上，Arduino 使用 C 代码控制微控制器。然而，如果您了解 JavaScript，您也可以为其编写代码；以处理微处理器/微控制器并制作您的第一个机器人。您可以从nodebots.io/获取帮助，以了解 JavaScript 如何用于构建机器人。以下是 Arduino UNO 板的图像：

Arduino UNO

3D 游戏

在本书中，我们已经构建和开发了 2D 游戏。然而，请相信我，您也可以用 JavaScript 构建令人惊叹的 3D 游戏。您甚至可以通过您喜爱的游戏手柄来玩。要使用游戏手柄玩游戏，您需要使用游戏手柄 API（wiki.mozilla.org/GamepadAPI）。

您可以在以下网址玩一些用 JavaScript 构建的在线 3D 游戏：www.babylonjs.com/。

为智能手机制作应用程序

你是否曾想过为你的智能手机构建应用程序？你可以使用 JavaScript 为你的智能手机构建应用程序。智能手机有不同类型的平台（例如 Android、iOS、Tizen、Firefox OS 等）。每个平台都有自己的 API，并使用不同的编程语言。因此，我们需要考虑我们的代码库可能在任何设备上运行。为了确保这一点，我们可以使用 JavaScript 引擎，因为它可以在任何平台上运行。你可以使用Cordova (cordova.apache.org/)来了解如何使用 JavaScript 构建应用程序。Cordova 是一个基于每个设备 API 的 JavaScript 框架。你可以使用PhoneGap (phonegap.com/)或Meteor (www.meteor.com/)来使用 JavaScript 构建智能手机应用程序。

运行 Web 服务器

你可能听说过 Web 服务器。服务器用于广播网站。你可以使用 JavaScript 来管理你的服务器。JavaScript 可以处理所有操作并确认你的域的安全性。你可以使用Node.js (nodejs.org/)来运行最简单的 Web 服务器。要了解更多关于 JavaScript Web 服务器的信息，你可以查看www.firebase.com/。你可能需要基本的 JavaScript 知识来执行 Web 服务器的任务。使用其他框架构建 Web 服务器可能成本高昂；然而，使用 JavaScript，你可以免费完成。你甚至不需要购买任何软件。

运行 Ruby 和 Python

JavaScript 还可以用于在浏览器上运行Python或Ruby，只需添加少量外部代码。你可以通过添加库在浏览器上包含这些编程语言的运行环境。要了解更多关于在浏览器上包含库和运行 Ruby 和 Python 代码的信息，你可以查看www.firebase.com。

编写独立于操作系统的桌面应用程序

由于 JavaScript 是平台无关的，你可以使用 JavaScript 构建 Web 应用程序，并在任何平台上运行它们。任何平台上的用户都可以在他们的浏览器上运行基于 JavaScript 的应用程序。你甚至可以使用 JavaScript 制作桌面应用程序。查看appjs.com/和electron.atom.io/来制作基于 JavaScript 的第一个桌面应用程序。

网页抓取和截图

从网站中提取信息的技术称为网页抓取。要了解更多关于网页抓取的信息，你可以访问www.webscraper.io/。JavaScript 可以帮助你进行网页抓取。你可以查看nrabinowitz.github.io/pjscrape/了解更多关于使用 JavaScript 进行网页抓取的信息。

你可以查看html2canvas.hertzen.com/了解更多关于网站截图的信息。截图可以使用 JavaScript 完成。

Web 分析

有时候，你可能需要知道谁在访问你的网站，你的网站经常被哪个 IP 地址访问，访问者属于哪个国家，以及关于跟踪访问者的更多信息。所有这些信息都可以使用 JavaScript 获得。

响应式和交互式内容

使用 JavaScript，你可以在你的网站和 Web 应用程序上制作响应式和交互式内容。你可以查看beta.rallyinteractive.com/，www.unfold.no/，www.2advanced.com/和www.newquest.fr/，看看他们如何使用 JavaScript 制作响应式和交互式的网站。

动画

JavaScript 的精彩之处在于你可以用它做动画。有很多很酷的 JavaScript 动画库。查看greensock.com/gsap了解更多关于GreenSock，一个著名的 JavaScript 动画库。还有另一个著名的 JavaScript 动画库叫做Velocity.js (julian.com/research/velocity/)。

创建 cookie

你可能听说过网页 cookie。假设你在一个网站上输入你的用户名和密码，然后弹出一个警告，说明你可以保存用户名和信息。你点击记住密码，然后信息就会存储在你的计算机上作为 cookie。你的网页 cookie 是由 JavaScript 创建的。网页 cookie 对于网站加载更快很重要。你可以从www.allaboutcookies.org/cookies/了解更多关于网页 cookie 的信息。

精彩的 JavaScript 示例

有一些网站可以展示用户最新的 JavaScript 作品。其中之一是creativejs.com/。你也会在那里找到一些教程。CreativeJS.com是寻找令人兴奋的 JavaScript 演示、项目、游戏以及其他任何他们认为很棒的地方。他们有一个团队来为您带来最好的东西。以下截图是CreativeJS.com的主页：

以下是一些 JavaScript 项目的示例及其链接：

• 精彩的计算器：以下计算器是用 JavaScript、HTML 和 CSS 构建的。发光按钮的动画是由 JavaScript 完成的：

这个计算器可以在codepen.io/giana/pen/GJMBEv找到。

• 拖放：你可以拖动一个块并用鼠标放到另一个块上。拖动是使用 JavaScript 完成的。以下是这个项目的截图：

这个项目可以在greensock.com/draggable找到。

• 随机迷宫生成器：你建立了一个名为 Rat-man 的游戏，你需要为猫和老鼠绘制地图。路径就像一个迷宫。以下链接将为您生成一个随机迷宫。我希望你注意一下他们在那里使用的 JavaScript：

这个游戏可以在codepen.io/GabbeV/pen/viAec找到。

• 粒子连接：你可以在codepen.io/garyconstable/pen/fEoLz玩连接粒子。这些粒子的运动由 JavaScript 控制。以下是这个项目的截图：

• 可撕裂的布料：如果你想模拟一块布料，你可以去链接codepen.io/dissimulate/pen/KrAwx并在这里玩弄一块布料。布料的运动由 JavaScript 控制。以下是这个项目的截图：

• 霓虹灯：你可以在你的网站上使用以下东西作为按钮。我希望你学习一下它的代码是如何工作的。以下是这个项目的截图：

这个项目可以在codepen.io/simeydotme/details/Gzfuh找到。

• 智能手机子菜单：如果您想用 JavaScript 制作智能手机应用程序，那么您肯定需要一个应用程序的子菜单。您可以访问codepen.io/berdejitendra/pen/AgEzJ并学习如何为您的移动应用程序制作一个很酷的子菜单。以下是该项目的屏幕截图：

• 3D 太阳系：如果您热爱天文学和行星的运动，链接codepen.io/juliangarnier/pen/idhuG将为您带来一个令人惊叹的可视化效果，展示了邻近行星及其信息。所有动态元素都是使用 JavaScript 创建的。以下是该项目的屏幕截图：

总结

我们到了书的结尾。这本书并非关于 JavaScript 的全部内容。这是 JavaScript 的开始。我希望您喜欢这本书，并练习了书中讨论的所有练习和项目。我希望您会访问本章中的网站，并观察每个项目的代码，以便更多地了解 JavaScript。我希望有一天您能够借助 JavaScript 创建自己的动态网站，用 JavaScript 构建智能手机应用程序，甚至可能用 JavaScript 构建机器人。你永远不知道！

我希望您已经学到了很多关于 JavaScript 的令人惊叹的东西；现在是您尝试编写代码和玩转 JavaScript 的时候了。如果出了什么问题，不要担心。请记住：

	"第一次做对并不重要，最后一次做对才是至关重要的。"
	--Andrew Hunt and David Thomas