HTML5游戏-看你有多色

需引入easeljs-0.7.1.min.js

html:

<div align="center">
    <canvas width="400px" height="400px" id="gameView"></canvas>
    <div>倒计时:<a id="aid2">60</a>s 分数:<a id="aid">0</a>
    </div>
</div>


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

Rect.js,在html中需要引入:

function Rect(n,color){//个数
    createjs.Shape.call(this);//构造方法
    this.setRectType = function (type) {
        this._RectType = type;
        switch (type){
            case 1:
                this.setColor(color);
                break;
            case 2://选项的颜色
         //       this.setColor("white");
                this.setColor("#"+parseInt(Math.random()*1000000));
                break;
        }
    };
    this.setColor = function (colorString) {
        this.graphics.beginFill(colorString);
        this.graphics.drawRect(0,0,400/n-5,400/n-5);
        this.graphics.endFill();
    };
    this.getRectType = function () {
        return this._RectType;
    };
    this.setRectType(1);
}
Rect.prototype = new createjs.Shape();

主要的js代码(js.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 aid = document.getElementById("aid");
var score = 0;

var n = 2;//初始2行
function addRect() {
    var color = "#" + parseInt(Math.random() * 1000000);//随机颜色
    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);
            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 < 9) {
                        ++n;
                    }
                    gameView.removeAllChildren();
                    score++;
                    aid.innerHTML = score + "";
                    addRect();
                });
            } else if (r.getRectType() == 1) {
                r.addEventListener("click", function () {
                    alert("你有" + score + "分色");
                    window.location.reload();
                });
            }
        }
    }
}
addRect();

window.onload = function () {
    time();//不放这第一次undefineds
};
var t = 60;
function time() {
    var aid2 = document.getElementById("aid2");

    aid2.innerHTML = t + "";
    t--;
    setTimeout(time,1000);
    if(t == -1 ){
        alert("你有" + score + "分色");
        window.location.reload();
    }
}