2014年8月31日 星期日

HTML5 互動式象棋譜

十多年前在舊書攤上挖到寶,發現一本曾經在某處讀到得到高度評價的棋譜”佈局津梁”,雖然只有下集,立刻把它買下來,印象中花了100塊左右,現在倒是漲了不少,可惜的是一直找不到上集...不過和許多買過的書的下場同樣,後來大多變成收藏用,只有有時候心血來潮會把它拿出來翻看。因為這本書的年紀比我大,怕把它給翻壞了,事實上封面皮都快掉了,好像隨時都要碎掉的感覺,所以後來花了不少時間將內容手工輸入電腦建檔。最近因為玩些HTML5的東西,所以順便就把它作成網頁版本,實作一個簡易版的互動式棋盤幫助看譜,順便當作練習題。程式很簡單,倒是花了非常大量的時間在校對棋譜內容改正原書的錯誤,不過因為個人能力有限還是有許多錯誤還沒更正...

這個程式主要在Chrome及Firefox測過,手機版viewport寬限定為320。

(玩玩看)


整個程式很簡單,因為棋譜格式是制式的,所以只需要利用幾個簡單的re的幫忙,很簡單的可以用來找出那一段是文字那一段是棋譜,然後再parse出棋譜內容走步。基本上棋譜還是以字串方式作處理,只要棋譜格式及內容沒有錯誤,都能正確演示。有任何顯示錯誤,則表示棋譜格式或內容有誤,因為我並沒有多作錯誤的檢查。

實際實作時在Chrome及Firefox有二個地方需要特別注意。

  1. Firefox不支援innerText的用法,需改用textContent。實作上可以簡單以a = p.innerText || p.textContent解決。
  2. Firefox不支援mouse event的offsetX/offsetY,我們可以另外包裝一個getOffset的函式解決:
    function getOffset(e)
    {
      if (e.offsetX) {
        return {x:e.offsetX, y:e.offsetY};
      }
    
      var el = e.target;
      var offset = {x:0, y:0};
    
      while (el.offsetParent) {
        offset.x += el.offsetLeft;
        offset.y += el.offsetTop;
        el = el.offsetParent;
      }
    
      offset.x = e.pageX - offset.x;
      offset.y = e.pageY - offset.y;
    
      return offset;
    }

2014年8月12日 星期二

HTML5 WebSocket 多人連線麻將

之前以java實作了多人連線的麻將Client及Server,現在加上使用HTML5 WebSocket的client端,經最新版的FireFox、Chrome及我的A6s上測試過。這同樣只是一個Demo,由簡單AI打麻將。現在二種不同平台不同網路協定的Client,可以連線對打麻將了。




;

底下對於WebSocket的Server及Client實作作一個重點摘要。

1,依據RFC6455完成WebSocket的Handshake,網路上有很多資料細節這裡就不多作說明。需要注意的是,對於"Connection: "這條內容,Client送給Server什麼,Server就需要回同樣的東西給Client。例如:Chrome送給Server的是"Connection: Upgrade", 而Firefox送給Server的是"Connection: keep-alive, Upgrade"。Server端對Handshake的回應也是以HTTP response形式,之後就可作一般的socket讀寫。

2,Server端的讀寫,需要特別注意的是Payload len的處理:如果小於等於125,那就是原始資料長度;如果等於126,則實際資料長度為接下來的二個byte指定的16bits數字;如果等於127,則實際資料長度為接下來的八個byte指定64bits數字。

3,Client端的onmessage事件中,如果處理的資料是binary,需對傳入的物件作型別檢查。

ws.onmessage = function (evt) {
  if (evt.data instanceof ArrayBuffer) {
  } else if (evt.data instanceof Blob) {
  } else if (typeof evt.data === "string") {
  } else {
  }
}


Related Posts Plugin for WordPress, Blogger...