在游戏中添加新单词

Question

在我的拼写游戏中,新单词将一直添加,因此总会有新的拼写单词选择.

添加到游戏中的每个单词对图像具有"src",并且声音将提示用户在游戏中获得正确的拼写.

当我完成游戏的制作时,添加新单词的工作归功于我的一位同事.这意味着他将不得不为pic和音频以及单词添加链接.

由于他们对这类事情知之甚少,我想让他尽可能容易地添加图像和声音,当我添加单词时我想创建一个默认路径到共享位置,他将存储所有这些东西.

通过这种方式,他可以输入单词"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文件加载到您的游戏中，它就会完美运行。但是，如果用户还想添加新单词（例如，动物单词），那么他们（您）只需加载辅助文件来扩充您的基本单词列表。

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

编辑

如果您确实肯定最终答案必须使用 HTML，我建议您删除该data-word属性<li>，而只使用它的文本值。

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