1、引入js文件
<script src="js/pixi.min.js"></script>
2、创建应用
var app=new PIXI.Application(500,600);//宽500，高600
3、将应用放进页面
document.body.appendChild(app.view);
4、创建背景元素
var bg =new PIXI.Sprite.fromImage("img/bg.jpg");
5、 将背景元素放进界面
app.stage.addChild(bg);
6、创建图片元素
var feiji=new PIXI.Sprite.fromImage("img/plane1.png");
feiji.anchor.set(0.5,0.5);
feiji.x=200;
feiji.y=450;
7、将图片放进界面
app.stage.addChild(feiji);
8、创建文本元素
var text=new PIXI.Text("得分：0000");
text.style.fill="white";
9、将文本放进界面
app.stage.addChild(text);
10、定位元素
feiji.x=100;
feiji.y=200;
11、设置元素的宽度/高度
feiji.width=100;
feiji.height=200;
12、设置元素是否可见
feiji.visible=false;
feiji.visible=0;//不可见
feiji.visible=true;
feiji.visible=1;//可见
13、设置元素透明度
feiji.alpha=0.5;
14、设置文本颜色/字号/加粗/字体
feiji.style.fill="white";
feiji.style.fontsize=70;
feiji.style.fontWeight="bold"
feiji.style.fontFamily="黑体";
15、设置元素的弧度
plane.rotation = 0.1745329*9;//90度 0.1745329 = 10度
16、设置元素的缩放【与width，height冲突】
plane.scale.x = 0.5;
plane.scale.y = 0.5;
17、设置元素的翻转
plane.scale.x = -1;//水平翻转
plane.scale.y = -1;//上下翻转
练习一：飞机
<!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/img_bg_level_3.jpg");
app.stage.addChild(bg);
var feiji=new PIXI.Sprite.fromImage("img/plane_blue_01.png");
feiji.x=195;
feiji.y=540;
app.stage.addChild(feiji);
var xuetiao=new PIXI.Sprite.fromImage("img/3_03.png");
xuetiao.x=40;
xuetiao.y=13;
app.stage.addChild(xuetiao);
var hp=new PIXI.Sprite.fromImage("img/img_ui_16.png");
hp.x=5;
hp.y=10;
app.stage.addChild(hp);
var score=new PIXI.Text("得分：00000");
score.x=320;
score.y=10;
score.style.fill="white";
app.stage.addChild(score)
var yunceng=new PIXI.Sprite.fromImage("img/yun02.png");
yunceng.y=100;
app.stage.addChild(yunceng);
var jingyan=new PIXI.Sprite.fromImage("img/img_plane_item_15");
jingyan.x=100;
jingyan.y=300;
app.stage.addChild(jingyan);
</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(1008,640);
document.body.appendChild(app.view);
var bg=new PIXI.Sprite.fromImage("img/bg1.png");
app.stage.addChild(bg)
var js1=new PIXI.Sprite.fromImage("img/js1.png");
js1.x=350;
js1.y=300;
app.stage.addChild(js1);
var js2=new PIXI.Sprite.fromImage("img/js2.png");
js2.x=750;
js2.y=200;
app.stage.addChild(js2);
var js3=new PIXI.Sprite.fromImage("img/js3.png");
js3.x=600;
js3.y=300;
app.stage.addChild(js3);
var js4=new PIXI.Sprite.fromImage("img/js4.png");
js4.x=800;
js4.y=380;
app.stage.addChild(js4);
var item=new PIXI.Sprite.fromImage("img/item.png");
//item.x=100;
app.stage.addChild(item);
var num=new PIXI.Text("100");
num.x=15;
num.y=62;
app.stage.addChild(num);
</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,400);
document.body.appendChild(app.view);
var tiankong=new PIXI.Sprite.fromImage("img/bg_back_02.png");
app.stage.addChild(tiankong);
var haimian=new PIXI.Sprite.fromImage("img/bg_front_02.png");
haimian.y=200;
app.stage.addChild(haimian);
var dimain=new PIXI.Sprite.fromImage("img/ground01_2.png");
dimain.y=280;
app.stage.addChild(dimain);
var juese=new PIXI.Sprite.fromImage("img/player003.png");
juese.x=130;
juese.y=200;
app.stage.addChild(juese);
var jinbi=new PIXI.Sprite.fromImage("img/gold.png");
jinbi.x=400;
jinbi.y=150;
app.stage.addChild(jinbi);
var zhangaiwu=new PIXI.Sprite.fromImage("img/luzhang004.png");
zhangaiwu.x=600;
zhangaiwu.y=-170;
app.stage.addChild(zhangaiwu);
var tiaoyue=new PIXI.Sprite.fromImage("img/jumpBtn.png");
tiaoyue.y=270;
app.stage.addChild(tiaoyue);
var xiadun=new PIXI.Sprite.fromImage("img/dunBtn.png");
xiadun.x=670;
xiadun.y=270;
app.stage.addChild(xiadun);
</script>
</body>
</html>
图三
今日反思：
1、界面出不来的原因主要是单词打错、必须大小写的地方没有大小写、图片名称写错。
2、出现favicon.ico文件不存在时在HTML页面中的<head></head>标签中添加如下代码：
<link rel="shortcut icon" href="#"/>