介绍
HTML5 游戏已经成为了近些年来最受欢迎的游戏平台之一。与传统的游戏开发方式不同，基于 HTML5 的 H5 游戏有很多优点。例如，HTML5 的页面结构和样式处理，使得开发者可以更快速地开发和维护游戏。同时，HTML5 的跨平台特性，使得游戏可以被玩家在移动端和桌面端等多种设备上畅玩。而 Express.js, 作为一个流行的后端 Web 框架，实现了很多高级功能，如中间件和路由控制。因此，我们可以使用它来开发和部署 H5 游戏。
前置技能
在学习如何使用 Express.js 开发 H5 游戏之前，需要掌握以下技能：
- HTML, CSS 和 JavaScript 的基础知识
- Node.js 和 npm 的基础知识
- Express.js 和 MongoDB 的基础知识
构建 H5 游戏的流程
步骤 1：创建基本的文件结构
在开始开发 H5 游戏前，需要先创建一个基本的文件结构。我们可以手动创建项目目录，也可以使用 Express.js 的生成器来自动生成项目目录结构。下面是手动创建项目目录的方式：
-- -------------------- ---- ------- ------- --- ------------ --- ------ --- ------- - --- ---- - --- ---- - --- --- --- ------- --- ------ --- -------
在这个目录结构中，app.js 是服务器的入口文件，public 文件夹中包含游戏的静态文件，routes 文件夹存放后端路由，views 文件夹存放前端页面，models 文件夹存放数据库模型（如果需要的话）。
步骤 2：设置 Express.js 服务器
在 app.js 文件中，需要先实例化 Express.js 服务器，然后将它挂载到端口上。在这个过程中，还可以设置一些中间件来处理一些请求和响应。例如：静态文件目录 public 和模板引擎 ejs 等。
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('./public'));
app.listen(3000, () => {
console.log('Server is running on port 3000!');
});步骤 3：设置路由和 API
在 routes 文件夹中，需要创建游戏的路由和 API。路由管理 HTTP 请求和响应，而 API 用于与数据库交互。在这篇文章中，我们只演示使用路由的方式，演示如何展示游戏的页面以及如何记录玩家分数。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
--------------- ----- ---- -- -
------------------- - ------ --- ----- ---
---
--------------------- ----- ---- -- -
----- - ------ -------- - - ---------
----------
-------- -----
------ ------
--------- --------
---
---
-------------- - -------在这个路由文件中，我们需要渲染一个 index 页面给客户端，然后响应 score API 让前端发送玩家分数。
步骤 4：创建游戏页面和前端逻辑
在 views 文件夹中，需要创建基础的游戏页面。并在其中创建 HTML, CSS 和 JavaScript 相关的页面元素和交互逻辑。在这个演示中，我们使用 Phaser.js 游戏框架来构建 H5 游戏。
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ----------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- ----------------------
-------
------
------- ----- -------
---- --------------------------
----- ----------------
------ ----------- ----------- -----------------------
------ ------------- ---------------- -------------
------- -----------------------------
-------
------- -----------------------------------------------------------------------------
------- ---------------------------
-------
-------在这个页面中，我们包含了 Phaser.js 游戏框架和 game.js 游戏逻辑脚本。也包含了表单元素，它用于提交玩家在游戏中得到的分数到后端服务器。
步骤 5：连接数据库
在 H5 游戏中，我们可以使用 MongoDB 数据库来存储玩家的分数记录。在 models 文件夹中，我们可以创建一个 User 模型，并使用它完成玩家记录的存储和查询。
const mongoose = require('mongoose');
const User = mongoose.model('User', {
username: String,
score: Number,
});
module.exports = User;步骤 6：将分数记录存储到数据库中
在 /score API 中，当玩家得到分数时，我们需要将分数记录到数据库中。具体实现中，我们可以使用 mongoose 来完成这项任务。
-- -------------------- ---- -------
--------------------- ----- ---- -- -
----- - ------ -------- - - ---------
----- ---- - --- ------ --------- ----- ---
--------------- ----- -- -
-- ----- -
-------------------------
----------
-------- ------
-------- ------- -- ---- --- -------
---
- ---- -
----------
-------- -----
------ -----------
--------- --------------
---
-
---
---步骤 7：将分数记录从数据库中查询出来
在 routes 文件夹中，我们还需要一个用于获取所有玩家分数记录的 API。具体实现如下：
-- -------------------- ---- -------
--------------------- ----- ---- -- -
------------- ----- ------ -- -
-- ----- -
-------------------------
----------
-------- ------
-------- ------- -- --- --- --------
---
- ---- -
----------------
-
---
---步骤 8：获取分数数据并在游戏中显示
在 game.js 文件中，我们可以使用 AJAX 获取服务器的分数数据，并在游戏中的适当位置进行显示。
-- -------------------- ---- -------
-------- --------------- -
----------------
-------------- -- ----------------
------------ -- -
----- ---- - --------------------------------------
-------------- - ---
-------------------- -- -
----- -- - -----------------------------
------------ - ------------------- ----------------
---------------------
---
--
------------ -- -
---------------------------
---
-总结
本篇文章演示了如何使用 Express.js 和 MongoDB 来构建 H5 游戏。学习完本篇文章以后，你应该能够快速创建和部署基于 HTML5 的游戏，同时记录玩家的得分。如果你想要进一步学习如何开发更加复杂和高质量的游戏，应该继续深入学习游戏引擎和游戏设计相关的技术。
示例代码
本篇文章所使用的示例代码可以在以下 GitHub 仓库中找到：
https://github.com/menziess/h5-game-express
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649abf5748841e98947b256a