發表文章

目前顯示的是 8月, 2014的文章

HTML5 互動式象棋譜

圖片
十多年前在舊書攤上挖到寶,發現一本曾經在某處讀到得到高度評價的棋譜”佈局津梁”,雖然只有下集,立刻把它買下來,印象中花了100塊左右,現在倒是漲了不少,可惜的是一直找不到上集...不過和許多買過的書的下場同樣,後來大多變成收藏用,只有有時候心血來潮會把它拿出來翻看。因為這本書的年紀比我大,怕把它給翻壞了,事實上封面皮都快掉了,好像隨時都要碎掉的感覺,所以後來花了不少時間將內容手工輸入電腦建檔。最近因為玩些HTML5的東西,所以順便就把它作成網頁版本,實作一個簡易版的互動式棋盤幫助看譜,順便當作練習題。程式很簡單,倒是花了非常大量的時間在校對棋譜內容改正原書的錯誤,不過因為個人能力有限還是有許多錯誤還沒更正... 這個程式主要在Chrome及Firefox測過,手機版viewport寬限定為320。 ( 玩玩看 ) 整個程式很簡單,因為棋譜格式是制式的,所以只需要利用幾個簡單的re的幫忙,很簡單的可以用來找出那一段是文字那一段是棋譜,然後再parse出棋譜內容走步。基本上棋譜還是以字串方式作處理,只要棋譜格式及內容沒有錯誤,都能正確演示。有任何顯示錯誤,則表示棋譜格式或內容有誤,因為我並沒有多作錯誤的檢查。 實際實作時在Chrome及Firefox有二個地方需要特別注意。 Firefox不支援innerText的用法,需改用textContent。實作上可以簡單以a = p.innerText || p.textContent解決。 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; offs

HTML5 WebSocket 多人連線麻將

圖片
之前以java實作了 多人連線的麻將 Client及Server,現在加上使用HTML5 WebSocket的client端,經最新版的FireFox及Chrome測試。這同樣只是一個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 {   } }