动画基础
帧频函数
1、定义帧频函数
function move(){
plane.y -=1; }
2、添加帧频动画
app.ticker.add( move )
3、超出边界,复原坐标:
if( bullet.y<0 ){ bullet.x = plane.x; bullet.y = plane.y; } }
逻辑控制
1、用 var 变量控制程序执行逻辑
var sudu=1;//每帧移动的距离
enemy1.y += sudu;
2、多条件判断
&&:表示并且,左右两边条件必须同时满足
||:表示或者,左右两边条件有一个满足即可
3、移除帧频动画效果
自定义帧频函数 function dong(){ }
添加帧频动画 app.ticker.add( dong );
移除帧频函数 app.ticker.remove( dong );
循环
定义循环变量 var i = 1;
定义循环条件 ( i <= 10)
改变循环变量的值 i++;
for(var i = 0; i < 10; i++){}
练习一:发射子弹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script >
//应用窗口
var app=new PIXI.Application(800,640);
document.body.appendChild(app.view);
//背景
var bg=new PIXI.Sprite.fromImage("img/bg1.png");
app.stage.addChild(bg)
//子弹
var zidan=new PIXI.Sprite.fromImage("img/zidan1.png");
zidan.anchor.set(0.5,0.5);
zidan.x=300;
zidan.y=300;
app.stage.addChild(zidan);
//豌豆
var peas=new PIXI.Sprite.fromImage("img/peas.png");
peas.anchor.set(0.5,0.5);
peas.x=300;
peas.y=300;
app.stage.addChild(peas);
//条款
var item=new PIXI.Sprite.fromImage("img/item.png");
app.stage.addChild(item);
//太阳数量
var num=new PIXI.Text("100");
num.x=15;
num.y=62;
app.stage.addChild(num);
//让子弹动起来
app.ticker.add(zidanMove);
function zidanMove(){
zidan.x+=3
//判断子弹是否超出边界,超出复原坐标
if(zidan.x>800){
zidan.x=peas.x;
zidan.y=peas.y-15;
}
}
</script>
</body>
</html>
图一
练习二:继续游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script>
//应用窗口
var app=new PIXI.Application(510,674);
document.body.appendChild(app.view);
//背景
var bg =new PIXI.Sprite.fromImage("img/bg.jpg");
app.stage.addChild(bg);
//子弹
var zidan=new PIXI.Sprite.fromImage("img/bullet_1.png");
zidan.anchor.set(0.5,0.5);
zidan.x=150;
zidan.y=500;
app.stage.addChild(zidan);
//飞机
var feiji=new PIXI.Sprite.fromImage("img/plane.png");
feiji.anchor.set(0.5,0.5);
feiji.x=150;
feiji.y=500;
app.stage.addChild(feiji);
//加速
var shang=new PIXI.Sprite.fromImage("img/shang.png");
shang.x=450;
shang.y=520;
app.stage.addChild(shang);
//减速
var xia=new PIXI.Sprite.fromImage("img/xia.png");
xia.x=450;
xia.y=620;
app.stage.addChild(xia);
//文本
var text=new PIXI.Text("速度:1");
text.style.fill="white";
text.x=400;
text.y=580;
app.stage.addChild(text);
//暂停
var zanting=new PIXI.Sprite.fromImage("img/zanting.png")
zanting.x=450;
app.stage.addChild(zanting);
//蒙版
var mengban=new PIXI.Sprite.fromImage("img/mengban.png")
mengban.visible=false;
app.stage.addChild(mengban);
//继续游戏
var jixu=new PIXI.Sprite.fromImage("img/jixu.png")
jixu.x=150;
jixu.y=300;
app.stage.addChild(jixu);
var sudu=1;
app.ticker.add(zidanMove)
function zidanMove(){
zidan.y-=sudu;
if(zidan.y<0){
zidan.y=feiji.y
}
}
shang.interactive=true;
shang.on("click",zeng);
function zeng(){
sudu++;
text.text="速度:"+sudu;
}
xia.interactive=true;
xia.on("click",jian);
function jian(){
if(sudu>1){
sudu--;
}text.text="速度:"+sudu;
}
zanting.interactive=true;
jixu.interactive=true;
zanting.on("click",ting);
jixu.on("click",ji);
function ting(){
sudu=0;
zanting.visible=false;
mengban.visible=true;
jixu.visible=true;
}
function ji(){
sudu=1;
zanting.visible=true;
mengban.visible=false;
jixu.visible=false;
}
</script>
</body>
</html>
图二
练习三:接鸡蛋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript">
var app=new PIXI.Application(600,600);
document.body.appendChild(app.view)
var xiaoqiu1=new PIXI.Sprite.fromImage("img/qiu2.png")
xiaoqiu1.x=50;
app.stage.addChild(xiaoqiu1);
var xiaoqiu2=new PIXI.Sprite.fromImage("img/qiu2.png")
xiaoqiu2.x=200;
app.stage.addChild(xiaoqiu2);
var xiaoqiu3=new PIXI.Sprite.fromImage("img/qiu2.png")
xiaoqiu3.x=400;
app.stage.addChild(xiaoqiu3);
app.ticker.add(down1);
function down1(){
xiaoqiu1.y+=2;
xiaoqiu2.y+=3;
xiaoqiu3.y+=4;
if(xiaoqiu1.y>600){
xiaoqiu1.y=0;
}
if(xiaoqiu2.y>600){
xiaoqiu2.y=0;
}
if(xiaoqiu3.y>600){
xiaoqiu3.y=0;
}
}
xiaoqiu1.interactive=true;
xiaoqiu2.interactive=true;
xiaoqiu3.interactive=true;
xiaoqiu1.on("click",return1);
xiaoqiu2.on("click",return2);
xiaoqiu3.on("click",return3);
function return1(){
xiaoqiu1.y=0;
}
function return2(){
xiaoqiu2.y=0;
}
function return2(){
xiaoqiu2.y=0;
}
</script>
</body>
</html>
图三
练习四:愤怒的小鸟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript">
//应用窗口
var app=new PIXI.Application(750,450);
document.body.appendChild(app.view);
//背景
var bg=new PIXI.Sprite.fromImage("img/bg12.jpg");
app.stage.addChild(bg);
//小鸟
var xiaomiao=new PIXI.Sprite.fromImage("img/bird.png");
xiaomiao.x=100;
xiaomiao.y=200;
app.stage.addChild(xiaomiao);
//游戏结束
var jieshu=new PIXI.Text("游戏结束");
jieshu.visible=false;
jieshu.x=300;
jieshu.y=200;
app.stage.addChild(jieshu);
var direction=2;
function dong(){
xiaomiao.x+=2;
if(direction==1)xiaomiao.y-=3;
if(direction==0)xiaomiao.y+=3;
if(xiaomiao.x>=750)xiaomiao.x=0;
if(xiaomiao.y<=0||xiaomiao.y>=450){
jieshu.visible=true;
app.ticker.remove(dong);
}
}
app.ticker.add(dong);
bg.interactive=true;
bg.on("pointerdown",shang);
bg.on("pointerup",xia);
function shang(){
direction=1;
}
function xia(){
direction=0;
}
</script>
</body>
</html>
图四
练习五:跑酷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script>
//应用
var app=new PIXI.Application(800,500);
document.body.appendChild(app.view);
//天空
var tiankong=new PIXI.Sprite.fromImage("img/bg_back_02.png");
app.stage.addChild(tiankong);
//天空1
var tiankong1=new PIXI.Sprite.fromImage("img/bg_back_02.png");
tiankong1.x=800;
app.stage.addChild(tiankong1);
//海面
var haimian=new PIXI.Sprite.fromImage("img/bg_front_02.png");
haimian.y=200;
app.stage.addChild(haimian);
//海面1
var haimian1=new PIXI.Sprite.fromImage("img/bg_front_02.png");
haimian1.x=800;
haimian1.y=200;
app.stage.addChild(haimian1);
//地面
var dimian=new PIXI.Sprite.fromImage("img/ground03_1.png");
dimian.width=1600;
dimian.y=400;
app.stage.addChild(dimian);
//人物
var juese=new PIXI.Sprite.fromImage("img/player003.png");
juese.x=130;
juese.y=300;
app.stage.addChild(juese);
//跳跃
var tiaoyue=new PIXI.Sprite.fromImage("img/jumpBtn.png");
tiaoyue.x=600;
tiaoyue.y=270;
app.stage.addChild(tiaoyue);
tiaoyue.interactive=true;
tiaoyue.on("mousedown",tiaoqi);
tiaoyue.on("mouseup",xialuo);
function tiaoqi(){
juese.y-=100;
}
function xialuo(){
juese.y+=100;
}
app.ticker.add(movedimian);
function movedimian(){
if(dimian.x>-800){
dimian.x-=5;
}else{
dimian.x=0
}
}
app.ticker.add(movetiankong);
function movetiankong(){
if(tiankong.x>-800){
tiankong.x-=3;
tiankong1.x=tiankong.x+800;
}else{
tiankong.x=tiankong1.x;
}
}
app.ticker.add(movehaimian);
function movehaimian(){
if(haimian.x>-800){
haimian.x-=2;
haimian1.x=haimian.x+800;
}else{
haimian.x=haimian1.x;
}
}
</script>
</body>
</html>
图五
今日反思及补充:scale.x 缩小/放大宽度 scale.y 缩小/放大高度
获取随机数 Math.random() :feiji.x=Math.random() * (50,450);feiji.x=Math.random() * (50,450);
蒙版 var mengban=new PIXI.Sprite.fromImage("img/mengban.png");mengban.visible=false;
app.stage.addChild(mengban);