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

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. Mac10.9下的libtiff编译

    libtiff介绍 libtiff下载 libtiff编译 libtiff介绍? 参考:http://en.wikipedia.org/wiki/Tiff libtiff下载 直接到官网下载:http ...

  2. System.Web.UI.Page事件执行顺序

    #region OnPreInit 第一步(显式重写,文章下面有隐式重写) protected override void OnPreInit(EventArgs e) { //检查 IsPostBa ...

  3. ubuntu 14.04编译安装xen4.4总结

    1. 安装环境 操作系统:ubuntu14.04 xen版本:xen4.4 2. 依赖包的安装 在安装xen之前先进行依赖包的安装,在不停得尝试之后,总结出以下需要安装的依赖包. sudo apt-g ...

  4. 转 XlsReadWriteII 的博文(自留参考)

    如何使用XlsReadWriteII在Delphi中读取Excel文件 XLSReadWriteII v5.20.01a for Delphi XE5 x32下载地址: http://download ...

  5. firefox 59 无法使用 pac 代理上网

    最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...

  6. css css预处理器

    CSS预处理器(css preprocessor) 1.less: 2.sass: 3.scss: 4.stylus 参考: http://hao.jser.com/archive/2507/ htt ...

  7. 2018年第九届蓝桥杯C/C++A组省赛(最后一题)

    第十题 付账问题   [题目描述]    几个人一起出去吃饭是常有的事.但在结帐的时候,常常会出现一些争执.    现在有 n 个人出去吃饭,他们总共消费了 S 元.其中第 i 个人带了 ai 元.幸 ...

  8. tomcat访问日志关闭

    在tomcat(实例)路径下[conf/server.xml]中修改,以下节点(注释掉该节点): tomcat catalina.out日志关闭 在tomcat(主目录)路径下[bin/catalin ...

  9. ST表略解

    题面 给定一个长度为\(N\)的数列,和\(M\)次询问,求出每一次询问的区间内数字的最大值. 对于30%的数据,满足: \(1≤N,M≤10\) 对于70%的数据,满足: \(1≤N,M≤10^5\ ...

  10. 为什么要使用MQ消息中间件?

    在面试大型互联网公司的时候,很可能会被问到消息队列的问题: 1.在何种场景下使用了消息中间件? 2.为什么要在系统里引入消息中间件? 3.如何实现幂等? 链式调用是我们在写程序时候的一般流程,为了完成 ...