案例教学一

1.案例

image.pngimage.png

2. 关键坐标分析

/
216,130 280,130 610,130 700,130
•

280,350 610,350
/

3.实现方法一

  1. var app = new PIXI.Application(890,500);
  2. document.body.appendChild(app.view);
  4. var bg = new PIXI.Sprite.fromImage("res/lianxi/luobo/bg1.png");
  5. app.stage.addChild(bg);
  7. var guai = new PIXI.Sprite.fromImage("res/lianxi/luobo/guai.png");
  8. guai.anchor.set(0.5,0.5);
  9. guai.x = 216;
  10. guai.y = 130;
  11. app.stage.addChild(guai);
  14. // 定义一个记录状态的变量
  15. var status = 1;
  17. // 实现帧频函数
  18. app.ticker.add(animate);
  20. // 定义帧频函数的响应函数
  21. function animate(){
  22.     if (status == 1){
  23.         // 第一个向右移动的状态
  24.         guai.x += 1;
  25.         if(guai.x == 280){
  26.             status = 2;
  27.         }
  28.     }else if (status == 2){
  29.        // 第二个状态,向下移动 
  30.        guai.y += 1;
  31.        if(guai.y == 350){
  32.            status = 3;
  33.        }
  34.     }else if(status == 3){
  35.         // 第三个状态,向右移动 
  36.         guai.x += 1;
  37.         if(guai.x == 610){
  38.             status = 4;
  39.         }
  40.     }else if(status == 4){
  41.         // 第四个状态,向上移动
  42.         guai.y -= 1;
  43.         if(guai.y == 130){
  44.             status = 5;
  45.         }
  46.     }else if( status == 5){
  47.         // 第五个状态
  48.         guai.x += 1;
  49.         if(guai.x == 700){
  50.             // 将怪物复位到初始位置 
  51.             guai.x = 216;
  52.             // 将状态重置为初始位置 的状态
  53.             status = 1;
  54.         }
  55.     }
  56. }

4. 实现方法二

实际萝卜在移动过程中,只有3种状态,

  1. x 坐标横向的递增
  1. y 坐标纵向的递增
  1. y 坐标的纵向递减

x 坐标在横向递增时,又分为三个关键坐标点来改变状态

  1. x 为 280 时, 改变为状态 2 , 让 y 坐标递增
  1. x 为 610 时, 改变为状态 3, 让 y 坐标递减
  1. x 为 700 时, 改变为状态 1, 将 x 坐标复位到 216

所以程序可以进行优化

var status = 1;
app.ticker.add(animate);
function animate(){
    // x 坐标递增变化的状态
    if (status == 1){
        guai.x += 1;
        // x 在 关键坐标 280 时改变状态
        if(guai.x == 280){
            status = 2;
        }
        // x 在 关键坐标 610 时改变状态
        if(guai.x == 610){
            status = 3;
        }
        // x 在 关键坐标 700 时改变状态
        if(guai.x == 700){
            status = 1;
            guai.x = 216;
        }
    // y 坐标递增变化的状态
    }else if(status == 2){
        guai.y += 1;
        if(guai.y == 350){
            status = 1;
        }
    // y 坐标递减变化的状态
    }else if(status == 3){
        guai.y -= 1;
        if(guai.y == 130){
            status = 1;
        }
    }
// 定义一个状态变量
var status = 1;
// 添加一个帧频函数
app.ticker.add(animate);
// 实现帧频函数的响应函数
function animate(){
    // x 递增的状态
    if(status == 1){
        guai.x += 1;
        if(guai.x == 280) status = 2;
        if(guai.x == 610) status = 3;
        if(guai.x == 700){
            status = 1;
            guai.x = 216;
        }
    }else if(status == 2){
        // 状态2 让 y + 1
        guai.y += 1;
        if(guai.y == 350) status = 1;
    }else if(status == 3){
        // 状态3 让y - 1
        guai.y -= 1;
        if(guai.y == 130) status = 1;
    }
}

案例教学二

1.案例

image.pngimage.png

2. 题目网址

http://www.yyfun001.com/lesson/action.php？c=UserCodeShareProxy&a=test&sourceId=0&lessonId=0&tEditerId=91795

3. 实现方法


function updata(){
    numtext.text = number1+operator+number2;
}

//代码编写区域
var number1 = "";
var number2 = "";
var operator = "";
var result = "";

//按钮1
num1.interactive = true;
num1.on("click",addnum1);
function addnum1(){
  // 该函数的功能就是将数据 1 赋值给 number1 或 number2
  // 如果是第一次按,那么应该赋值给 number1 ,条件是 number1 中肯定是空的
  // 由于只是1和2的相加,所以当number1中有值时,就什么都不做.
  // 如果number1 不为空,说明第一个加数已确定,那么就判断操作变量中是否有值,如果有就将1 赋值给number2,如果没有就什么都不干
    if(number1==""){
        number1 = 1;
    }else if(operator!=""){
        number2 = 1;
    }
    updata();
}

//按钮2
num2.interactive = true;
num2.on("click",addnum2);
function addnum2(){
    // 操作思路同加数1
    if(number1==""){
        number1 = 2;
    }else if(operator!=""){
        number2 = 2;
    }
    updata();
}

//加号
addBtn.interactive = true;
addBtn.on("click",Add);
function Add(){
    // 如果没有加数1,那么操作符是无效的,直接返回
    if(number1=="") return;
    // 记录操作
    operator = "+";
    updata();
}

//减号
minusBtn.interactive = true;
minusBtn.on("click",Minus);
function Minus(){
    // 同加号操作
    if(number1=="") return;
    operator = "-";
    updata();
}

//等号
equalBtn.interactive = true;
equalBtn.on("click",Equal);
function Equal(){
    // 如果 number 1,number2, operator,有任意一个是空的,都不能进行计算,直接返回 
    if(number1==""||number2==""||operator=="")return;
    // 如果都明值,那么 判断是什么操作
    if(operator=="+"){
        // 计算结果
        result = number1+number2;
        // 将计算结果更新到UI界面上
        numtext.text = number1+operator+number2+"="+result;
    }
    if(operator=="-"){
        result = number1-number2;
        numtext.text = number1+operator+number2+"="+result;
    }
}

//清空
emptyBtn.interactive = true;
emptyBtn.on("click",Empty);
function Empty(){
    // 将所有的状态清空
    number1 = "";
    number2 = "";
    operator = "";
    result = "";
    updata();
}