PIXI 下落文字消除(3)
2024-08-29 06:06:02
图片示例,简陋的图,记录下落过程,
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>
最新文章
- Linux进程间通信(九):数据报套接字 socket()、bind()、sendto()、recvfrom()、close()
- java中TreeSet集合如何实现元素的判重
- codeforces733D. Kostya the Sculptor 偏序cmp排序,数据结构hash,代码简化
- 常用 Git 命令清单(摘录)
- Centos6.4 安装NLTK
- Android——将图片加入到系统相册里面
- C# ASP.NET FILEUPLOAD详解
- 阿里云服务器(Win 2008 R2 Standard)安装MSSM 2008 R2之1033和2052问题
- hdu 1728
- squid客户端命令
- 原生javascript与jquery 的比较
- Vmware Vsphere WebService之vijava 开发(二)一性能信息的采集(实时监控)
- Android 插件化技术窥探
- Spring Cloud Alibaba基础教程:Nacos的数据持久化
- springmvc的异步处理
- 【18】观察者模式(Observer Pattern)
- 物联网架构成长之路(13)-SpringBoot入门
- mac console color setting
- Wannafly挑战赛27-A/B
- 996.icu 事件后