使用了封装了canvas的create.js库来实现的。

最终效果：

工程：

Rect.js

/** 方块类*/

functionRect(n,color,specialColor){

createjs.Shape.call(this);/**

* 设置方块的类型*/

this.setRectType=function(type){this._RectType=type;switch(type){case 1:this.setColor(color);break;case 2:this.setColor(specialColor);break;

}

}/**

* 获取方块的类型*/

this.getRectType=function(){return this._RectType;

}/**

* 设置方块的颜色+绘制方块*/

this.setColor=function(colorString){this.graphics.beginFill(colorString);this.graphics.drawRect(0,0,400/n-5,400/n-5);this.graphics.endFill();

}//方块的默认类型是1

this.setRectType(1);

}

Rect.prototype=new createjs.Shape();

seeColor.js

/**

* 绘制舞台*/

var stage=new createjs.Stage("gameView");var gameView=newcreatejs.Container();

stage.addChild(gameView);//var s=new createjs.Shape();//s.graphics.beginFill("#00FF00");//s.graphics.drawRect(0,0,100,100);//s.graphics.endFill();

//gameView.addChild(s);

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick",stage);//特殊的那个方块的容差

var diffDegree=30;//n*n的矩阵

var n=2;var maxN=7;//在随机生成颜色的时候[0,500] [500,255*255*255]这两个区间内的颜色将被排除

var edgeColor=10;functionaddRect(){//随机颜色

var randR=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;var randG=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;var randB=Math.floor(Math.random()*255-edgeColor*2)+edgeColor;//特殊方块的颜色

var specialR=randR-diffDegree>edgeColor?randR-diffDegree:randR+diffDegree;var specialG=randG-diffDegree>edgeColor?randG-diffDegree:randG+diffDegree;var specialB=randB-diffDegree>edgeColor?randB-diffDegree:randB+diffDegree;var color="rgb("+randR+","+randG+","+randB+")";var specialColor="rgb("+specialR+","+specialG+","+specialB+")";//特殊方块的位置

var specialX=Math.floor(Math.random()*n);var specialY=Math.floor(Math.random()*n);//绘制所有方块

for(var indexX=0;indexX

gameView.addChild(r);

r.x=indexX;

r.y=indexY;if(r.x==specialX && r.y==specialY){

r.setRectType(2);

}

r.x=indexX*(400/n);

r.y=indexY*(400/n);

if(r.getRectType()==2){//点到特殊方块的时候重绘

r.addEventListener("click",function(){if(n

}

gameView.removeAllChildren();

addRect();

});

}

}

}

}

addRect();

index.html

See Color

参考资料：

create.js