gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

前言:

　　之前编写了一个网页闯关游戏(类似Riddle Game),除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中,学到的一些知识.

　　本文讲描述,如何在网页端实现一个仿微信的聊天窗口界面,以及其中涉及到的一些技术点. 作者前端是初学者,请大拿们轻拍.

效果展示:

　　这种聊天对话的布局模式,比PC端QQ的那种聊天方式更贴近移动端,我个人感觉.

需求设定:

　　让我们先过一遍,实现该聊天窗口需要支持的一些功能点.

　　• 聊天消息结构和布局

　　聊天消息包括: 人物(头像)和消息内容. 朋友消息位居左侧,自己消息则位于右侧,方便区分.

　　• 文本区域的自适应

　　消息内容可以自适应大小,总是以最合理的区域大小包裹.

　• 滚动支持

　　因聊天记录太多,大小超过聊天窗口的预设尺寸.

　　• 底部自动对齐

　　有新消息后,窗口内容自动对齐到可视窗口的底部.

　　• Enter键捕获

　　消息的输入支持,以及捕获响应Enter键.

　　这几个功能点中,感觉最难的是文本区域自适应处理,走了不少弯路,^_^.

实现方案:

　　• 聊天消息结构和布局

　　基本的HTML代码结构可以如下所示:

消息内容

标签,返回

的真实长度,既文本长度.

　　对于小于预设的max-width,则文本区域div缺省即可. 对于大于预设的max-width值,则文本区域div设定为width=max-width.

　　当然这边还有一个需要的注意的地方,就是自动换行.

值描述

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
　　为了防止太长的英文单词(非常规词)的影响,最后选用了word-break: break-all.
　　• 滚动支持
　　滚动支持,相对简单,只需要聊天对话框在y轴方向设定如下css属性即可:

overflow-y : scroll;

　　• 底部自动对齐
　　这个也是老生常谈的事了,每次聊天窗口的内容有更新,执行如下js代码即可.

div.scrollTop = div.scrollHeight;
　　注: 既scrollTop和scrollHeight属性值保持一致即可.
　　• Enter键响应捕获
　　对enter键响应的支持,添加如下监听事件函数即可.

document.addEventListener("keydown",function (evt) {
　　if (evt.keyCode == 13) {
　　　　// TODO
　　}
});

gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

前言:

效果展示:

需求设定:

猜你在找的JavaScript相关文章