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;
    }

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...