目前你已经学会了一些 JavaScript 的理论,以及你能用它做些什么。我们现在要透过一个完整的实际范例给你一个 JavaScript 基本功能的速成班。你将能一步一步地做出一个简单的"猜数字"游戏
先备知识:
还有知道最基础的 JavaScript 程式该怎么写 .
并不会要求你马上就能仔细地了解所有程式码 — 目前我们只是想介绍一些概观,并向你介绍一些关于 JavaScript(以及其他程式语言)如何运作的知识。在接下来的章节你将会更仔细地了解这些功能!
写程式中最困难的事情之一,不是您需要学习的语法,而是如何应用它来解决现实世界中的问题。 您需要开始像个程序员一样思考 — 这通常与检视程式目标的说明有关,并确定实现这些功能所需的程式码,以及如何使它们协同工作。
这需要辛勤工作,程式语法经验和练习 — 以及一点创造力。 你写了越多程式码,你就会越熟练。 我们不能保证你会在 5 分钟内开发出“程序员的大脑”,但我们会给你很多机会在整个课程中练习"像程序员一样思考"。
考虑到这一点,让我们看一下我们将在本文中构建的范例,并审视将其分解为具体任务的大致流程。
在本文中,我们将向您展示如何构建您可以在下面看到的简单游戏:
好好玩一下游戏再继续吧 —— 在继续前先与这个游戏熟悉起来。
让我们假设你的老板给了你以下关于创建这个游戏的简介:
当看到上面的介绍后,我们可以做的第一件事就是开始拆解,尽可能的像个程序员,将它拆解为简单可执行的任务:
提供玩家猜数字的方向(太大还是太小)。
当玩家送出第一个猜测后,将猜测记录下来,让玩家可以看到他们之前的猜测。
使玩家不能再输入更多猜测(避免把游戏玩坏)。
当游戏重新开始,确保游戏逻辑和画面(UI,使用这界面)全面重设,然后回到第一步。
现在,让我们继续向前,一路上我们检视如何将这些步骤转化为程式码、建构出上面的范例与探索 JavaScript 的功能。
在课程开始前,我们希望你可以复制一份number-guessing-game-start.html到自己的电脑中(see it live here)。用浏览器与文字编辑器将档案打开时,你会看到简单的标题、说明段落还有输入猜测的表单,然而表单目前还不会做任何事情。