在javascript中加载和稍后引用纹理图块的最有效方法是什么？答案

【问题标题】：What's the most efficient way of loading and later referencing texture tiles in javascript?在javascript中加载和稍后引用纹理图块的最有效方法是什么？
【发布时间】：2017-01-14 13:02:45
【问题描述】：

最近我开始制作一个简单的平台游戏，以此来学习 pixi.js 和 javascript 中的面向对象。目前，我将级别保存在一个文本文件中，如下所示：

11111111111
10001200001
10601201001
10104001551
13331111111

每个数字对应不同的图块，例如。 1 = 实心、3 = 尖峰、5 = 开关等。

由于每个图块都有自己的（通常是唯一的）属性，我如何构建我的代码，以便创建和引用图块尽可能简单和容易？每个 tile 应该有自己的构造函数，还是应该只创建一个接受大量参数的构造函数？每个渲染块应该是它自己的对象，还是有任何更简单的方法来引用每个图块？

如果我需要提供更多信息，请务必告诉我。谢谢！

【问题讨论】：

标签： javascript class object pixi.js

【解决方案1】：

顺便说一句，你的关卡使用 ascii 字符，这样更容易阅读。

就我个人而言，我为每一个非常不同的图块使用了一个类，但如果你创建一个 SUPER 与另一个相似的图块，只需创建一个与两者都相似的类，并且那些类似的图块可以是类扩展。例如，我有一个 Enemy 类，它有许多子类：敌人类型。我有一个名为Enemy 的子类Basic，它是一个基本敌人，但我也有一个名为Machine_Gun 的子类，它的射击速度更快。

要读取关卡数据，只需使用 switch case：

for(var y = 0; y < levels[level_number]; y++) {

    for(var x = 0; x < levels[level_number][y]; x++) {

        switch(levels[level_number][y][x]) {

            case "#": floor.push(new Floor(x * 20, y * 20)); break;

            case "O": coins.push(new Coin(x * 20, y * 20)); break;

            case "@": player.y = (x * 20) - 1; player.x = (y * 20) - 1; break;

            case "&": monsters.push(new Basic(x * 20, y * 20)); break;

            case "%": monsters.push(new Machine_Gun(x * 20, y * 20)); break;

            default: break; // something else like air.

        }

    }

}

那么，我的等级可以是这样的：

levels = [

    [

        "##########", // MUCH easier to understand (for me at least)
        "#OO     %#",
        "###     ##",
        "# @     &#",
        "##########"

    ], [

        "###############",
        "#           & #",
        "#          ####",
        "#             #",
        "#     ###     #",
        "#           O #",
        "# @        ####",
        "####          #",
        "#O     %   %  #",
        "###############"

    ]

];

就这样，您可以轻松创建关卡。

【讨论】：