网页版可扩展适合移动端访问的MUD客户端
- 1.0版本已经完成!基本功能已经全部实现接下来就是配合MUDLIB进行定制化扩展
- （项目地址 https://github.com/syumi-1/EasyWebMud ）
- 自适应移动端设备,对中文MUD游戏更加友好,进行完配置后可完全脱离键盘进行游戏.
- 纯手打Javascript + html,没有css,没有nodejs,没有前端框架,感受原始气息.
- 零服务器需要,完全在本地进行!
- 面向对象开发,代码的可扩展性应该不错.
- UI进步空间非常大!(高情商)
-
用 最新版Chrome内核 的浏览器,或者微信支付宝扫码!?（否则无法正常使用）打开 https://syumi-1.github.io/EasyWebMud/
-
在弹出的登录界面输入要连接的MUD游戏websocket地址,点击提交
-
登录成功后进入主界面,主界面分为如下几个区域
- 左侧和下方倒数第二行为按钮区,可以用来绑定按钮
- 最上方靠右侧的为聊天显示区(假定),他的下方最大的窗口为主显示区,在对象创建完后默认是不显示内容的,需要在游戏连接前绑定触发器进行显示(可根据个人需要自行添加窗口以及对应绑定信息:如地图之类的)
- 最下方为输入区,使用ENTER键也可以直接提交,移动端输入法也可以进行提交,不需要来回点击按钮,↑箭头表示的是将选中的内容放置进文本框中,输入区语法见下方
- 例如:
w;nw;w;nw;look
- 可以将语法拆分,按照w nw w nw look 分次发送,事件间隔100ms
- 例如:
#3w;#3nw;#2w
- 提交的结果就变成了 w w w nw nw nw w w
- #号必须在每个结构最前方后面紧跟数字,请注意
- 例如:
@target=张三
- 执行结束后生成一个变量为张三,大小写不限
- 变量名和等号不可以省略
- 等号后面置空的话就会清除该变量 引用的例子:
look {{target}}
- 执行后的结果就是look 张三
在设置脚本的时候添加了一个内置变量{{cmd}},可以指代被点击的内容本身
在普通语法前面加入~~ 就判断为JS语法,JS中加入变量thisMud以及thisCmd,thisMud表示当前实例,thisCmd表示调用元素本身(点击元素以外为null)
- 例如:
~~thisMud.ApiScript(thisCmd);//发送当前指令
这里只列出常用的,部分没在这里注明的还是需要查看源代码
- 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);//示例代码
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);
}- 作用同直接发送 action最前面两个字符为~~的话作为JS脚本进行解析,cmdStr为调用来源,进行入参后在脚本解析的时候可以使用cmd变量,默认值为null
- varName 变量名 varValue 值
- 返回值为promise 需要用的时候记得await
- 可以把 zhou botong 分给NPC,把 rice 分给 FOOD 让其有共同指令集
- 触发器\定时器\控件\点击事件等增删改 恢复初始设置等
- 从localstorage放入settings变量并初始化触发器\定时器\控件
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对应行为,全不为空则添加行为 |