PIXI 下落文字消除(3)

2018/07/18 14:33
阅读数 45

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

 

 

 

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>

  

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部