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

浏览数：28 / 时间：2015年06月09日

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

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

HTML页面布局

<script src="js/easeljs-0.7.1.min.js"></script>
<script src="easeljs/drawZfx.js"></script>
<body>
<div class="abs" id="time">0</div>
    <section class="section-box">
        <canvas id="canvasId" width="320" height="440">不支持canvas元素</canvas>
        <a href=" " class="remove">重新开始</a>
    </section>
</body>

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

游戏效果如下