diff --git a/README.md b/README.md index 112e916..fd463c5 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,66 @@ -# mota-vite 使用说明 +# 魔塔 人类:开天辟地 -图文说明:https://h5mota.com/bbs/thread/?tid=940&p=1 +游戏地址:https://h5mota.com/tower/?name=HumanBreak -## 功能介绍 +## 项目结构 -1. 极细粒度的热重载,使用它开发,你可以省去 95% 以上的刷新操作 -2. 支持 vue ts antdv 等插件,使开发更为便捷迅速,写插件和 ui 更加方便 -3. 基于 pnpm,可以自己安装想要的依赖包 +`public`: mota-js 样板所在目录,该塔对样板的目录进行了一定的魔改,其中插件全部移动到`project/plugin`文件夹中,并使用了`es模块化` -### 热重载 +`src`: 与 ui、特效等与游戏进程无关的插件所在目录。其中包含以下内容: -1. 当 libs/ main.js index.html 中的任意一个文件被更改后,会自动刷新塔的页面 -2. 修改楼层文件后自动在塔的页面上显示出来,不需要刷新 -3. 修改脚本编辑或插件编写后也能自动更新更改的插件或脚本,但不保证不会出问题(一般都不会有问题的 -4. 修改图块属性、怪物属性等后会自动更新 -5. 当全塔属性被修改时,会自动刷新塔的页面 -6. 样板的 styles.css 被修改后也可以直接显示,不需要刷新 -7. 当 ts 文件和 vue 文件修改时,会自动更新对应的组件 -8. 其余内容修改后不会自动更新也不会刷新页面 +1. `plugin`: 所有相关插件的源码,其中包含多个文件夹,内有不同的内容 +2. `ui`: 所有 ui 的 vue 源码 +3. `panel`: ui 中用到的部分面板 +4. `components`: 所有 ui 的通用组件 +5. `data`: 数据文件,包含百科全书的内容、成就的内容等 +6. `fonts`: ui 中用到的字体文件 +7. `types`: mota-js 的类型声明文件 +8. `source`: mota-js 的图块等资源的类型声明文件,会通过热重载更新 +9. `initPlugin.ts`: 所有插件的入口文件 +10. `main.ts`: 主入口,会将`App.vue`与`App2.vue`渲染到 html 上 -## 使用说明 +`script`: 在构建、发布等操作时会用到的 node 脚本 -### 进入开发环境 +`vite.config.ts`: `vite`的配置文件 -1. 首先需要安装 node.js,图文教程见 https://h5mota.com/bbs/thread/?tid=921&p=1 -2. 右键 windows 图标,选择打开终端,运行 `npm i -g pnpm`,等待安装完成 -3. 用 vscode 打开项目文件夹,修改 mota.config.ts 中的塔 name,并保证与全塔属性中的相同,否则上传到网站之后可能无法进行游玩 -4. 使用 ctrl+j 快捷键打开 vscode 底栏,并选择终端选项(Terminal),运行 pnpm i,安装依赖包,依赖包较多,安装时长可能较长 -5. 在系统资源管理器中(不是 vscode!)打开 public 文件夹,按下 shift + 鼠标右键(win11 只按右键即可),选择在终端打开或在 powershell 打开 -6. 在刚刚打开的终端中执行`node server.cjs`,运行样板的启动服务,可以提供样板相关的热重载服务 -7. 回到 vscode,在终端中执行`pnpm dev`,运行 vite 启动服务,可以提供 ts 的按需编译等功能 -8. 打开 vite 提供的网址,即可进入游戏界面,打开样板启动服务提供的编辑器网址,即可进入编辑器界面 -9. 想要退出时,可以按下 ctrl+c 终止服务或直接退出 vscode 或终端 +`mota.config.ts`: 魔塔配置文件 -### 构建 & 发布 +## 开发说明 -1. 开发完成后,你可以执行`pnpm build`进行构建,结果会生成在 dist 文件夹下,对其进行压缩成 zip 后即可发布和更新 -2. 构建完成后,你还可以执行`pnpm preview`来预览网站上的效果或使用`pnpm preview-node`在热重载条件下预览网站上的效果 +1. 首先请确保你安装了`node.js`与`pnpm` +2. 将项目拉到你的设备上 +3. 运行`pnpm i`以安装所有依赖包 +4. 在`public`目录运行`node server.cjs`以启动样板热重载服务 +5. 在根目录运行`pnpm run dev`以启动`vite`服务 +6. 打开`vite`提供的网址即可进入游戏 +7. 打开样板热重载服务提供的网址即可进入编辑器 -### 开发 +## 构建说明 -1. 对于 vue,它会在 body 的一个子标签(id="root")上构建 vue app -2. 对于 ts,所有在 src 文件夹内的 ts 都会被编译,但会根据引入情况,只将使用到的文件构建 -3. 建议安装 vscode 插件 volar,它提供了 vue 文件的语法高亮与 ts 支持 +1. 运行`pnpm run build`以打包以`/games/HumanBreak/`为目录的构建包 +2. 运行`pnpm run build-local`以打包以`/`为目录的本地构建包 +3. 运行`pnpm run build-gh`以打包以`/HumanBreak/`为目录的可部署到`github pages`的构建包 -### 插件 +### 构建流程 -1. 该样板提供了 ts 插件的解决方案,你可以在 plugin 文件夹下创建你的插件(样板内置了一个弹出显示文字的插件) -2. 插件创建后,必须有一个默认导出,且必须是一个函数,表示进行插件的初始初始化,同时必须有返回值,返回所有在外部会用到的变量与函数,其中所有的变量与函数都会转发到`core.plugin`上,所有不以下划线开头的函数都会转发到`core`上,例如样板内置的弹出显示的插件可以直接在外部使用`core.addPop()`来调用,注意所有的转发会在游戏加载完成后进行! -3. 插件中与样板相关的初始化应当全部在默认导出的函数中进行,不可在函数外部进行,否则会报错! -4. 插件编写完成后,需要在`src/types/plugin.d.ts`中进行类型标注,把所有在外部可见的函数与变量标注在接口`PluginDeclaration`中 -5. 之后在`src/initPlugin.ts`中按照示例初始化插件即可 -6. 之后便可以在各个地方使用插件中的函数了! +1. 运行`vue-tsc`检查类型是否正确 +2. 运行`vite`的构建工具,打包除`public`外的内容 +3. 运行`script/build.ts`,首先去除未使用的文件(即全塔属性中未注册的文件),然后压缩字体,再用`rollup`及`babel`压缩插件与`main.js` -## 注意事项 +## 热重载说明 -1. 所有 ts 与 vue 文件中的代码在录像验证时都不会运行,请勿在里面进行直接的与分数相关的操作 -2. 如果其中有与其相关的操作,应当为用户操作后的回调函数,并在样板的插件中注册相应录像操作,才能使录像验证正常运行 +支持一下内容的热重载: -## 一键更新 +1. `vite`热重载 +2. 楼层热重载 +3. 插件热重载 +4. 脚本编辑热重载 +5. 道具、怪物、图块属性热重载 +6. styles.css -1. 在 script/update.ts 中修改你的用户 id 和密码 -2. 执行 pnpm update 即可自动发自助更新,之后通知管理员审核即可 +以下内容修改后会自动刷新页面 + +1. `vite`提供的自动刷新页面 +2. 全塔属性 +3. libs/下的文件 +4. main.js diff --git a/public/project/items.js b/public/project/items.js index bff15bb..02df829 100644 --- a/public/project/items.js +++ b/public/project/items.js @@ -1161,7 +1161,7 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a = "name": "bgm查看器", "canUseItemEffect": "true", "text": "可以查看游戏内你已经听过的bgm,歌曲名格式:歌手——歌曲名。未完工。", - "useItemEffect": "core.plugin.bgmOpened.value = true;" + "useItemEffect": "core.tip('warn', '当前道具还未制作完成!');\n// core.plugin.bgmOpened.value = true;" }, "I559": { "cls": "constants", diff --git a/src/data/bgm.json b/src/data/bgm.json index 1e7e3e4..1f56937 100644 --- a/src/data/bgm.json +++ b/src/data/bgm.json @@ -1,6 +1,6 @@ { "title.mp3": { - "area": "标题", + "area": "未完工", "name": "川井宪次 - 破裂足音", "from": "《永远的七日之都》", "img": "/project/images/bg.jpg", diff --git a/update_record.md b/update_record.md new file mode 100644 index 0000000..8f0f139 --- /dev/null +++ b/update_record.md @@ -0,0 +1,15 @@ +## 更新记录 + +此处会列出每次更新的更新记录。 + +## 1.0.0-alpha + +1. 新增第二章的前半部分,包含两个区域 - 智慧小径和冰封高原 +2. 重构大部分 ui,包括 怪物手册、楼层传送器、装备栏、道具栏、状态栏、开始界面、商店 等 +3. 新增成就系统 +4. 新增怪物标记功能 +5. 新增定点查看功能与快捷查看怪物属性功能 +6. 新增百科全书 +7. 新增自动切换技能 +8. 新增全屏游戏 +9. 修复录像