mirror of
https://github.com/motajs/template.git
synced 2026-10-30 21:30:17 +08:00
docs(10-09): 引导式重写 src-tour、code-basics
- src-tour 以「该改哪个文件」引导,保留该不该改表、constant.ts,不含已弃用项 - code-basics 保持三段式与引导口吻,泛型比作类型的函数,保留 D-23 唯一外链
This commit is contained in:
parent
5ed2df4d29
commit
ea8e6f20c8
@ -1,9 +1,11 @@
|
||||
# 代码基础
|
||||
|
||||
即使你只懂一点代码,也能读懂并编写本引擎的大部分内容。本篇用尽量简短的方式,补齐写中级教程所需的最小语法与类型知识。如果你已有 JavaScript / TypeScript 基础,可以快速跳过对应小节。
|
||||
你不需要成为程序员,也能读懂并改写本引擎的大部分内容:真正会用到的语法并不多。本篇用尽量简短的方式,补齐写中级教程所需的最小语法与类型知识——即使你只懂一点代码,也能跟着走完。已有 JavaScript / TypeScript 基础的话,可以快速跳过对应小节。
|
||||
|
||||
## 一、简明语法
|
||||
|
||||
先认识四种最常见的写法:变量、函数、分支与循环、对象与数组。会用它们,就能表达大多数「让游戏做点什么」的需求。
|
||||
|
||||
### 变量
|
||||
|
||||
```ts
|
||||
@ -56,7 +58,7 @@ hero.atk = hero.atk + 5;
|
||||
|
||||
## 二、模块与引入
|
||||
|
||||
一个文件就是一个模块。用 `export` 把内容暴露出去,用 `import` 从别的模块引入。在本引擎里,文件顶部的 `import` 必须紧挨在一起,中间不夹注释或空行。
|
||||
当代码变多,就要拆成多个文件。一个文件就是一个模块:用 `export` 把内容暴露出去,用 `import` 从别的模块引入。在本引擎里,文件顶部的 `import` 必须紧挨在一起,中间不夹注释或空行。
|
||||
|
||||
```ts
|
||||
// math.ts
|
||||
@ -68,7 +70,7 @@ export const PI = 3.14;
|
||||
```
|
||||
|
||||
```ts
|
||||
// main.ts
|
||||
// app.ts
|
||||
import { add, PI } from './math';
|
||||
|
||||
add(1, PI);
|
||||
@ -84,7 +86,7 @@ math.add(1, 2);
|
||||
|
||||
## 三、类型入门
|
||||
|
||||
TypeScript 在 JavaScript 之上增加了类型,用来描述「这份数据长什么样」。类型会在编写与编译阶段被检查,帮助你在运行之前就发现错误。
|
||||
TypeScript 在 JavaScript 之上增加了类型,用来描述「这份数据长什么样」。类型会在编写与编译阶段被检查,帮你在运行之前就发现错误。
|
||||
|
||||
### 基础类型
|
||||
|
||||
@ -109,7 +111,7 @@ const hero: Hero = { hp: 100, atk: 10 };
|
||||
|
||||
### 泛型:类型的「函数」
|
||||
|
||||
普通函数接收**值**、返回**值**;泛型则接收**类型**、返回**类型**,可以把它理解成「类型的函数」。尖括号里的 `T` 是一个类型参数,调用时才确定具体是什么类型。
|
||||
如果觉得「类型」本身有点抽象,可以这样理解泛型:普通函数接收**值**、返回**值**;泛型则接收**类型**、返回**类型**,相当于一个「类型的函数」。尖括号里的 `T` 是一个类型参数,调用时才确定具体是什么类型。
|
||||
|
||||
```ts
|
||||
// T 是类型参数,取什么类型由调用时传入的值决定
|
||||
|
||||
@ -1,31 +1,35 @@
|
||||
# src 导览
|
||||
|
||||
`src` 是游戏的入口代码,也是中级教程涉及最多的地方。本篇带你认识它的主要目录,并说明哪些地方通常需要改、哪些通常不用动。两端的分工见 [数据端与渲染端](./data-vs-render.md)。
|
||||
想在游戏里加点自己的东西,第一件事往往是:我该改哪个文件?游戏的入口代码都在 `src` 下,而中级教程绝大多数时候只会碰到其中几个目录。本篇带你走一遍 `src`——先弄清每个目录在做什么,最后用一张表回答「它到底该不该改」。
|
||||
|
||||
如果还不清楚数据端与渲染端的分工,先看一眼[数据端与渲染端](./data-vs-render.md)。
|
||||
|
||||
## src/data:数据端
|
||||
|
||||
数据端代码。游戏的逻辑与结果都在这里定义,是本教程后续的重点。常见子目录:
|
||||
凡是「游戏世界里发生了什么」——勇士剩多少血、怪物怎么被打、地图如何读取——都由 `src/data` 里的代码决定。它是本教程后续的重点,常见子目录:
|
||||
|
||||
- `src/data/enemy/`:怪物相关逻辑,如特殊属性(`special.ts`)、光环(`aura.ts`)、伤害计算(`calculator.ts`)等;
|
||||
- `src/data/event/`:地图事件的内建函数;
|
||||
- `src/data/hero/`:勇士移动、通行性等实现;
|
||||
- `src/data/hook/`:数据端内置钩子的实现与注册(见 [钩子](./hooks.md));
|
||||
- `src/data/hook/`:数据端内置钩子的实现与注册(见[钩子](./hooks.md));
|
||||
- `src/data/loader/`、`src/data/plugin/`、`src/data/replay/`:加载、数据端插件、录像指令等。
|
||||
|
||||
数据端的入口是 `entry.ts`,它负责装配并创建数据端主对象 `state`;`initialize.ts` 中的 `MainDataPlugin` 则承担主要的初始化工作。
|
||||
数据端的入口是 `entry.ts`,它负责装配并创建数据端主对象 `state`;`initialize.ts` 中的 `MainDataPlugin` 则承担主要的初始化工作。你通常不需要改这两个文件,但值得知道「一切是从这里搭起来的」。
|
||||
|
||||
## src/client:渲染端
|
||||
|
||||
渲染端代码,负责画面与交互。其构成与数据端一一对应:
|
||||
凡是「玩家看到什么、点了什么」——画面、动画、界面——都由 `src/client` 负责。它的构成与数据端一一对应:
|
||||
|
||||
- `src/client/entry.ts`:渲染端入口,创建渲染端主对象;
|
||||
- `src/client/initialize.ts`:渲染端主插件;
|
||||
- `src/client/plugin/`:渲染端插件;
|
||||
- `src/client/ui/`:界面相关代码。
|
||||
|
||||
两侧如何分工、各自负责什么,见[数据端与渲染端](./data-vs-render.md)。
|
||||
|
||||
## src/content:内容层
|
||||
|
||||
游戏内容数据,与代码逻辑分开存放,大多以 `.jsonc` 形式存在:
|
||||
游戏内容与代码逻辑分开存放,大多以 `.jsonc` 形式存在。想调数值、换贴图、改地图,就来这里找:
|
||||
|
||||
- `core.jsonc`:核心配置,如勇士初始属性与初始位置;
|
||||
- `enemy.jsonc`、`item.jsonc`、`tile.jsonc`:怪物、道具、图块定义;
|
||||
@ -34,10 +38,12 @@
|
||||
|
||||
## src/constant.ts:常量
|
||||
|
||||
游戏的底层核心常量,例如数据端核心配置 `CORE_URL`、勇士默认朝向组 `HERO_FACE`、渲染画布 `RENDER_CANVAS`、渲染宽高 `RENDER_WIDTH` 与 `RENDER_HEIGHT` 等。文件内已注明「不懂的话千万不要动」,一般不需要修改。
|
||||
游戏的底层核心常量都集中在这个文件,例如数据端核心配置 `CORE_URL`、勇士默认朝向组 `HERO_FACE`、渲染画布 `RENDER_CANVAS`、渲染宽高 `RENDER_WIDTH` 与 `RENDER_HEIGHT` 等。文件里已注明「不懂的话千万不要动」,一般不需要修改。
|
||||
|
||||
## 其余文件(通常不用改)
|
||||
|
||||
下面这些文件各有职责,但绝大多数需求都碰不到它们,知道它们在哪、干什么就够了:
|
||||
|
||||
- `src/data.ts`:数据端入口,仅在录像验证时运行;
|
||||
- `src/bootstrap.ts`:启动入口,创建渲染端主对象并打开加载界面;
|
||||
- `src/package.json`:入口包的依赖声明;
|
||||
@ -45,6 +51,8 @@
|
||||
|
||||
## 该不该改
|
||||
|
||||
把上面几节收成一张表,动手前对照一下:
|
||||
|
||||
| 路径 | 用途 | 是否通常需要改动 |
|
||||
| --- | --- | --- |
|
||||
| `src/data/` | 数据端逻辑与结果 | 是,本教程重点 |
|
||||
@ -56,4 +64,4 @@
|
||||
| `src/package.json` | 入口包依赖声明 | 否,一般不动 |
|
||||
| `src/styles.less` | 全局样式 | 否,一般不动 |
|
||||
|
||||
想先补齐读写这些文件所需的语法与类型知识,见 [代码基础](./code-basics.md)。
|
||||
想先补齐读写这些文件所需的语法与类型知识,见[代码基础](./code-basics.md)。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user