在js中引入movieClip后 button点击事件里的for循环失效，请大神帮帮忙解答一下，谢谢！

2015-05-28 09:14:37 376 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

qq_28092057 墨衍会员 · AI 创作全网分发关注 + 加入社区

pixi-movieclip-speed:根据当前浏览器的fps速率动态调整PIXI movieclip的动画速度 pixi-movieclip-speed 根据当前浏览器的fps速率动态调整PIXI movieclip的动画速度。当PIXI movieclip动画速度设置在0到1之间时，假定您的浏览器始终以60fps运行。想象一下，精灵表格动画以24fps导出并且动画速度设置为0.4（24/60），但是您的浏览器当前仅以30fps运行。在这种情况下，movieclip动画在视觉上运行速度较慢，因此该动画需要加快速度以补偿较低的浏览器fps速率。安装 npm install pixi-movieclip-speed --save 用法 var pixiMovieclipSpeedHandler = require ( 'pixi-movieclip-speed' ) ; var mc = new PIXI . MovieClip ( pixiTexture ) ; // the moviec 立即下载



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>hello</title>

    <script src="easeljs-0.8.0.min.js"></script>

    <script src="movieclip-0.8.0.min.js"></script>

    <script src="tweenjs-0.6.0.min.js"></script>

    <script src="app.js"></script>

</head>

<body>

    <canvas id="mycanvas" width="400px" height="400px" style="background-color: blueviolet"></canvas>

    <button id="btn1">左</button>



    <button id="btn2">右</button>

</body>

</html>



/**

 * 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);

}