开源的新webmud通用框架 不需要修改LIB 全面支持触摸屏 更新至正式版

弄了一周多 终于搞出来..这10多年没碰过MUD了 突然心血来潮 这年头JS那么厉害 不用JS做客户端可惜了 总之哪里看不明白 翻翻源代码 里面肯定有实例 我基本上把能用到的功能都调用了一次 有GH的帮忙点下小星星 谢谢了

EasyWebMud

网页版可扩展适合移动端访问的MUD客户端

  • 1.0版本已经完成!基本功能已经全部实现接下来就是配合MUDLIB进行定制化扩展

  • （项目地址 https://github.com/syumi-1/EasyWebMud ）

  • Alt

    介绍

  • 自适应移动端设备,对中文MUD游戏更加友好,进行完配置后可完全脱离键盘进行游戏.

  • 纯手打Javascript + html,没有css,没有nodejs,没有前端框架,感受原始气息.

  • 零服务器需要,完全在本地进行!

  • 面向对象开发,代码的可扩展性应该不错.

  • UI进步空间非常大!(高情商)

  • Alt

  • Alt

    用法

  • 用 最新版Chrome内核 的浏览器,或者微信支付宝扫码!?（否则无法正常使用）打开 https://syumi-1.github.io/EasyWebMud/

  • 在弹出的登录界面输入要连接的MUD游戏websocket地址,点击提交

  • 登录成功后进入主界面,主界面分为如下几个区域

    • 左侧和下方倒数第二行为按钮区,可以用来绑定按钮
    • 最上方靠右侧的为聊天显示区(假定),他的下方最大的窗口为主显示区,在对象创建完后默认是不显示内容的,需要在游戏连接前绑定触发器进行显示(可根据个人需要自行添加窗口以及对应绑定信息:如地图之类的)

    • 最下方为输入区,使用ENTER键也可以直接提交,移动端输入法也可以进行提交,不需要来回点击按钮,↑箭头表示的是将选中的内容放置进文本框中,输入区语法见下方

      操作语法

      1. 批量执行

  • 例如:

    w;nw;w;nw;look

  • 可以将语法拆分,按照w nw w nw look 分次发送,事件间隔100ms

    2. 循环

  • 例如:

    3w;#3nw;#2w

  • 提交的结果就变成了 w w w nw nw nw w w

  • 号必须在每个结构最前方后面紧跟数字,请注意

    3. 设置变量

  • 例如:

    @target=张三

  • 执行结束后生成一个变量为张三,大小写不限

  • 变量名和等号不可以省略

  • 等号后面置空的话就会清除该变量 引用的例子:

    look {{target}}

  • 执行后的结果就是look 张三

    4. 主屏幕元素点击事件

    在设置脚本的时候添加了一个内置变量{{cmd}},可以指代被点击的内容本身

    5. JS语法

    在普通语法前面加入~~ 就判断为JS语法,JS中加入变量thisMud以及thisCmd,thisMud表示当前实例,thisCmd表示调用元素本身(点击元素以外为null)

  • 例如:

    ~~thisMud.ApiScript(thisCmd);//发送当前指令

    JSAPI

    这里只列出常用的,部分没在这里注明的还是需要查看源代码

ApiSaveSetting() 保存配置到localStorage

ApiLoadSetting() 读取配置到settings

ApiExportSetting() 导出文件配置

ApiExportSetting() 导入文件配置

ApiMudDialog(dialogItem) 创建对话框

  • dialogItem为对话框内容,需要自行创建,这个方法只是提供了一个遮罩层和统一样式 
    //示例代码
let dialog = document.createElement('div');
dialog.innerHTML = `<div>请输入 websocket 服务器地址，如：ws://mud.ren:8888</div><form onsubmit="return false;">
    <input type="text" id="mudaddress" placeholder="ws://mud.ren:8888" value="wss://mud.ren:8888" autocomplete="off">
    <input type="submit" id="mudsubmit">
    </form>`;
dialog.querySelector('#mudsubmit').onclick = () => {
console.log(dialog.querySelector('#mudaddress').value);
dialog.close();
}
this.ApiMudDialog(dialog);

ApiMudMoveable(windowItem) 设置windowItem为可拖动窗口

//示例代码
if (self.document.querySelector('#hpDiv') == null) {
    let hpDiv = self.document.createElement('div');
    hpDiv.id = 'hpDiv'
    hpDiv.className = 'container mud'
    hpDiv.style.opacity = 0.8
    hpDiv.style.position = 'fixed'
    hpDiv.style.backgroundColor = '#000'
    hpDiv.style.top = '10vh'
    hpDiv.style.left = '10vw'
    hpDiv.style.fontSize ='0.5vw'
    thisMud.ApiMudMoveable(hpDiv);
    self.document.body.appendChild(hpDiv);
}

ApiScript(action, cmdStr = null) 发送指令

  • 作用同直接发送 action最前面两个字符为~~的话作为JS脚本进行解析,cmdStr为调用来源,进行入参后在脚本解析的时候可以使用cmd变量,默认值为null

ApiConnect(url) 连接到url

ApiMudVar(varName, varValue) 设置变量

  • varName 变量名 varValue 值

ApiSleep(millisecond) 等待

  • 返回值为promise 需要用的时候记得await

ApiSetTrigger(actionName, flag = false) 设置触发器开关

async ApiSetTimer(timerName, flag = false, delay = 1000) 设置定时器开关

ApiActiveControl(actionName) 激活actionName控件的效果

ApiDlgConnect() 弹出登录对话框

ApiDlgElementGroup(cmdStr) 弹出将cmdStr对分组的增删管理

  • 可以把 zhou botong 分给NPC,把 rice 分给 FOOD 让其有共同指令集

ApiDlgControlCenter() 管理中心的对话框

  • 触发器\定时器\控件\点击事件等增删改 恢复初始设置等

ApiDlgTriggerActive() 触发器开关对话框

ApiDlgTimerActive() 定时器开关对话框

ApiDlgElementActive(cmdStr) cmdStr的项目点击弹出效果

async ApiMudInit() 初始化

  • 从localstorage放入settings变量并初始化触发器\定时器\控件

以下代码html中都有示例

ApiSetRule(info = { type: null, element: null, group: null, actionName: null, action: null }) 触发器\定时器\控件\点击事件等增删改

info.type 描述 参数 说明
praviteRule 点击元素私有行为 info.element info.action info.actionName 当info.actionName为空删除所有该元素行为,当info.action为空删除info.actionName对应行为,全不为空则添加行为
publicRule 点击元素公共行为 info.action info.actionName 当info.action为空删除info.actionName对应行为,全不为空则添加行为
groupRule 点击元素组行为 info.group info.action info.actionName 当info.action为空删除info.actionName对应行为,info.actionName为空删除info.group行为,全不为空则添加行为
setGroup 设置元素到组 info.group info.element info.group为空删除所有info.element行为,全不为空则添加行为
triggerRule 触发器行为 info.action info.actionName 当info.action为空删除info.actionName对应行为,全不为空则添加行为
timerRule 定时器行为 info.action info.actionName 当info.action为空删除info.actionName对应行为,全不为空则添加行为
controlRule 控件行为 info.group info.action info.actionName 当info.action为空删除info.actionName对应行为,全不为空则添加行为

OnCloseEventHandler(pMud, url) WS连接中断处理

OnAddControlEventHandler(pMud, actionName) 添加控件结束UI绘制

OnDelControlEventHandler(pMud, actionName) 删除控件结束UI绘制

OnInitEndEventHandler(pMud) 初始化结束

OnRenderEventHandler(pMud, msg = { original: null, element: null, isShow: true }) 渲染WS返回的消息内容 utf8tohtml

OnMudShowEventHandler(pMud, msg = { original: wsMessage, element: null, isShow: true }) 将渲染的结果绘制到屏幕上

京ICP备13031296号-4