预习下官网的知识。 及字母消除接上文
Pixi 精灵
Pixi拥有一个精灵类来创建游戏精灵。有三种主要的方法来创建它：
- 用一个单图像文件创建。
- 用一个 雪碧图 来创建。雪碧图是一个放入了你游戏所需的所有图像的大图。
- 从一个纹理贴图集中创建。（纹理贴图集就是用JSON定义了图像大小和位置的雪碧图）
你将要学习这三种方式，但是在开始之前，你得弄明白图片怎么用Pixi显示。
将图片加载到纹理缓存中
因为Pixi用WebGL和GPU去渲染图像，所以图像需要转化成GPU可以处理的版本。可以被GPU处理的图像被称作 纹理 。在你让精灵显示图片之前，需要将普通的图片转化成WebGL纹理。为了让所有工作执行的快速有效率，Pixi使用 纹理缓存 来存储和引用所有你的精灵需要的纹理。纹理的名称字符串就是图像的地址。这意味着如果你有从"images/cat.png"加载的图像，你可以在纹理缓存中这样找到他：
PIXI.utils.TextureCache["images/cat.png"]; 纹理被以WEBGL兼容的格式存储起来，它可以使Pixi的渲染有效率的进行。你现在可以使用Pixi的精灵类来创建一个新的精灵，让它使用纹理。
let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; let sprite = new PIXI.Sprite(texture); 但是你该怎么加载图像并将它转化成纹理？答案是用Pixi已经构建好的loader对象。
Pixi强大的loader对象可以加载任何你需要种类的图像资源。这里展示了怎么加载一个图像并在加载完成时用一个叫做setup的方法来使用它。
这里是一个完整的加载图像的代码。调用setup方法，并未加载的图像创建一个精灵。PIXI.loader .add("images/anyImage.png") .load(setup);function setup() { let sprite = new PIXI.Sprite( PIXI.loader.resources["images/anyImage.png"].texture );}
从精灵图（雪碧图）中创建精灵
你现在已经知道了怎么从一个单文件内加载图像。但是作为一个游戏设计师，你没准更经常使用 雪碧图（也被称之为 精灵图）。Pixi封装了一些方便的方式来处理这种情况。所谓雪碧图就是用一个单文件包含你游戏中需要的所有文件，这里就是一个包含了游戏对象和游戏角色的雪碧图。
下面是提取火箭，创建精灵
function setup() { //Create the `tileset` sprite from the texture let texture = TextureCache["images/tileset.png"]; //Create a rectangle object that defines the position and //size of the sub-image you want to extract from the texture //(`Rectangle` is an alias for `PIXI.Rectangle`) let rectangle = new Rectangle(192, 128, 64, 64); //Tell the texture to use that rectangular section texture.frame = rectangle; //Create the sprite from the texture let rocket = new Sprite(texture); //Position the rocket sprite on the canvas rocket.x = 32; rocket.y = 32; //Add the rocket to the stage app.stage.addChild(rocket); //Render the stage renderer.render(stage);}
使用一个纹理贴图集
纹理贴图集 就会显得很有用处，一个纹理贴图集就是一个JSON数据文件，它包含了匹配的PNG雪碧图的子图像的大小和位置。如果你使用了纹理贴图集，那么想要显示一个子图像只需要知道它的名字就行了。你可以任意的排序你的排版，JSON文件会保持他们的大小和位置不变。这非常方便，因为这意味着图片的位置和大小不必写在你的代码里。如果你想要改变纹理贴图集的排版，类似增加图片，修改图片大小和删除图片这些操作，只需要修改那个JSON数据文件就行了，你的游戏会自动给程序内的所有数据应用新的纹理贴图集。你没必要在所有用到它代码的地方修改它。
Pixi兼容著名软件输出的标准纹理贴图集格式。
"blob.png":{ "frame": {"x":55,"y":2,"w":32,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24}, "sourceSize": {"w":32,"h":24}, "pivot": {"x":0.5,"y":0.5}},
显示文本
let message = new PIXI.Text("Hello Pixi!"); app.stage.addChild(message); message.position.set(54, 96);
编写完简陋的效果图：代码往下看。。。。。。。。。。。。。。。。
效果图：
文字下落代码优化修改：
1、过程改成对象形式编程
2、添加图片预加载
3、落下文字替换成图片
4、添加得分及关数,达到目标分后进行下一关
5、添加血条字母下落而减少
6、每过一关，目标分数增加，下落速度增加
未完善
1、字母消除，添加爆炸效果
2、图片底边添加炮台，炮弹打击字母消失。（炮台根据字母坐标移动 ，炮台角度）
代码如下：
test2
结构
1、创建类函数
var dropDown = function(){
// code init
}
dropDown.prototype = { init: function(){ // 初始化 }, createHealthBar: function(){ // 创建血条 }, ..... }
var dDown = new dropDown(); dDown.init();