createjs之easeljs【游戏看你有多色（一）】

小游戏，点不同颜色的矩形块就算闯关成功了。

<script src="rect.js">script>

<canvas height="400px" width="400px" id="gameView">您的浏览器无法显示canvas>
<script src="app.js">script>         html文件中引入两个js文件

rect.js     

	rect封装类  rect具备的属性：大小与n相关，颜色与color和Rectcolor相关，传入这三个参数

function Rect(n,color,Rectcolor)
{
    createjs.Shape.call(this);  构造函数
    this.setRectType= function (type) {
        this._RectType=type;
        switch (type){
            case 1:
                this.setColor(color);
                break;
            case 2:
                //this.setColor("#ff0000");
                this.setColor(Rectcolor);
                break;
        }

    }
    this.setColor=function(colorString){
        this.graphics.beginFill(colorString);
        this.graphics.drawRect(0,0,400/n-5,400/n-5);  每两个矩形中间都有5cm空隙
        this.graphics.endFill();
    }
    this.getRectType= function () {
        return this._RectType;
    }
    this.setRectType(1);  初始化为全是1类型
}
Rect.prototype=new createjs.Shape();  prototype意为rect是shape的一个实例化对象

app.js

	游戏逻辑，比较简单

var stage=new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);

var gameView=new createjs.Container();
stage.addChild(gameView);                必须的几句，这个就不多说了。

var n=2;  宏定义每行/列有多少个矩形  

function addRect()
{
    var cl=parseInt(Math.random()*1000000);
    var color="#"+cl;           随机color颜色，普通矩形               
    var cl2=parseInt(Math.random()*1000000);  随机Rectcolor颜色，要点的矩形。待我再研究研究颜色之间的关系吧，木有接触过啊。
    while(cl2==cl)
    {
        var cl2=parseInt(Math.random()*1000000);
    }
    var rectcolor="#"+cl2;
    var x=parseInt(Math.random()*n);
    var y=parseInt(Math.random()*n);  随机要点矩形的位置
    for(var indexX=0;indexX<n;indexX++)
    {
        for(var indexY=0;indexY<n;indexY++)
        {
            var r=new Rect(n,color,rectcolor);
            gameView.addChild(r);   
            r.x=indexX;
            r.y=indexY;
            if(r.x==x&& r.y==y)
            {
                r.setRectType(2);
            }
            r.x=indexX*(400/n);
            r.y=indexY*(400/n);     这里才是为矩形设置位置。
            if(r.getRectType()==2)
            {
                r.addEventListener("click",function(){
                    if(n<7){
                        ++n;
                    }
                    gameView.removeAllChildren();    清除所有图形
                    addRect();		然后再加入下一组图形

                })
            }
        }
    }
}
addRect();   外部调用一定要有哦