介绍
在此博客系列中，我将带您完成如何制作HTML 5画布游戏。
大纲：
- 首先，我们将创建游戏的核心逻辑 - 后端。
- 实现了游戏的后端逻辑后，我们将使用HTML5 Canvas API创建游戏的前端。
这种方法的好处是，我们通过将其全部存储在状态机器对象中来减少使用核心游戏逻辑的错误范围。
前端将只是与状态机对象交互的接口。
这种方法的另一个好处是，您可以灵活地选择游戏的前端。也许您找到了另一种使用HTML5帆布API的方法？也许您想使用内置的HTML元素。您甚至可以尝试创建
带有WebGL或游戏引擎的前端。本教程之后，您将可以自由探索这些各种选择！
现在，让我们开始！
先决条件
您需要以下内容才能完成本教程：
- 文本编辑器（如果您不确定，我建议使用Visual Studio代码） - 这是您正在编写代码的地方。
- 一个具有访问开发人员工具的Web浏览器 - 我们将在整个教程中与浏览器控制台进行交互，尤其是在开始时，因为游戏在这一点左右不会有前端。我将在本教程中使用Google Chrome。
- HTTP服务器（我建议使用Live Server Visual Studio Code extension）。这是必需的，因为我们将使用ECMAScript Modules没有任何JavaScript构建工具。尝试在没有HTTP服务器的情况下尝试此操作将导致CORS错误。
注意：我强烈建议使用带有实时重加载支持的HTTP服务器。知道您不必刷新您的浏览器，并且可能会清除您所做的最新更改！
，您会放心。设置
目录结构
首先，创建一个目录，您将在其中编写游戏代码。我建议将其命名为“四英寸”。
然后，在“四英寸”项目中创建此目录结构：
/src
/constants
HTML文件
现在让我们设置HTML文件。
在项目目录的根中创建一个名为index.html的文件。
将其添加到文件的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Four in a row</title>
</head>
<body>
<script src="src/index.js" type="module"></script>
</body>
</html>
上面的代码将我们的页面标题设置为“连续四个”，与页面的
匹配
宽度和比例到设备的屏幕宽度和比例，并参考JavaScript文件，称为index.js。这将是我们游戏代码的切入点。
入口点
现在让我们创建文件src/index.js。
现在，我们将进行快速检查以查看脚本文件是否已正确引用。
将以下内容添加到src/index.js：
console.log("Hello world");
现在在项目目录的根部启动HTTP服务器。
访问服务器的地址时，您会看到一个空页面。这是正常的，我们没有添加任何控件或样式。
但是，如果您在Web浏览器中打开开发人员工具并选择控制台，则应查看以下消息：
Hello world
如果您看不到上面的消息，则可能无法正确遵循说明。请返回以前的
步骤并确保您已经完成了它们。
否则，恭喜！您已经完成了本教程的第一部分！ ð¥³
在下一篇文章中，我们将通过创建四英寸的状态计算机开始创建后端！