用js canvas实现的一个消灭星星的小游戏，目前没有设定关卡

调用只要用document.Starlight(dom,option)

(function (doc, win) {
    var options = {
        lights: {}
    };
    var canvas;
    var length = 400;
    var itemLength = 40;
    var lights = {};
    var star = {};
    var stepCount = 0;
    var char = ['★','☆'];
    doc.Create = function (option) {
        options = option = extend(options, option);
        // 这个方法必须放到某个dom的环境中去运行
        //所以这里的this表示的是某个特定的dom,而不是document
        //这里就是方法所创建的canvas
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, length, length);
        function DrawLine(a, b, c, d,e) {
            if (!e) {
                e = '#808080';
            }
            context.strokeStyle = e;
            context.beginPath();
            context.moveTo(a, b);
            context.lineTo(c, d);
            context.stroke();
        }
        for (var i = 0; i < length/itemLength; i++) {
            var y = (i+1) * itemLength;
            DrawLine(0, y, length, y);//画横线
            DrawLine(y, 0, y, length);
            if (!lights[i]) {
                lights[i] = {};
            }
            for (var j = 0; j < length / itemLength; j++) {
                if (lights[i][j]) {
                    lights[i][j] = extend(lights[i][j], { beginLeft: i * itemLength, endLeft: itemLength * (i + 1), beginTop: itemLength * j, endTop: itemLength * (j + 1) });
                } else {
                    lights[i][j] = { beginLeft: i * itemLength, endLeft: itemLength * (i + 1), beginTop: itemLength * j, endTop: itemLength * (j + 1),isStar:false };
                }
                if (lights[i][j]['isStar']) {
                    var charIndex = parseInt(Math.random() * 2);
                    context.font = '50px Verdana';
                    context.fillText(char[charIndex], itemLength * i, itemLength * (j+1));
                }
            }
        }
        canvas.onclick = click();
    };
    doc.StarLight = function (dom, option) {
        canvas = doc.createElement('canvas');
        if (!(canvas.getContext && canvas.getContext('2d'))) {
            throw new Error('浏览器不支持Canvas');
        }
        dom = O(dom);
        canvas.width = 400;
        canvas.height = 400;
        canvas.style.border = '1px solid red';
        dom.appendChild(canvas);
        doc.Create.call(dom, canvas);
    };
    function O(id) {
        var a = '';
        if (typeof id == 'object') {
            return id;
        }
        var reg = new RegExp('#[a-z]+.?', 'ig');
        if (reg.test(id)) {
            return doc.getElementById(id.substring(1,id.length));
        }
        var nameReg = new RegExp('![a-z]+.?', 'ig')
        if (nameReg.test(id)) {
            return doc.getElementsByName(id.substring(1, id.length));
        }
        var classReg = new RegExp('@[a-z]+.?', 'ig');
        if (classReg.test(id)) {
            return doc.getElementsByClassName(id.substring(1, id.length));
        }
        return doc.getElementsByTagName(id);
    }
    function extend() {
        var result = {};
        if (arguments.length<=1) {
            return arguments[0];
        }
        for (var i = 0; i < arguments.length; i++) {
            for (var o in arguments[i]) {
                result[o] = arguments[i][o];
            }
        }
        return result;
    }
    function click() {
        return function () {
            stepCount++;
            var left =event.x- canvas.offsetLeft;
            var top = event.y - canvas.offsetTop;
            var lc =parseInt( left / itemLength);
            var tc = parseInt(top / itemLength);
            //alert(doc.Format('您点的是第{0}行，第{1}列', tc + 1, lc + 1));
            change(lc, tc);
            change(lc + 1, tc);
            change(lc - 1, tc);
            change(lc, tc + 1);
            change(lc, tc - 1);
            doc.Create.call(canvas, options);
            var flag = true;
            for (var ls in lights) {
                for (var l in lights[ls]) {
                    var currentItem = lights[ls][l];
                    if (currentItem['isStar']) {
                        flag = false;
                    }
                }
            }
            if (flag) {
                alert(doc.Format('You win,use step {0}', stepCount));
                stepCount = 0;
            }
        };
    }
    function change(lc, tc) {
        //tc++;
        if (lights[lc]&&lights[lc][tc]) {
            if (lights[lc][tc]['isStar']) {
                lights[lc][tc]['isStar'] = false;
            } else {
                lights[lc][tc]['isStar'] = true;
            }
        }
    }
    doc.Format = function(str,args) {
        var length = arguments.length;
        if (length<=1) {
            return arguments[0];
        }
        var result = arguments[0];
        for (var i = 1; i < length; i++) {
            result = result.replace('{'+(i-1)+'}',arguments[i])
        }
        return result;
    }
})(document, window);