图片示例，简陋的图，记录下落过程，
1、创建应用实例并添加到DOM元素上。
（会看到一个黑色画布，没有任何元素，接下来会在画布上创建文字）
2、创建 TextStyle 用来设置要显示字体样式
3、随机产生字母（code,x, y,speed,isHas） 创建坐标及是否要创建该对象 (Text)
4、把字母渲染到画布上，从上到下运行
5、监听keyup事件，消除相应的数组
1、创建应用添加DOM
let app = new PIXI.Application({width: 526,height: 526})document.body.appendChild(app.view);
2、创建字体样式（我抄官网的）
// 字体样式let style = new PIXI.TextStyle({fontFamily: "Arial",fontSize: 36,fill: "white",stroke: '#ff3300',strokeThickness: 4,dropShadow: true,dropShadowColor: "#000000",dropShadowBlur: 4,dropShadowAngle: Math.PI / 6,dropShadowDistance: 6,});
3、创建随机文字对象并添加数组中，文字移动是对数组操作
var getRandom = function () {var charCode = 97 + Math.floor(Math.random() * 26);var speed = Math.ceil(Math.random() * 4);return {code: String.fromCharCode(charCode),speed: speed,y: 0,x: Math.floor(Math.random() * app.view.width),isHas: false //标记改对象是否需要创建，创建后true，不需要每次都创建}};
4、数组变量
var showArr = []; //每次随机创建文字位置var txtoObjArr = []; // 在下边用来存储，Text对象，，下边看
随机产生文字 放到showArr数组中：
showArr.push(
getRandom()
);
// {x: 100, y:0, code: 'b' ,isHas: false}
txtoObjArr 里边存放的 new PIXI.Text();每次都会产生新的对象。判断该对象是否已创建 isHas,存在直接使用，否则创建
5、添加舞台
app.stage.addChild(txtoObjArr[j]);
6、让 txtoObjArr 里边的每个对象动起来（txtoObjArr 里边存放的是new PIXI.Text）, 到画布底边销毁对象
for(var k = 0; k < txtoObjArr.length; k ++){console.log(txtoObjArr)// app.stage.addChild(txtoObjArr[k]);txtoObjArr[k].x = showArr[k].x;txtoObjArr[k].y = showArr[k].y;txtoObjArr[k].text = showArr[k].code;// 销毁对象if(txtoObjArr[k].y >= app.view.height){txtoObjArr[k].destroy();txtoObjArr.splice(k,1);showArr.splice(k, 1); // 移除数组中元素 }}
7、键盘按下去舞台元素消失（数组移除操作）
function keyEvent(ev){for(var i= 0; i < showArr.length; i++){if(showArr[i].code ==ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code){showArr[i].text ='';txtoObjArr[i].text='';showArr.splice(i,1);txtoObjArr.splice(i,1);}}}
本示例
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>test2</title><script src="pixi.min.js"></script>
</head>
<body><script>let app = new PIXI.Application({width: 526,height: 526})document.body.appendChild(app.view);// 字体样式let style = new PIXI.TextStyle({fontFamily: "Arial",fontSize: 36,fill: "white",stroke: '#ff3300',strokeThickness: 4,dropShadow: true,dropShadowColor: "#000000",dropShadowBlur: 4,dropShadowAngle: Math.PI / 6,dropShadowDistance: 6,});// 创建随机字母对象var getRandom = function () {var charCode = 97 + Math.floor(Math.random() * 26);var speed = Math.ceil(Math.random() * 4);return {code: String.fromCharCode(charCode),speed: speed,y: 0,x: Math.floor(Math.random() * app.view.width),isHas: false}};// 字母数组var showArr = [];setInterval("createArry()", 100);
// createArry();var txtoObjArr = [];function createArry(){if(Math.random() > 0.9){showArr.push(getRandom());
// console.log(showArr);}// 元素运动for(var i = 0; i< showArr.length; i++){showArr[i].y += 1;}// 创建元素for(var i = 0 ;i < showArr.length; i++){if(showArr[i].isHas == false){ // 创建文字对象var txtObj = new PIXI.Text("Hello Pixi!", style);showArr[i].isHas = true;
// app.stage.addChild(txtObj);
// txtObj.x = showArr[i].x;
// txtObj.y = showArr[i].y;
// txtObj.text = showArr[i].code;txtoObjArr.push(txtObj);for(var j =0 ;j <txtoObjArr.length; j++){app.stage.addChild(txtoObjArr[j]);}}}// 执行对象数组for(var k = 0; k < txtoObjArr.length; k ++){console.log(txtoObjArr)// app.stage.addChild(txtoObjArr[k]);txtoObjArr[k].x = showArr[k].x;txtoObjArr[k].y = showArr[k].y;txtoObjArr[k].text = showArr[k].code;// 销毁对象if(txtoObjArr[k].y >= app.view.height){txtoObjArr[k].destroy();txtoObjArr.splice(k,1);showArr.splice(k, 1); // 移除数组中元素}}}function keyEvent(ev){for(var i= 0; i < showArr.length; i++){if(showArr[i].code ==ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code){showArr[i].text ='';txtoObjArr[i].text='';showArr.splice(i,1);txtoObjArr.splice(i,1);}}}window.addEventListener("keyup", keyEvent);
// app.ticker.add(function (delta) {
// createArry();
// });</script>
</body>
</html>
