图片示例，简陋的图，记录下落过程，

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>

　　

PIXI 下落文字消除（3）的更多相关文章

  1. 趣味python编程之经典俄罗斯方块

    国庆期间闲不住,用python把经典俄罗斯方块实现了一遍,找到了些儿时的乐趣.因此突发奇想,打算用python写点经典又确实有趣的小程序形成系列.正统编程之余也给自己找点儿乐趣,换个角度写程序. 原计 ...

  2. pnd3

    这两天重写了,消除后本身的下落计算还有问题,新产生的块下落和消除已经OK了.消除算法真的很要命.最后还是回归最开始的想法,用递归的方式不断的SPREAD来得到消除的数据.快到月底了,得勤写写了,要不找 ...

  3. Luogu 1312 【NOIP2011】玛雅游戏 （搜索）

    Luogu 1312 [NOIP2011]玛雅游戏 (搜索) Description Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空 ...

  4. Noip 2011 Day 1 & Day 2

    Day 1   >>> T1   >> 水题一道 . 我们只需要 for 一遍 , 由于地毯是从下往上铺的 , 我们只需要记录该位置最上面的地毯的编号 , 每一次在当前地 ...

  5. iOS—图片编辑,文字下落动画的Demo

    仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...

  6. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. 如何消除类型是submit类型的按钮的默认文字 ‘确认提交’

    只需要加上value="" 即可.默认的文字就可以去掉了.

  8. js实现黑客帝国文字下落效果

    突然想到这个效果便想实现以下. 当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章, 效果可以查看博文中的给出的效果图.那 ...

  9. JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <l ...

随机推荐

  1. C# 关于接口与基类的理解（二者的区别）

    接口(接口的名称一般用大写字母I开头的)是把公共实例(非静态)方法和属性组合起来,以封装特定功能的一个集合.(其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致) 注意:使用接口可 ...

  2. cgroup初步分析（1）

    cgroup的功能和作用不废话,直说一下cgroup的几条设计准则,有了几条设计准则的约束,就比较容易理解其中的数据结构和函数,至于源代码cgroup.c,无非是两个内容,一是task_struct. ...

  3. Spring：配置文件

    首先是bean.xml,配置所有的bean,一般也叫applicationContext.xml,应用程序上下文.示例: <?xml version="1.0" encodi ...

  4. Win7下：编译器错误信息: CS0016

    解决办法: 原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: 来到C:/Windows目录,修改temp文件夹的属性. 在安全页设置IIS-IUSRS的权限,赋予修改.读取.写入等权 ...

  5. Bitnami WordPress无法修改MySQL root的默认密码的解决方法？

    今天准备修改Bitnami WordPress的MySQL root的默认密码,但是总是出现下面错误: ERROR 1045 (28000): Access denied for user 'root ...

  6. 定时器timer类

    timer类 Timer(定时器)是Thread的派生类,用于在指定时间后调用一个方法. 构造方法: Timer(interval, function, args=[], kwargs={})  in ...

  7. Jmeter_实现Excel文件导出到本地

    一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...

  8. 【SSO单点系列】（6）：CAS4.0 单点流程序列图（中文版）以及相关术语解释（TGT、ST、PGT、PT、PGTIOU）

    CAS 相关的内容好久没写了,可能下周会继续更新一些内容吧. 在上一篇中的单点流程序列图由于是从官网直接下载来的,上面都是英文,可能有的朋友看不懂,因此修改成中文的. PS:只修改了一个,第二个图明天 ...

  9. vSphere 安装操作系统

    0.找到 vSphere Client 安装文件并安装 1.创建完成EXSI.Openfiler - 磁盘创建 * - 网卡设置 2.openfiler LVM 3.EXSI of ISCSI 4.s ...

  10. 使用github和hexo搭建静态博客

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...