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