看你有多色游戏 | 易学教程

运行截图：
rect.js：
    createjs.Shape.call(this);
    this.setRectType = function (type) {
        this._RectType = type;
        switch (type) {
            case 1:
                this.setColor(color);
                break;
            case 2:
                this.setColor(Rectcolor);
                break;
        }
    }
    this.setColor = function (colorString) {
        this.graphics.beginFill(colorString);
        this.graphics.drawRect(0,0,getSize()/n-2,getSize()/n-2);
        this.graphics.endFill();
    }
    this.getRectType = function () {
        return this._RectType;
    }
    this.setRectType(1);
}
Rect.prototype = new createjs.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);

function startGame() { //函数入口
    getCanvasSize();
    n = 2;
    addRect();
}

function addRect() { //添加方格
    var c1 = parseInt(Math.random() * 1000000); //设定放个颜色为一个随机值
    var color = ("#"+c1);
    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 c2 = parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY));
            var Rectcolor = ("#" + c2);
            var c3 = parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY));
            var Rectcolor = ("#" + c3);
            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 * (getSize() / n);
            r.y = indexY * (getSize() / n);
            if (r.getRectType() == 2){
                r.addEventListener("click",clickRect)
            }
        }
    }
}

function clickRect() { //判断方格为最大7个时（如果不是继续添加），清除所有子元素，重新调用addRect（）绘制方格
    if (n < 7){
        ++n;
    }
    gameView.removeAllChildren();
    addRect();

}
function getCanvasSize() {//获取canvas大小
    var gView = document.getElementById("gameView");
    gView.height = window.innerHeight - 4;
    gView.width = window.innerWidth - 4;
}
function getSize() {
    if (window.innerHeight >= window.innerWidth){
        return window.innerWidth;
    }  else {
        return window.innerHeight;
    }
}
startGame();//函数入口```




style.css

```*{
    margin: 0px;
    padding: 0px;
}
.main{
    width: 80%;;
    margin: 0px 2px;
}
#gameView{
    width: 100%;
    margin: 20px auto;
}```




index.html:

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <script src="easeljs.min.js"></script>
    <script src="Rect.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
</head>
<body>
    <div class="main">
        <canvas id="gameView"></canvas>
    </div>
    <script src="app.js"></script>
</body>
</html>```
来源：oschina
链接：https://my.oschina.net/u/4460892/blog/3215773
标签
createjs