1 前言

本文是做一款游戲的心路歷程。（不完全是教程）
代碼部署地址 部署的版本不一定是最新的。
其實(shí)已經(jīng)打算放棄了，但還是再堅(jiān)持一下吧。
我們本來(lái)打算新增一些功能，但是新增功能的時(shí)候舉步維艱，可能是時(shí)候把代碼整理整理一下了。

2 思考

我們注意到我們之前的前端代碼，我們把所有的東西都揉成一團(tuán)，這對(duì)我們后面新增功能造成極大的不便。
我們重新思考一下我們的前端代碼，我們至少可以把這個(gè)分成3層：

• 通信：這一層用來(lái)處理webSocket的通信，后面如果我們改變數(shù)據(jù)的交互格式，我們只要在這一層上動(dòng)土即可。
• 邏輯處理： 用來(lái)處理各種邏輯與事件。
• 圖像： 用來(lái)處理處理圖像，現(xiàn)在有棋盤(pán)與棋子。

3 實(shí)現(xiàn)

3.1 通信

  var Communicator = {
        createNew : function(host, handler){
            net = {};
            net.handler = handler;
            //鏈接等
            net.parse = function(data){
                //數(shù)據(jù)格式化，后期可以支持多種協(xié)議
            }
            //接收數(shù)據(jù)
            net.webSocket.onmessage = function(event){
                var result = net.parse(event.data);
                if (net.handler && typeof(net.handler) == "function"){
                    net.handler(result);
                }
            }

            net.sendMessage = function(data){
                //發(fā)送數(shù)據(jù)，可以格式化數(shù)據(jù)
            }

            return net;
    }

這里我們用到一種叫做回調(diào)的概念，相信c/c++猴子不會(huì)陌生，當(dāng)我們創(chuàng)建這個(gè)通信模塊的時(shí)候，我們穿一個(gè)回調(diào)函數(shù)給他們，“你不用關(guān)心里面是啥，你需要的時(shí)候用他就行”，下面是一個(gè)回調(diào)的簡(jiǎn)單例子。

    doAlert = function(){
        alert("Hello World");
    }

    var Test = {
        createNew : function(handler){
            var test = {};
            test.action = handler;
            test.doActino = function(){
                if (test.action){
                    if (typeof(test.action) == "function"){
                        test.action();
                    }
                }
            }
            return test;
        }
    }

    test = Test.createNew(doAlert);
    test.doActino();

這里我們還用到一種偽類(lèi)的寫(xiě)法，javaScipt是一個(gè)腳本語(yǔ)言，我們可以通過(guò)上面的方式，寫(xiě)出一個(gè)Test的類(lèi)，然后通過(guò)createNew實(shí)例化。

3.2 邏輯

邏輯是個(gè)大塊頭，基本上原有的代碼中的各種函數(shù)都在邏輯層，我們需要在邏輯層創(chuàng)建一個(gè)通信模塊。

    gmk.hanlderEvent = function(result){
        if (result.success == false){
            alert("系統(tǒng)異常" + event.data);
        }
        var action = result.model;
        if (action.code == "Start"){
            gmk.startGame(action);
        }else if (action.code == "Chess"){
            gmk.recieveChessMsg(action);
        }
    }

    gmk.communicator = Communicator.createNew(gmk.host, gmk.hanlderEvent);

這里把hanlderEvent傳給ommunicator，當(dāng)commuicator的webSocket觸發(fā)onMessage時(shí)，就會(huì)調(diào)用hanlderEvent。

3.3 圖像

圖像是控制canvas顯示的，下面是棋盤(pán)的一個(gè)例子：

var BoardBrush = {
    createNew : function(ct){
        bb = {};
        bb.ct = ct;
        bb.show = function(){
            ct.clearRect(0, 0, 640, 640);
            ct.fillStyle = "#996600";
            ct.fillRect(0, 0, 640, 640);
            ct.fillStyle = "#CCFFFF";
            ct.strokeStyle = "white";
            for (var i = 0; i <= 640; i += 40){
                ct.beginPath();
                ct.moveTo(0, i);
                ct.lineTo(640, i);
                ct.closePath();
                ct.stroke();

                ct.beginPath();
                ct.moveTo(i, 0);
                ct.lineTo(i, 640);
                ct.closePath();
                ct.stroke();
            }
        }
        return bb;
    }
}

4 總結(jié)

重構(gòu)之后，前端的邏輯會(huì)清晰很多，減少了代碼的耦合，對(duì)我們后面的繼續(xù)開(kāi)發(fā)提供了極大的幫助。
最近學(xué)了一些js，感覺(jué)收獲還是挺大的。
代碼
代碼部署地址 部署的版本不一定是最新的。
希望大家批評(píng)指正。

Paste_Image.png