JavaScript 游戏制作:简单入门指南

发表时间: 2021-02-05 16:32

通过使用一个简单的游戏来练习一些基本的 JavaScript 概念,迈出创建交互性动态 Web 内容的第一步。

可以肯定地说,没有 JavaScript,大多数现代 Web 都将不存在。它是三种标准 Web 技术(以及 HTML 和 CSS )之一,它使任何人都可以创建我们在万维网体验中所期待的交互式、动态内容。从React这样的框架到D3这样的数据可视化库,很难想象没有它的 Web。

现在有很多东西要学习,开始学习这种流行语言的好方法是编写一个简单的应用程序以熟悉某些概念。 最近,一些人写了关于如何通过编写简单的猜谜游戏来学习自己喜欢的语言的文章,因此这是一个很好的起点!

现在开始吧

JavaScript 有许多种风格,但我将从最基本的开始,通常称为 “普通 JavaScript”。 JavaScript 主要是一种客户端脚本语言,因此它可以在任何标准浏览器中运行,而无需安装任何程序。你只需要一个代码编辑器(Brackets就是一个不错的选择)和一个 Web 浏览器。

HTML 用户界面

JavaScript 在 Web 浏览器中运行,并与其他标准 Web 技术 HTML 和 CSS 交互。要创建此游戏,你首先需要使用 HTML(超文本标记语言)来创建供玩家使用的简单界面。如果你不清楚,HTML 是一种标记语言,用于为 Web 内容提供结构。

首先,先创建一个 HTML 文件。该文件应具有 .html扩展名,以使浏览器知道它是 HTML 文档。你可以将文件命名为guessingGame.html

在此文件中使用一些基本的 HTML 标签来显示游戏的标题、玩法说明,供玩家用来输入和提交其猜测的交互式元素以及用于向玩家提供反馈的占位符:

                  

Guess the Number!

I am thinking of a number between 1 and 100. Can you guess what it is?

My Guess

和 元素使浏览器知道在页面上显示什么类型的文本。标签对 表示标签之间的文本(Guess the Number!)是标题。后面的一组 标签表示带有说明的短文本是一个段落。此代码块末尾的空 标签用作占位符,用于根据用户的输入提供一些反馈。

标签

在网页中包含 JavaScript 的方法有很多种,但是对于像这样的简短脚本,可以使用一组 标签并将 JavaScript 直接写在 HTML 文件中。 这些 标签应位于 HTML 文件末尾附近的

标签之前。

现在,你可以开始在这两个脚本标签之间编写 JavaScript。 最终文件如下所示:

    

Guess the Number!

I am thinking of a number between 1 and 100. Can you guess what it is?