JavaScript实现通过按纽控制电梯上下移动,并实现帧频动画

var app = new PIXI.Application(520,460);
document.body.appendChild(app.view);
//创建背景
var bg = new PIXI.Sprite.fromImage("res/lianxi/elevator/bg.png");
app.stage.addChild(bg);

var elevator = new PIXI.Sprite.fromImage("res/lianxi/elevator/dt.png");
elevator.y = 380;
elevator.x = 325;
app.stage.addChild(elevator);

var person = new PIXI.Sprite.fromImage("res/lianxi/elevator/p1.png");
person.y = 40;
person.x = 40;
elevator.addChild(person);

var btn1 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn1.x = 480;
btn1.y = 40;
app.stage.addChild(btn1);

var btn2 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn2.x = 480;
btn2.y = 130;
app.stage.addChild(btn2);

var btn3 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn3.x = 480;
btn3.y = 220;
app.stage.addChild(btn3);

var btn4 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn4.x = 480;
btn4.y = 310;
app.stage.addChild(btn4);

var btn5 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn5.x = 480;
btn5.y = 410;
app.stage.addChild(btn5);

btn1.interactive = true;
btn1.buttonMode = true;
btn2.interactive = true;
btn2.buttonMode = true;
btn3.interactive = true;
btn3.buttonMode = true;
btn4.interactive = true;
btn4.buttonMode = true;
btn5.interactive = true;
btn5.buttonMode = true;

var isMoving = false;//表示电梯停止还是移动
var nows;//表示电梯目标位置
var news;//表示电梯新的位置
btn1.on("click",change1);
function change1(){
    if(isMoving === true){
        return;
    }
    isMoving = true;
    nows = 8;
    if(elevator.y == 8){
        isMoving = false;
    }
}

btn2.on("click",change2);
function change2(){
    if(isMoving === true){
        return;
    }
   isMoving = true;
    nows = 101;
    if(elevator.y == 101){
        isMoving = false;
    }
}

btn3.on("click",change3);
function change3(){
    if(isMoving === true){
        return;
    }
     isMoving = true;
    nows = 194;
    if(elevator.y == 194){
        isMoving = false;
    }
}

btn4.on("click",change4);
function change4(){
    if(isMoving === true){
        return;
    }
    isMoving = true;
    nows = 287;
    if(elevator.y == 287){
        isMoving = false;
    }
}

btn5.on("click",change5);
function change5(){
    if(isMoving === true){
        return;
    }
    isMoving = true;
    nows = 380;
    if(elevator.y == 380){
        isMoving = false;
    }
}

app.ticker.add(animate);
function animate(){
    if(isMoving === false){
        return;
    }
    if(nows<elevator.y){
        news = elevator.y-10;
        if(news<nows){
            news = nows;
        }
         elevator.y = news;
    }else{
        news = elevator.y+10;
        if(news>nows){
          news = nows;
        }
        elevator.y = news;
    }
    
}




要求实现电梯在移动时,点击其他按钮无效。(上面代码并不能实现,我以为能够实现,不知道我的代码为什么不能实现,希望有大佬能够私信教我一下);

下面是我通过不断探索,实现了电梯在移动时,点击其他按钮无效的效果。

var isMoving = false;
var nows;
var news;
btn1.on("click",change1);
function change1(){
    
        if(isMoving===true){
            return;
        }else{
            isMoving =true;
            nows = 8;
        } 
}

btn2.on("click",change2);
function change2(){
    
        if(isMoving===true){
            return;
        }else{
            isMoving =true;
            nows = 101;
        }
  
}

btn3.on("click",change3);
function change3(){
if(isMoving===true){
            return;
        }else{
            isMoving =true;
            nows = 194;
        }  
}

btn4.on("click",change4);
function change4(){
    
        if(isMoving===true){
            return;
        }else{
            isMoving =true;
            nows = 287;
        }
    }
    
    
    
    

btn5.on("click",change5);
function change5(){

        if(isMoving===true){
            return
        }else{
            isMoving =true;
            nows = 380;
        }
        
    
}

app.ticker.add(animate);
function animate(){
    if(isMoving === false){
        return;
    }

    if(nows<elevator.y){
        news = elevator.y-2;
        if(news<nows){
            news = nows;
            isMoving = false;
        }
         elevator.y = news;
    }else{
        news = elevator.y+2;
        if(news>nows){
          news = nows;
          isMoving = false;
        }
        elevator.y = news;
    }
    
}

想要的效果实现了,但是animate函数里的代码我还是模模糊糊得,半懂。(希望大佬来解答)

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值