搭建

首先选择一种已有服务器搭建好，用HTML5和APICloud（或者其他的可以打包H5app的框架）做客户端，Websocket（telnet/http/socket）与服务器通信，Sqlite3做数据库。

客户端编写有三种方案。

用多个HTML页面
这种方式会出现无法在多个页面中通用WebSocket的问题。
用一个iframe改变src
可以通在主页面写websocket，但是主页面与子页面部分js代码会冲突
每个页面放到一个DIV中，然后用js控制DIV显示与否。display:none/block 这样能避开很多问题，就是一个页面内容多了点。

     function tab(id){$(".panel_slider").css("display", "none");$("#"+id).css("display", "block");}或者function randomSwitchBtn(tag){if(tag == "world"){$("#person").css("display","none");$("#world").css("display","block");;}else if(tag == "person"){$("#world").css("display","none");$("#person").css("display","block");}}

服务器数据解析

多数服务器传出的数据都是JSON和[String Object]形式的，不同数据格式解析方式不同，比如JSON

         var decodeData;//是JSON串解码，不是则赋值try{decodeData = JSON.parse(inputJsonData);}catch(e){decodeData = inputJsonData;}

布局

属性展示和功能按键布局主要用Table，这样看起来整齐，那种类似控制台可以不断滚动出一条条的内容的用div，设置成带滚动条和自动定位到最新输出信息。

样式

css可以把很多类似的div用同一个class名字，设置共有的样式，然后在给这些div分别设置id，再给每个id设置如weith，height这样的私有的样式。类似下面这样

/*panel*/.panel{border:2px solid #fff;font-size:12px; line-height:24px; word-wrap:break-word; overflow:auto;   word-break:break-all;}            /*news panel*/#panel_news{width:auto;height:180px;} /*describe panel*/      #panel_describe{ width:auto;height:70px;position:relative; top:15px;}

弹窗

推荐用 layer 这种框架做弹窗相关功能，也可以手写，如下

<div id="win_thingsShow" style="text-align:center; border:1px red solid; width:60%; height:50%;position: absolute;top:25%;left:20%;display: none;"><!--title--><div style="background-color: blue;color: red;"><!--close--><span id="win_thingsShow_title"style="margin:auto;color:red;">标题文字</span><span id="win_thingsShow_close"style="margin-left: 95%;color:red;cursor: pointer;"onclick='hideWin()'>X</span></div><!--desc--><div id="win_thingsShow_desc"style="background-color:#0099FF;color: red;">我是描述</div><!--context--><div id="win_thingsShow_context"style="background-color:#0099FF;color: red;"></div>
</div>//js代码function openWin(){$("#win_thingsShow").css("display","block")}function hideWin(){$("#win_thingsShow").css("display","none")$("#win_thingsShow_context").html("");}

宽度和高度很多可以用x% 百分数代替具体数值，想要div居中，主要是父DIVtext-aline:center，子DIV margin:auto，居于底部的话position: fixed;bottom: 0px;

数据接受后处理方法

可以写一个xxxModel和一个xxxProcess，xxx是接受的JSON数据的key或二进制数据的头部，然后用类似于简单工厂+反射的效果

比如websocked收到的JSON数据触发方法，方法里xxx自动变成的key，然后简单工厂创建keyModel数据模型对象，和先编写好keyProcess方法，再反射实现它，js可以这样实现：

dataModel = new window[type+"Model"](context);//类似与简单工厂
eval("this."+type+"Process"+"()");//类似于反射

这样可以避免写switch做大量判断，

hjr-MUD游戏（二）：HTML5-APP客户端编写相关推荐

懂商业的技术合伙人(14)：使用HTML5开发App客户端，HTML5+和MUI框架基本介绍
我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...
游戏交流社区BBS论坛APP客户端和网页服务端设计毕业论文+前后端源码及数据库文件
下载地址:https://download.csdn.net/download/m0_63680064/36065411 项目介绍: 游戏交流社区BBS论坛APP客户端和网页服务端设计毕业论文+前后 ...
从零开始构建PHP版mud游戏（二）
为什么是mud? 98 99年的时候,我在大学里接触到的第1款网络游戏就是mud,那时候玩的是西游记,可以说mud对我们来说是一种情怀. 到了2020年,为什么我还要选mud? 我想要做一个世界,目的 ...
(二)01- DCloud平台 HTML5+ App开发——真机调试运行夜神模拟器运行HBuilderX中的html文件夜神模拟器运行App的基础功能示例-手机设备-分享功能-拍照功能
DCloud 平台 HTML5 + App 开发下载安装 HBuilderX 下载地址:https://www.dcloud.io/hbuilderx.html HBuilderX-使用步骤: 第一 ...
html5 app jquery mobile,使用 jQuery Mobile 与 HTML5 开发 Web App (二) —— jQuery Mobile 基础...
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
c语言编写可乐瓶游戏,可乐瓶游戏二十则
<可乐瓶游戏二十则>由会员分享,可在线阅读,更多相关<可乐瓶游戏二十则(2页珍藏版)>请在人人文库网上搜索. 1.可乐瓶游戏二十则废弃的可乐瓶如果能合理地开发与运用,将创编出各 ...
HTML5 App的代码注入攻击
摘要基于HTML5的手机app(译者注:以下简称HTML5 app)越来越流行了, 在大多数情况下它比native应用更容易适配不同的移动操作系统.它开发起来很方便,可以使用标准的web技术,包括H ...
《HTML5游戏编程核心技术与实战》一1.1 网页游戏和HTML5
本节书摘来异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰责编: 杨海玲,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1 ...
《HTML5游戏编程核心技术与实战》——第1章　游戏和HTML5初探1.1 网页游戏和HTML5...
本节书摘来自异步社区<HTML5游戏编程核心技术与实战>一书中的第1章,第1.1节,作者: 向峰更多章节内容可以访问云栖社区"异步社区"公众号查看. 第1章游戏和H ...

hjr-MUD游戏（二）：HTML5-APP客户端编写

搭建

服务器数据解析

布局

样式

弹窗

数据接受后处理方法

hjr-MUD游戏（二）：HTML5-APP客户端编写相关推荐

最新文章

热门文章