首页 > 编程语言 >JavaScript实现通过按纽控制电梯上下移动,并实现帧频动画

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

时间:2024-07-19 20:25:20浏览次数:10  
标签:按纽 帧频 JavaScript elevator isMoving var return true nows

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函数里的代码我还是模模糊糊得,半懂。(希望大佬来解答)

标签:按纽,帧频,JavaScript,elevator,isMoving,var,return,true,nows
From: https://blog.csdn.net/qq_63001766/article/details/140556291

相关文章

  • 使用 JavaScript 检测大写锁定键(Detect Caps Lock with JavaScript)(转)
    原文地址:DetectCapsLockwithJavaScript-使用JavaScript检测大写锁定ByDavidWalshonFebruary6,2024作者:大卫·沃尔什,2024年2月6日Anyoneiscapableofhavingtheircapslockkeyonatanygiventimewithoutrealizingso.Userscaneasilyspotunwan......
  • JavaScript 基础知识 Day01
    一、计算机基础知识1、计算机数据存储单位位(Bit):1bit可以保存一个0或者1(最小的存储单位)字节(Byte):1B=8b千字节(KB):1KB=1024B兆字节(MB):1MB=1024KB吉字节(GB):1GB=1024MB太字节(TB):1TB=1024GB2、关于JavaScript 它是在1952年2月由网景开......
  • JavaScript复习记录(6)— 对闭包的理解,闭包使用场景
    闭包(Closure)指的是一个函数可以访问其外部作用域(即使这个函数是在外部作用域之外执行的)。换句话说,闭包是函数和声明该函数的词法环境的组合。闭包的形成闭包在以下情况下形成:当一个内部函数被保存到外部后,即使外部函数已经执行完毕,内部函数仍然可以访问外部函数中的变量。......
  • JavaScript手机号实名认证接口如何集成 验证手机号与持有人是否一致
    手机号实名认证接口是一种用于验证手机号码是否存在的实名登记服务,能够核验三大运营商(中国移动、中国电信、中国联通)手机号码的实名认证状态,通常被应用于网站、电商平台注册、支付平台注册等场景中,以便于核验用户身份的真伪,以此来保障用户身份信息与财产不受损失!随着市场......
  • JavaScript 异步编程
    0x01概念说明与基本使用Promise是在ES6中引入的类,用于更好地编写复杂的异步任务在ES6之前的异步请求的处理方案中,通常通过传递回调函数的方式处理请求结果,由于各个请求对回调函数不统一,每次请求时都需要查看相应的源码,造成效率低下,因此需要约定共同的标准,即Promise类......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站(西餐)
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 如何在 Vue 和 JavaScript 中截取视频任意帧图片
    如何在Vue和JavaScript中截取视频任意帧图片大家好!今天我们来聊聊如何在Vue和JavaScript中截取视频的任意一帧图片。这个功能在很多场景下都非常有用,比如视频编辑、视频预览等。本文将带你一步步实现这个功能,并且会提供详细的代码示例。准备工作首先,我们需要一个Vue......
  • njs最详细的入门手册:Nginx JavaScript Engine
    原文链接:https://hi.imzlh.top/2024/07/08.cgi关于njs首先,njs似乎在国内外都不受关注,资料什么的只有官网参考手册,出了个问题只能看到GithubIssue所以,这篇文章将我的探索过程展示给大家,njs对于可用存储空间较小的设备真的很友好,相比较于NodeJS、Deno这种80M起步的运行环境真的......
  • 编程世界的对决:JavaScript vs Java
    在编程领域,Java和JavaScript这两门语言各有千秋。它们不仅在语法上有着明显的区别,在编程理念、表现力、类型转换以及代码的易读性和复杂性方面也有着巨大的差异。本文将深入探讨JavaScript相较于Java的优势,以及两者在代码风格和开发体验上的不同。1.表现力的对比1.1JavaScr......
  • 常用的 JavaScript 数组处理方法
    1.map方法用于创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后返回的结果。letitems=[{id:1,name:'item1'},{id:2,name:'item2'},{id:3,name:'item3'}];letitemNames=items.map(item=>item.name);console.log(itemNames);......