主要基于       -------easeljs-0.7.1.min.js-----   去制作这个游戏

思路：主要思路是以行为单位 绑定可点击行 选中则讲 移动最外层容器继续绑定可点击行的下一行 否则结束游戏

HTML页面布局 

<script src=http://www.mamicode.com/"js/easeljs-0.7.1.min.js"></script>> 
CSS
 
    *｛margin:0;padding:0｝
    body{
        font-family: "微软雅黑";
    }
    .section-box{
        width: 320px;
        height: 480px;
        margin: 0 auto;
        text-align: center;
    }
    .abs{
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
        color: #f00;
    }
    .remove{
        display: inline-block;
        width: 100px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        background: #f00;
        color: #fff;

    }
 
drawZfx.js文件------  这个文件主要来创建矩形方块  白色和黑色---
 
/**********************绘制黑白矩形**************************************/
function drawZfx(w,h){
    createjs.Shape.call(this);
    var typeValue = 1;
    this.setType = function(type){
        typeValue = type;
        switch (type){
            case 1:
                this.getDraw1();
                break;
            case 2:
                this.getDraw2();
                break;
        }
    }
    this.getDraw1 = function(){
        this.graphics.s("#000").beginFill("#fff").drawRect(0,0,w/4,h/4).endFill();
    }
    this.getDraw2 = function(){
        this.graphics.s("#000").beginFill("#000").drawRect(0,0,w/4,h/4).endFill();
    }
    this.getType = function(){
        return typeValue;
    }
    this.setType(typeValue);
}
drawZfx.prototype = new createjs.Shape();
 
核心javascript
 
var stage = new createjs.Stage("canvasId");        //获取canvas 
createjs.Ticker.setFPS(30);                        //设置帧数频率
createjs.Ticker.addEventListener("tick",stage);    //事件
var drawView = new createjs.Container();           //创建最外层容器
stage.addChild(drawView);                          //容器添加到canvas中
var timeFn;                                        //计时器
var text = 0;                                      //时间初始化值0

/*****初始化布局*******/
function init(w,h,size){                           //初始化界面 （宽，高，行容器层数）
    var view = [];
    var current = 1;                               //能点击的位置默认为倒数第一行
    for(var n = size;n>=0;n--){
        view[n] = new createjs.Container();        //定义容器为一个行容器
        view[n].y = (3-n)*h/4;                     //给行容器定位
        var black = parseInt(Math.random()*4);     //随机黑色块
        for(var l = 0;l <4;l++){
            var zfx = new drawZfx(w,h);            //创建色块（默认为白色色块）
            zfx.x = l*w/4;                         //给色块定位
            if(black == l){        
                zfx.setType(2);                    //填充为黑色色块
            }
            view[n].addChild(zfx);                 //将色块放入一个行容器中
        }
        if(n == current){                          //判断可点击行
            addCurrent(current,view,h);            
        }
        drawView.addChild(view[n]);                //将行容器放人最外层容器
    }
}
/*****一个过度方法 由这个事件过度到点击事件******/
function addCurrent(current,view,h){
    for(var i = 0; i < 4; i++){
        clickFn(i,current,view,h);
    }
}
/****绑定点击事件****/
function clickFn(i,current,view,h){
    view[current].getChildAt(i).addEventListener("click",function(){
    
        /****************** 值1：点中了白色块 游戏结束 ******************************/
        if(view[current].getChildAt(i).getType() == 1){
            alert("游戏结束,您的成绩是："+text.toFixed(1)+"秒点击了"+(current-1)+"次黑块");
            clearInterval(timeFn);
            
        /****************** 值2：点中了黑色块  继续游戏******************************/
        }else if(view[current].getChildAt(i).getType() == 2){
        
        /**********(current == 1)是启动始化计*****************/
            if(current == 1){
                text = 0;
                timeFn = setInterval(function(){
                    text += 0.1;
                    document.getElementById("time").innerHTML = text.toFixed(1);
                },100);
            }
            drawView.y +=h/4;                       //最外层容器向下移动
            current++;                              //设置可绑定点击的行
            addCurrent(current,view,h);             //回调过度事件
        }
    });
}
init(320,440,1000);                                //初始化启动游戏
 

 

 
游戏效果如下
 
 

 

自学easeljs  根据别踩白块游戏规则自己写的代码