网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
前言:
之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识.
本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍.
效果展示:
先打下广告: 网页闯关游戏入口(请狠狠地点击我, ^_^) .
仿微信窗口的设计源于第四关--倾听女神的故事.
这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉.
需求设定:
让我们先过一遍, 实现该聊天窗口需要支持的一些功能点.
• 聊天消息结构和布局
聊天消息包括: 人物(头像)和消息内容. 朋友消息位居左侧, 自己消息则位于右侧, 方便区分.
• 文本区域的自适应
消息内容可以自适应大小, 总是以最合理的区域大小包裹.
• 滚动支持
因聊天记录太多, 大小超过聊天窗口的预设尺寸.
• 底部自动对齐
有新消息后, 窗口内容自动对齐到可视窗口的底部.
• Enter键捕获
消息的输入支持, 以及捕获响应Enter键.
这几个功能点中, 感觉最难的是文本区域自适应处理, 走了不少弯路, ^_^.
实现方案:
• 聊天消息结构和布局
基本的html代码结构可以如下所示:
<div><img src="" alt="头像"/> <div>消息内容</div> </div>
注: 头像为一个img标签, 文本消息内容则为一个div, 包裹两者的是另一个大的div, 代表完整的一个消息.
对于布局的左偏移和右偏移, 则借助float:left|right, 来进行控制, 这个还是基础的.
• 文本区域的自适应
为了让聊天的文本内容显得美观, 最好方式就是自适应的文本区域(有个max-width, 区域最小化).
最初的时候, 我尝试了textarea标签, 因为其属性有row和col, 对应字符个数单位, 可以用于设定行数和列数.
可惜的是, 我被现实打败了, 因为textarea对中文字符和英文字符的计算标准不同, 中文字符按2个算, 英文字符按1个算. 因为用户输入的不确定, 导致很难用文本串的长度来设定textarea的行列值.
于是回到起点, 只能走计算文本像素点px长度的方式来设定大小(等价于限定max-width).
计算文本的长度, 参考于"JQuery 计算文本的总宽度 Width".
function GetCurrentStrWidth(text, font) {var currentObj = $('<pre>').hide().appendTo(document.body);$(currentObj).html(text).css('font', font);var width = currentObj.width();currentObj.remove();return width; }
注: 巧妙的通过添加/删除<pre>标签, 返回<pre>的真实长度, 既文本长度.
对于小于预设的max-width, 则文本区域div缺省即可. 对于大于预设的max-width值, 则文本区域div设定为width=max-width.
var maxWidth = 320; var currentFont = "normal 13px Helvetica, Arial, sans-serif"; msgDiv.style.font = currentFont;var currentWidth = GetCurrentStrWidth(message, currentFont);// *) 设定文本区域的宽度 if (currentWidth <= maxWidth) {msgDiv.style.width = "" + currentWidth + "px"; } else {msgDiv.style.width = "" + maxWidth + "px"; }
当然这边还有一个需要的注意的地方, 就是自动换行.
word-break: normal|break-all|keep-all;值 描述 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 } });
后记:
原本以为实现一个聊天窗口的示例很容易, 却在真正的实践过程中磕磕碰碰, 步履蹒跚. 前端这一块, 真心水很深. 事后回忆起来,觉得收获很大, 当然对于文本的自适应, 采用了一个较复杂的办法. 后来想想是不是加个max-width属性就能轻松搞定了?
http://www.cnblogs.com/mumuxinfei/p/5188291.html
转载于:https://www.cnblogs.com/jiangxiaobo/p/6110020.html
网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点相关推荐
- 网页闯关游戏(riddle webgame)--SQL注入的潘多拉魔盒
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. web开发初学者往往会忽视一些常见的漏洞 ...
- 网页闯关游戏(riddle webgame)--游戏玩法和整体介绍
前言: 记得上大学那会, 有位传说中的大牛, 写了一个网页闯关类的游戏. 当时我们玩得不亦乐乎, 也是第一次接触到这种形式的游戏. 不过当时纯玩家心态, 并没有想过去创造一个. 最近想起这事, 突然想 ...
- pythonchallenge闯关游戏_Python Challenge游戏攻略(一)
Python Challenge是一个古老的网页闯关游戏,为程序员设计,一共33关,只有在一关通过之后,才能获得会提供下一关挑战的网页地址,以此类推到最终关.蛮有意思的,自己做了13道,后面就没坚持下 ...
- Android 端 2D 横屏动作冒险类闯关游戏【100010436】
Android 端 2D 横屏动作冒险类闯关游戏 摘要 随着闯关类游戏的玩法与数目的不断增加,本文所设计的一款名为<Wander In Color>的动作冒险闯关类游戏,将从一个新的角度入 ...
- 计算机协会小游戏,网页闯关小游戏闯关记录(一)ISA TEST
在知乎上找到一个关于CTF入门的回答,答主很专业的给出了建议和一些对应的训练平台,这里我试了试几个,自己半吊子水平,只能玩一些简单的,这里把自己做的过程记录下来,这几个基本都能查到通关秘籍(我是怎么知 ...
- 程序猿光棍节闯关游戏
好无聊好寂寞,来玩一下.... 因为我不是程序猿,所以应该闯不到头的.... 边闯边写就是了 第一关链接请戳 http://segmentfault.com/game/ 第一关查看源代码即可 于是得到 ...
- pythonchallenge闯关游戏_PythonChallenge闯关详解
前言 PythonChallenge是国外的一位工程师设计的一套编程闯关游戏,网址:PythonChallenge,每一关都可以用一段Python程序解决问题得到下一关的入口,本博文作为一个学习笔记, ...
- 安卓3d游戏引擎_3D球闯关游戏-3D球闯关游戏安卓官方版预约 v1.2.5
3D球闯关游戏是一款让人上瘾的球球跳跃闯关游戏,在音轨上不断跳跃,控制球球顺利到达终点,玩家需要在曼妙的背景音乐下找到自己的闯关节奏,大家只有找到了节奏才能更轻松的完成挑战,轻松点击球球就可以让它不断 ...
- 横板闯关游戏中的角色移动
前言 在很多2D游戏中,都会涉及到角色移动,跳跃等操作,最典型的就是横板闯关游戏.例如经典的魂斗罗.三国战纪等.这两款游戏在地图移动和角色行走的方式中唯一的不同就是魂斗罗是没有纵深的那种. 看似简单, ...
最新文章
- Memcached分布式算法详解--转
- 详细的mongo工具手册,包含常见CURD+条件操作+聚合+案例
- boost::spirit模块实现演示逗号分隔的数字列表的解析器的测试程序
- 2.myql数据导入到solr,并建立solr索引(学习笔记)
- 20个python代码_有用的20个python代码段(4)
- python3爬虫初探(三)之正则表达式
- STM32 软件重启导致死机的情况分析
- n1运行linux,斐讯N1折腾记:运行 Linux 及优化
- export default (imported as router) was not found_U盘上的FOUND.000和FILE0000.CHK是什么
- 大学生使用计算机的情况英语作文,关于网络的大学生英语作文(精选10篇)
- 四年级计算机病毒与网络安全,《计算机病毒与网络安全》教学案例
- C语言小游戏——贪吃蛇
- 【Flutter从入门到实战】⑰Flutter的主题风格、Theme、DarkTheme暗黑模式、单独给单个页面设置Theme、屏幕适配、屏幕适配工具类封装、Flutter调试使用
- 2021年物联网设备CVE天梯榜
- 时间轴+html+源码,HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】
- 德国外交部为何放弃Linux而改用XP?
- flask---》Marshmallow介绍及基础使用
- 一切成功源于积累——20140928 认识货币——英镑
- 中餐菜单分类名称创意_餐厅菜单的种类分类
- 一文说尽NB—IOT和Lora
热门文章
- 客户端连接openfire报错解决
- [转]Ubuntu以管理员权限打开文件(夹)
- Android View添加 Listener 小技巧示例
- 服务器设置客户端网页安装,网页服务器和客户端
- [Java] 蓝桥杯ALGO-115 算法训练 和为T
- [Java] 蓝桥杯ALGO-11 算法训练 瓷砖铺放
- L2-014. 列车调度-PAT团体程序设计天梯赛GPLT
- mysql主主复制和mha_MySQL第二章主从复制MHA高可用
- 利用python对excel文件进行操作_数据处理-对Excel文件读取和操作和存储(python版)...
- go结构体初始化_go语言基础之结构体普通变量初始化