0

在我的拼写游戏中，新单词会一直添加，所以总是有新的单词可供选择。

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

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

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

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

这是最好的方法吗？

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

这是我目前存储单词，声音和图像的方式...

4

1 回答 1

1

因此，带有“点亮”的字母表示要拼写的单词的表是我们正在尝试修复的位，对吗？

你想让单词“换行”到那张桌子的宽度吗？

我看到您正在从每个<td>s 'data-word=' 属性中获取数据 - 您可以轻松地将其归因于 html5 中的 div。它必须是一张桌子有什么特别的原因吗？否则，您可以使用具有固定宽度的包装 div 并将<td>s 替换为子 div 设置 float:left - 这些将自动“换行”，而不管最后一行与任何给定单词的字母的位置无关 - 即，它会打破新行。

<style>
    .letters_wrap{
        width:500px;
        height:auto;
        ...
     }

     .letter{
        width:50px;
        height:50px;
        float:left;
        ...
    }

</style>

<div class="letters_wrap">
    <div class="letter" id="letter_1" data-word="shin">s</div>
    <div class="letter" id="letter_1" data-word="shin">h</div>
    <div class="letter" id="letter_1" data-word="shin">i</div>
    <div class="letter" id="letter_1" data-word="shin">n</div>
</div>

让我知道我是否至少对问题的正确性以及您要实现的目标有所了解。

小号

更新

@m0onio - 在演示页面中，我绑定了将 php 文件（以及单词列表）加载到按钮的函数。

$(document).ready(){}一旦 DOM 可用，您将在函数中执行该函数，使包含单词列表的 javascript 数组可用。

您需要编写一个 javascript 函数（包含在结束</body>标记之前）来处理网格中子 div 的构造，并从加载 php 文件（wordlist）的 .load() 的回调函数中调用它。

要附加声音和图像，我还会将该信息包含在 txt 文件中，以便文件的内容可以运行：word | 图片文件名 | 声音文件名，然后当您遍历数组时，您知道每个第一个元素是单词，第二个相关图像是第三个声音文件等。然后使用 jquery 将结果元素（子 div）附加到它的父容器。有道理？

于 2012-09-04T11:08:38.773 回答