javascript - 为游戏添加新词

Question

在我的拼写游戏中，新单词会一直添加，因此总是有新的单词可供拼写。

添加到游戏中的每个单词都有一个图像的“src”和提示用户在游戏中正确拼写的声音。

当我完成游戏制作后，添加新词的工作就交给了我的一位同事。这意味着他必须为图片和音频以及文字添加链接。

由于他们对这类事情知之甚少，我想让他在添加单词时尽可能轻松地添加图像和声音我想创建一个默认路径到一个共享位置，他将在其中存储所有内容这东西。

这样，他只需输入“bug”作为单词，“.bug-pic”作为图片，“.bug-audio”作为声音，这样他就可以轻松地添加到 HTML 中。

这是最好的方法吗？

他们输入这些内容的最简单方法是什么？

我现在是这样存储文字、声音和图像的……

<ul style="display:none;" id="wordlist">

    <li data-word="mum" data-audio="file:///C:/smilburn/AudioClips/mum.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

    <li data-word="cat" data-audio="file:///C:/smilburn/AudioClips/cat.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>

    <li data-word="dog" data-audio="file:///C:/smilburn/AudioClips/dog.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>

    <li data-word="bug" data-audio="file:///C:/smilburn/AudioClips/bug.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>

    <li data-word="rat" data-audio="file:///C:/smilburn/AudioClips/rat.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>

    <li data-word="dad" data-audio="file:///C:/smilburn/AudioClips/dad.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>

  </ul>

谢谢

Answer 1

我将在这里稍微打破你的模式，并建议一些看起来简单的东西，从长远来看对我来说足够了(至少，比你这里的简单)。

使用 HTML 标记来存储单词的问题在于:

1. 它是 HTML --- 浏览器将不得不解析它，但是随后不会显示它，因为你有 <ul>元素为 display:none (这只是一种浪费的努力)，并且
2. XML(或 HTML，无论哪个)非常臃肿，因为需要大量文本来表示信息。如果您要玩拼写游戏，我假设您会有成百上千个这样的单词，并且您的单词的 HTML 表示将是大量的带宽膨胀。

所以!这是我的建议:

// create an external JS file to store your words,
// let's say, [words.js].

// then let's just store your words in an array
var words = [
    { word : "foo" , audio : "file:///C:/smilburn/AudioClips/foo.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" },
    { word : "bar" , audio : "file:///C:/smilburn/AudioClips/bar.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" },
    { word : "mum" , audio : "file:///C:/smilburn/AudioClips/mum.wav", pic : "http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png" }
];

它只是一个普通的 Javascript 数组，其中包含一组 Javascript 对象。每个对象都具有三个属性:word , audio和 pic .

将该文件加载到您的页面中，并从中读取脚本。遍历、使用和应用到您的页面将更容易和更快。来回读取 JS 对象通常比必须从 DOM 解析和读取相同信息更快。

此外，标记更紧凑，并且您不会 [滥用] HTML DOM 来做它(可能)不应该做的事情。

第三，它比 HTML 标记更有条理，看起来更清晰，我想这会让您的同事更容易更新和适应。

最后，这种方法的一个好处是将代码写入模块非常容易，因此您可以更轻松地处理诸如扩展/单词包之类的东西:

// something like this can work:

// [words.js]
var words = [
    // some base words
    { word : "foo", audio : "foo.wmv", pic : "foo.pic" }
    // ...
];

// [words.animals.js]
(function () {
    // do not do anything if the base [words.js] isn't loaded
    if (!words) { return; }

    // extend the base words
    words = words.concat([
        // new animal words!
        { word : "dog", audio : "bark.wmv", pic : "brian.jpg" }
        // ...
    ]);

})();

想法是，您可以加载 words.js文件到您的游戏中，它将完美运行。但是，如果用户还想添加新词(例如，动物词)，那么他们(您)可以只加载辅助文件来扩充您的基本词列表。

与 HTML 标记相比，使用 JS 对象更容易做到这一点。

编辑

如果您确实肯定final-answer must have to使用HTML，我建议砍掉data-word归因于你的<li>并只使用它的文本值。

<li data-audio="dog.wmv" data-pic="dog.jpg">dog</li>