1、制作计数累加功能

代码

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);
var a = 0;
var txt = new PIXI.Text("0");
app.stage.addChild(txt);
bg.interactive = true;
bg.on("click", addNumber);
function addNumber() {
    a += 1;
    txt.text = a;
}

代码讲解

1、点击背景图片bg，实现变量累加

             bg.on("click", addNumber);    <br />   function addNumber() {    <br />a += 1;    <br />txt.text = a;    <br />}    <br />当点击背景图片bg时，让a变量的值加1，同时将a变量的值显示在txt文本中    <br />                     a+=1：将a变量在原有值基础上加1    <br />txt.text=a：将a变量的值显示在txt文本中    

2、控制飞机移动速度

示例

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);

var plane = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane);

var speed = 0;

app.ticker.add(animate);
function animate() {
    plane.y += speed;
}

bg.interactive = true;
bg.on("click", plus); 
function plus() {
    speed += 1;
}

代码讲解

1、定义speed变量

var speed = 0;
定义speed变量，用于控制飞机的移动速度

2、点击背景bg图片

bg.interactive = true;
bg.on(“click”, plus);
function plus() {
speed += 1;
}
点击背景bg图片，使speed变量每次加1

3、添加帧频函数

app.ticker.add(animate);
function animate() {
plane.y += speed;
}
通过帧频函数，控制飞机plane图片的y坐标，每次加speed

3、控制飞机是否移动

示例

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);

var plane = new PIXI.Sprite.fromImage("res/enemy_02.png");
app.stage.addChild(plane);

var isMove = 0;

app.ticker.add(animate);
function animate(){
    if(isMove == 1){
        plane.y+= 3;
    }
}

bg.interactive = true;
bg.on("click",click);
function click(){
    if(isMove == 0){
        isMove = 1;
    }
    else{
        isMove = 0;
    }
}

代码讲解

1、定义isMove变量

var isMove = 0;
定义isMove变量，控制飞机是否移动 。
如果 isMove=1 飞机开始移动，否则飞机停止。

2、添加帧频函数

                app.ticker.add(animate);        <br />function animate(){        <br />if(isMove==1){        <br />plane.y += 3;        <br />}        <br />}        <br />通过帧频函数，控制飞机是否移动，如果 isMove=1，则飞机 plane 图片的 y 坐标每次加 3   

3、点击背景bg图片

bg.interactive = true;
bg.on(“click”,click);
function click(){
if(isMove == 0){
isMove = 1;
}
else{
isMove = 0;
}
}
当点击背景bg图片时，改变 isMove 变量值
如果 isMove=0，则将 isMove 设置为 1
如果 isMove=1，则将 isMove 设置为 0