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

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

HTML页面布局

不支持canvas元素

重新开始

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 

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);                                //初始化启动游戏

游戏效果如下