问题描述

在js中引入movieClip后 button点击事件里的for循环失效!

/**
 * Created by Administrator on 2015/5/27.
 */
var stage,image,btn1,btn2;
var image_x = 200;
var image_y = 20;
var step_x;
var step_y;
var arr_x_r = [];
var arr_x_l = [];
var arr_y = [];
var arry = [];
window.onload = function(){
    stage = new createjs.Stage("mycanvas");
    btn1 = document.getElementById("btn1");
    btn2 = document.getElementById("btn2");
    image = new createjs.Shape();
    image.graphics.beginFill("#123F56").drawRect(image_x,image_y,50,50);
    stage.addChild(image);

    var mc = new createjs.MovieClip(null,0,true,{start:0});
    stage.addChild(mc);

    for(var i = 0;i<5;i++) {
        arry[i] = new createjs.Shape();
        step_x = Math.random()*(300-50)+50;
        step_y = 70*(i+1);
        arry[i].graphics.beginFill("#12fF56").drawRect(step_x, step_y, 100, 20);
        arr_x_r[i] = step_x+100;
        arr_x_l[i] = step_x-50;
        arr_y[i] = step_y;
        stage.addChild(arry[i]);
    }

    var n = 0;
    var l = 0;

    for (var i = n; i < 5; i++) {
        if (image_x < arr_x_r[i]&&image_x>arr_x_l[i]) {
            break;
        }else{
            image.y += 70;
            n += 1;
        }
    }

    for(var i = 0; i < 5; i++){
        mc.timeline.addTween(createjs.Tween.get(arry[i]).to({y:0},0).to({y:-100},100));
    }
    mc.timeline.addTween(createjs.Tween.get(image).to({y:0},0).to({y:-100},100));
    mc.gotoAndPlay("start");

    btn2.onclick = function() {
        image.x += 10;
        image_x += 10;

        for (var i = n; i < 5; i++) {
            if (image_x < arr_x_r[i]) {
                break;
            }else{
                image.y += 70;
                n += 1;
            }
        }
        if(image_x>350){
            image.x -= 10;
            image_x -= 10;
        }
        if(image_x==350&&image.y==350){
            alert("Congratulate to you!!!")
        }

    }

    btn1.onclick = function(){
        image.x-=10;
        image_x-=10;

        for(var i = n; i < 5; i++){
            if(image_x>arr_x_l[i]){
                break;
            }else{
                image.y += 70;
                n += 1;
            }
        }
        if(image_x<0){
            image.x += 10;
            image_x += 10;
        }
    }

    createjs.Ticker.setFPS(20);
    createjs.Ticker.addEventListener("tick",stage);
}

解决方案

建议你，在你的for循环外alert(n);是不是等于5.看到有个地方n=+1了