canvas练习-关灯游戏

第二次使用canvas，:)

看到一篇订阅了的文章：Lights Off，由于它足够简单，于是很想自己做出来。

做法

初学Ruby，先仿造了一个迭代工具函数：

    // 仿ruby迭代，从1起始
    Number.prototype.times = function(fn,ctx){
        var n = this.valueOf();
        for(var i=1;i<=n;i++){
            fn.call(ctx,i,n);
        }
        return this;
    };

把整个画布看做棋盘，定义布局：

    // 棋盘视觉布局
    var board = [
        [0,1,0,1,0,0,1,0,1,0],
        [1,0,0,0,0,1,0,1,0,1],
        [0,1,0,1,1,0,1,0,1,0],
        [1,1,0,1,0,0,1,1,0,0],
        [0,0,1,1,0,1,0,1,0,1],
        [0,1,0,0,1,0,1,1,0,0],
        [1,1,0,1,0,0,1,0,1,0],
        [0,0,1,1,0,1,0,1,0,1],
        [1,1,0,1,1,0,1,1,0,0],
        [0,0,1,1,0,1,0,1,0,1]
    ];

初始化,绘制整个棋盘

    //cDivid = 10
    cDivid.times(function(x){
        cDivid.times(function(y){
            drawBoardCircle(x,y,board[y-1][x-1]);
         });
    });  

更进一步，如何判断点击恰好在圆上面？用勾股定理计算两点之间的距离：

    // 二维坐标点
    var Point = function(x,y){
        this.x = x;
        this.y = y;
        this.distance = function(p){
            return Math.sqrt(Math.pow(p.x - this.x,2)+Math.pow(p.y - this.y,2));
        };
    };

点击事件绑定到DOM元素上面，点击之后依次反转灯光就可以了：

    //bx,by为灯的位置，浏览器坐标
    invertLight(bx,by);     //当前位置
    invertLight(bx,by-1);   //上
    invertLight(bx,by+1);   //下
    invertLight(bx-1,by);   //左
    invertLight(bx+1,by);   //右

关于IE

IE下可以用 ExplorerCanvas，有两个开发版本下载，分别用vml和silverlight实现。这里有个速度上的 测试对比 。

简单的测试过来：

• vml版excanvas的clearRect方法会清除整个画布，原生的canvas能够一次只操作部分像素，如果用vml清除了全部的话，重绘相当的慢(2~3秒)。
• silverlight版excanvas很棒，但clearRect也只能清除整个画布重绘。感觉上绘制这全部100个图形对象，它就比vml版快2，3倍。

查看

demo.htm

demo-ie-vml.htm

demo-ie-sl.htm