網頁闖關遊戲(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屬性就能輕鬆搞定了?

公衆號&遊戲站點:
　　我的微信公衆號: 木目的H5遊戲世界
　　
　　我的遊戲做品集站點(尚在建設中...): www.mmxfgame.com,  也可直接ip訪問: http://120.26.221.54/.