5

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

添加到游戏中的每个单词都有一个图像的“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>

谢谢

4

7 回答 7

3

我建议您简单地存储这样的信息：

<li data-word="mum" data-audio="mum.wav" data-pic="/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

在阅读完你的 jsFiddle 之后，我建议你创建一个这样的 playAudio 函数：

function playAudioFile (audioFileName) {
    audioFileName = "http://www.wav-sounds.com/cartoon/" + audioFile;
    $("#mysoundclip").attr('src', audioFileName);
}

之后你可以替换这个：

$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.play();

通过这样的事情：

playAudioFile(listOfWords[rndWord].audio);
于 2012-08-31T10:33:28.747 回答
3

我将在这里打破你的模式，并建议一些从长远来看对我来说足够简单的东西（至少，比你这里的更简单）。

使用 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>
于 2012-09-03T13:04:51.297 回答
2

您必须使用attr()将图像存储在默认位置。在这里，他们解释了存储图像的默认位置。

于 2012-08-29T09:07:59.097 回答
2

您可能还需要考虑您将拥有哪些服务器端技术。

如果您必须通过 html 添加选项，那么您可以在页面的该部分执行的操作是让服务器动态生成 html 元素。

'ASP Classic example

<%
set fs = server.createObject("scripting.filesystem")
set folder = fs.getFolder("your path here")
for each file in folder.getFiles("*.wav")
 strWord = left(file.name, length(file.name)-4)
%><li data-word="cat"
    data-audio="path/to/folder/<%=strWord%>.wav"
    data-pic="path/to/folder/<%=strWord%>.png"></li>
<%
next
%>

这只是一个 asp 经典示例，我相信您会发现其他特定于您使用的平台的示例。

但基本上......如果你想让它成为一个即插即用的操作，你必须在服务器上告诉输出页面什么是可用的。否则你可能会像以前一样做 html。技术并不总是会取代普通的数据输入。

于 2012-09-04T20:28:21.573 回答
2

好吧，在我看来，您可以为您的同事使用数据库、服务器端脚本和表单。创建一个表单，他将使用该表单将信息上传到服务器并将路径存储到数据库中。

表格：

<form method="POST" action="myscript.php" enctype="multipart/form-data">
    <p>Word:<input type="text" name="my-word" id="my_word"></p>
    <p>Audio:<input type="file" name="audio" id="my_audio" /></p>
    <p>Picture:<input type="file" name="picture" id="my_picture" /></p>
    <p><input type="submit" name="submit" value="Submit" /></p>
</form>

剧本：

<?php
    $conn = mysql_connect("your_host", "your_user", "your_pass") or die (mysql_error());
    mysql_select_db("your_database", $conn) or die (mysql_error());

    if( ( $_FILES[ 'audio' ][ 'error' ] > 0 ) || ( $_FILES[ 'picture' ][ 'error' ] ) ){
        echo "Error" . "<br />";
    }
    else{
        move_uploaded_file($_FILES["audio"]["tmp_name"], "your/upload/directory/for/audio/" . $_FILES["audio"]["name"]);
        move_uploaded_file($_FILES["picture"]["tmp_name"], "your/upload/directory/for/images/" . $_FILES["file"]["name"]);
        mysql_query( 'INSERT INTO your_table ( word, audio, image ) values ( "' . $_POST[ 'word' ] . '", "' . $_FILES[ 'audio' ][ 'name' ] . '", "' . $_FILES[ 'picture' ][ 'name' ] . '" )', $conn );
    }
?>

当然，您的数据库应该有一个存储这 3 个值和一些 id 的表。

于 2012-09-07T03:30:59.417 回答
1

我认为您可以在 javascript 中将更多条目添加到这样的列表中：

function addLI(id){
var Parent = document.getElementById(id);
var NewLI = document.createElement("LI");

NewLI.innerHTML = "this is a test";

Parent.appendChild(NewLI);
}

我从这里找到的：http: //bytes.com/topic/javascript/answers/520885-add-new-list-item

我建议为您的朋友添加名称、位置和图片的输入字段，以便添加更多条目，然后使用类似这个 js 函数的东西来添加新的子条目。

于 2012-08-31T10:40:38.247 回答
0

如果您可以使用 PHP 访问服务器，我建议将所有项目放在一个数组中，然后循环遍历它们。

我在这里写了一个例子：

<?php
    $wordsArray = array(
            array('word'=> 'randomword' , 'audio' => 'test.mp3', 'picture' =>'pic.jpg'),
            array('word'=> 'randomword2' , 'audio' => 'test2.mp3', 'picture' =>'pic2.jpg')
        );

        $html = '';
        foreach($wordsArray as $word){
            $html .= '<li data-word="'.$word['word'].'" data-audio="'.$word['audio'].'" data-pic="'.$word['picture'].'"></li>';
        }
?>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <ul>
                <?php echo $html; ?>
            </ul>
        </body>
    </html>
于 2012-09-07T09:01:02.040 回答