创建一个Javascript国际象棋游戏

Question

我要做的是创建一个简单的基于浏览器的国际象棋游戏（没有持久保存或基于LAN的功能。只是能够根据棋子移动的方式在屏幕上移动peices（pawn forward and captured对角线（例如）。目前，我可以显示电路板，并且当我点击电路板上的某个位置时让浏览器识别出来，但是我仍然试图获取更新位置。

"use strict";

function display(B){
    for(var i=0;i<B.numrows;++i){
        for(var j=0;j<B.numcols;++j){
            while(cells[i][j].firstChild)
                cells[i][j].removeChild(cells[i][j].firstChild);

            var X = B.get(i,j);
            if( X !== undefined ){
                cells[i][j].appendChild( X.getImage() );
            }
        }
    }
    var tmp = ["White's turn",
        "Black's turn",];
    document.getElementById("status").innerHTML=tmp[turn];
}

function mklistener(B,ii,jj){
    return function(){
        for(var i=0;i<B.numrows;++i){
            for(var j=0;j<B.numcols;++j){
                cells[i][j].classList.remove("highlight");
                cells[i][j].classList.remove("highlight_current");
            }
        }

        if( currpiece && currpiece.canMoveTo(ii,jj) ){
            B.remove(currpiece.row,currpiece.col);
            B.remove(ii,jj);
            B.set(ii,jj,currpiece);
            currpiece = undefined;
            turn=(turn+1)%numplayers;
            display(B);
            return;
        }

        var p = B.get(ii,jj);
        if( p === undefined ){
            return;
        }

        if( p.color !== turnletters[turn] )
            return;

        currpiece = p;
        cells[ii][jj].classList.add("highlight_current");
        var m = p.getPossibleMoves(B);
        m.forEach(function(t){
            var r = t[0];
            var c = t[1];
            if( !cells[r] || !cells[r][c] ){
                console.log(r,c);
            }
            else{
                cells[r][c].classList.add("highlight");
            }
        });

    };
}
var numplayers = 4;
var turnletters = "wgbl";



var cells=[];
var currpiece = undefined;
var turn=0;
var upsidedown=true;

//B.dump({});
function manufacture(B,desc,initialhighlight){
    var tbl = document.createElement("table");
    tbl.className = "chessboard";
    for(var i=0;i<B.numrows;++i){
        cells.push([]);
    }

    var IH={}
    if( initialhighlight ){
        initialhighlight.forEach( function(x){
            IH[ x[0]+","+x[1] ] = 1;
        });
    }

    for(var i=0;i<B.numrows;++i){
        var rr = upsidedown ? (B.numrows-i-1) : i;

        var tr = document.createElement("tr");
        tbl.appendChild(tr);
        for(var j=0;j<B.numcols;++j){
            var klass;

            if( IH[ rr+","+j ] ){
                if( (i^j) % 2 !== 0)
                    klass = "highlight_black";
                else
                    klass = "highlight_white";
            }
            else if( !B.contains(rr,j) )
                klass = "invalid";
            else if( (i^j) % 2 !== 0){
                klass='black';
            }
            else{
                klass='white'
            }
            var td = document.createElement("td");
            td.id="td_"+i+"_"+j;
            td.className=klass;

            td.addEventListener("click", mklistener(
                rr,
                j,td) );
            tr.appendChild(td);
            cells[rr][j] = td;
        }
    }

    var div = document.createElement("div");
    var title = document.createElement("h3");
    title.appendChild(document.createTextNode(desc));
    div.appendChild(title);
    div.appendChild(tbl);
    div.appendChild(document.createElement("hr"));
    document.getElementById("main").appendChild(div);
    display(B);
}

function main(){
    var B = new TraditionalBoard();
    manufacture(B,"Traditional");

    //document.getElementById("main").appendChild(document.createElement("hr"));

    //moves
    var ap = [
        Pawn,
        Rook,
        Bishop,
        Knight,
        Queen,
        King,
    ]

    ap.forEach(function(F){
        var p = new F("w");
        var B = new EmptyBoard();
        B.set(4,4,p);
        if( p.name === "Unicorn" ){
            manufacture(B,p.name+" (first move; cannot capture)",p.getPossibleMoves());
            B.remove(4,4);
            B.set(4,3,p);
            manufacture(B,p.name+" (subsequent moves)",p.getPossibleMoves());
        }
        else
            manufacture(B,p.name,p.getPossibleMoves());
    });

}
main();

我正在尝试为这些片段在自己的文件中移动的逻辑做准备：

"use strict";

function Piece(color,letter){
    this.row=undefined;
    this.col=undefined;
    this.color=color;
    this.moved=false;   //true when it's been moved. Useful for castling.
    this.originalPosition = undefined;
    this.letter = letter;   //'P', 'N', 'Q', 'R', etc.
    this.owningBoard = undefined;
}

Piece.prototype.getImage = function(){
    var img = document.createElement("img");
    img.src = "pix/"+this.color+"-"+this.letter+".png";
    return img;
}

/**Determine if this piece can move to a given location.
 * @param r The destination row
 * @param c The destination column.
 * @return true or false
 */
Piece.prototype.canMoveTo = function(r,c){
    //see where we could possibly move to
    var possible = this.getPossibleMoves(this.owningBoard);

    //see if r,c is in the list of possible moves.
    for(var i=0;i<possible.length;++i){
        if( possible[i][0] === r && possible[i][1] === c )
            return true;
    }
    return false;
}

是的，我知道这不是最优雅的编码能力，但我认为我所采取的路线是有效的。任何输入都会有帮助。 :)