使用了封装了canvas的create.js库来实现的。
最终效果：
工程：
Rect.js
/*
* 方块类
*/
function Rect(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=new createjs.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;
function addRect(){
//随机颜色
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<n;indexX++){
for(var indexY=0;indexY<n;indexY++){
var r=new Rect(n,color,specialColor);
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<maxN){
++n;
}
gameView.removeAllChildren();
addRect();
});
}
}
}
}
addRect();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>See Color</title>
</head>
<body>
<canvas id="gameView" width="400px" height="400px"></canvas>
<script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="js/Rect.js"></script>
<script type="text/javascript" src="js/seeColor.js"></script>
</body>
</html>
github下载地址：https://github.com/BenDanChen/seeColor
参考资料：
极客学院视频教程地址 http://www.jikexueyuan.com/course/167.html
create.js
时间： 2024-08-27 09:31:50