當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

PIXI 下落文字消除（3）

發布時間：2023/11/27 生活经验 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 PIXI 下落文字消除（3）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

圖片示例，簡陋的圖，記錄下落過程，?

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>

轉載于:https://www.cnblogs.com/congxueda/p/9328992.html

總結

以上是生活随笔為你收集整理的PIXI 下落文字消除（3）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。