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