ArenaPro Creator

Appearance

使用JavaScript编写游戏服务端代码 ​

警告

当你在VSCode编辑器中工作时，我们强烈推荐主要使用TypeScript进行代码编写。尽管我们提供了使用JavaScript的选项，但这是为了照顾编程初学者，旨在通过降低语言的学习难度，并利用更强大的编辑器功能来促进编程技能的提升。

⚠️ 请注意，JavaScript并不是我们插件主要推荐的语言，选择它主要是为了减少学习成本。

如果你需要配置代码检查，请参考：JS相关配置指南。

在本项目中，App.js文件是服务端代码的默认入口，其功能类似于神岛项目中的index.js。

架构 ​

项目中的server文件夹和client文件夹分别代表着神岛项目中的服务端和客户端。

脚本放在在src文件夹下，其目录结构如下：

功能需求 ​

  1. 当玩家加入地图后，系统需在控制台输出包含玩家名称的欢迎信息：Hello World！{玩家名称}。

  2. 同时，系统应向该玩家展示一个独特的对话框，内容同样为：Hello World！{玩家名称}。

  3. 并且将对话框封装成函数，放置b.js文件中，并导入到App.js中使用。

功能效果 ​

功能效果展示

步骤详解 ​

第一步：监听玩家加入游戏事件 ​

监听玩家加入事件界面

第二步：在控制台打印欢迎信息 ​

控制台打印信息界面

第三步：向玩家弹出欢迎对话框 ​

弹出对话框界面

第四步：新建b.js文件并封装 ​

在服务端（server）下的src文件夹中新建一个b.js文件，用于封装对话框的逻辑。

我们需要导出这个函数，以便在App.js中调用。

注意：在ArenaPro中，我们统一使用ESM模块语法，服务端和客户端都可以使用。

b.js

App.js

完整代码实现 ​

javascript
// -----------------App.js-----------------

// 导入dialog模块，用于在玩家加入时显示欢迎对话框
import { dialog } from './b'

// 当玩家加入游戏时触发
world.onPlayerJoin(({ entity }) => {
  // 打印欢迎信息到控制台
  console.log(`Hello World！${entity.player.name}`);

  // 调用dialog函数显示欢迎对话框
  dialog(entity);
});

// -----------------b.js-----------------

/**
 * 显示欢迎对话框给指定的玩家实体
 * @param entity 游戏实体，包含玩家信息和方法
 */
export function dialog(entity) {
    // 创建并显示一个文本类型的对话框
    entity.player.dialog({
        type: GameDialogType.TEXT,
        title: '欢迎新玩家',
        content: `Hello World！${entity.player.name}`,
        titleBackgroundColor: new GameRGBAColor(0.93, 0.95, 0.54, 1.00),
        contentBackgroundColor: new GameRGBAColor(0.54, 0.68, 0.95, 1.00),
    });
}