找对儿游戏（html5）

从图片矩阵中找到2张相同的图片，然后删除，直到全部删除完毕。

js代码：

function Card(name, index, width, height) {


    var rectangle = {
        x: 0,
        y: 0,
        width: width,
        height: height
    };
    var canvas = document.getElementById(name);
    var context = canvas.getContext("2d");


    this.name = name;
    this.index = index;
    this.direction = "right";
    this.drawObj = {
        rectangle: rectangle,
        canvas: canvas,
        context: context
    };


}


Card.prototype.draw = function () {
    var rectangle = this.drawObj.rectangle;
    var context = this.drawObj.context;
    context.beginPath();
    //context.globalAlpha = 0.60;
    context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
    context.fillStyle = '#5277a9';
    context.fill(); 
}


Card.prototype.animate = function () {
    var rectangle = this.drawObj.rectangle;
    var context = this.drawObj.context;
    var canvas = this.drawObj.canvas;
    var request = true;
    if (this.direction == "right") {
        rectangle.x += rectangle.width / 10;
        if (rectangle.x > rectangle.width) {
            rectangle.x = rectangle.width;
            this.direction = "left";
            request = false;
        }
    }
    else if (this.direction == "left") {
        rectangle.x -= rectangle.width / 10;
        if (rectangle.x < 0) {
            rectangle.x = 0;
            this.direction = "right";
            request = false;
        }
    }
    if (request) {
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
        canvas.style.opacity = 0.99;
        setTimeout(function () {
            canvas.style.opacity = 1;
        }, 1);
        // draw again
        this.draw();
        // request new frame
        var card = this;
        window.setTimeout(function () {
            card.animate();
        }, 50);
    }
}


function FindPair(icons) {


    var col = 6;
    var row = 6;
    var width = 50;
    var height = 50;
    var imgArray = [];
    var canvasArray = [];
    var indexArray = [];
    var cardArray = [];
    var last = -1;
    var beforeLast = -1;
    var found = 0;
    var findComplete;


    var bindImgSrc = function (src) {
        //random select img norepeat from img array.
        var index;
        var contains = true;
        while (contains) {
            index = Math.floor(Math.random() * imgArray.length);
            contains = false;
            for (var i in indexArray) {
                if (indexArray[i] == index) {
                    contains = true;
                    break;
                }
            }
        }
        indexArray.push(index);
        //bind src.
        var img = document.getElementById(imgArray[index]);
        img.src = src;
    }


    var draw = function (index, name) {
        var card = new Card(name, index, width, height);
        cardArray.push(card);


        //registreate click event handler for canvas.
        var canvas = card.drawObj.canvas;
        canvas.addEventListener('click', function () {
            if (last != card.index && beforeLast != card.index) {
                card.animate();
            }
            if (last > -1) {
                if (last != card.index) {
                    if (beforeLast == -1 && document.getElementById(imgArray[last]).src == document.getElementById(imgArray[card.index]).src) {
                        var a = $(this);
                        var b = $(document.getElementById(canvasArray[last]));
                        setTimeout(function () {
                            a.parent().remove();
                            b.parent().remove();
                            found += 2;
                            if (found == col * row) {
                                findComplete();
                            }
                        }, 300);
                        last = -1;
                    } else {
                        if (beforeLast > -1) {
                            if (beforeLast != card.index) {
                                cardArray[last].animate();
                                cardArray[beforeLast].animate();
                                last = card.index;
                                beforeLast = -1;
                            }
                        } else {
                            beforeLast = last;
                            last = card.index;
                        }
                    }
                }
            } else {
                last = card.index;
            }


        }, false);


        card.draw();
    }


    this.start = function (container, completed) {
        this.reset();
        findComplete = completed;
        var html = "<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse; margin-left: auto; margin-right: auto;'>";
        for (var i = 0; i < row; i++) {
            html += "<tr>";
            for (var j = 0; j < col; j++) {
                var imgId = "img" + i + j;
                imgArray.push(imgId);
                var canvasId = "canvas" + i + j;
                canvasArray.push(canvasId);
                html += "<td><div style='width:" + width + "px;height:" + height + "px;'><div>";
                html += "<img id='" + imgId + "' alt='' style='width:" + width + "px;height:" + height + "px;position: relative; z-index: 1;'/>";
                html += "<canvas id='" + canvasId + "' width='" + width + "' height='" + height + "' style='border: 1px solid #d3d3d3;margin-left: -" + width + "px;position: absolute; z-index: 2;'></canvas>";
                html += "</div></div></td>";
            }
            html += "</tr>";
        }
        html += "</table>";
        container.html(html);


        //bind icon to the src attribute of the img.
        var count = 0;
        while (count < imgArray.length) {
            var imgSrc = icons[Math.floor(Math.random() * icons.length)]; //random select image from icons array.
            bindImgSrc(imgSrc);
            bindImgSrc(imgSrc);
            count += 2;
        }


        //initilize and draw canvas.
        for (var i in canvasArray) {
            draw(i, canvasArray[i]);
        }


    }


    this.reset = function () {
        last = -1;
        beforeLast = -1;
        indexArray.length = 0;
        imgArray.length = 0;
        canvasArray.length = 0;
        cardArray.length = 0;
    }


    this.config = function (cols, rows) {
        col = cols;
        row = rows;
    }


}

var icons = [ /**图片**/];

findPair = new FindPair(icons);
findPair.config(6, 6);
findPair.start($("#content"), function () {

});