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

我建议您只需存储以下信息：

<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);

Answer 2

我打算在这里打破你的模型，从长远来看，建议看起来简单对我来说足够了（至少比你在这里更简单）。

使用HTML标记存储单词的问题是：

它是HTML ---浏览器必须解析它，然后不显示它，因为你有<ul>元素为display:none（它只是排序浪费精力）和
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>属性，而只是使用它的文本值。< / p>

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

Answer 3

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

Answer 4

您可能还想考虑一下您可以使用哪种服务器端技术。

如果你必须通过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经典的例子，我相信你会发现那些特定于你使用的平台的其他人。

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

Answer 5

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

表格：

<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的表。

Answer 6

我认为你可以在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函数的内容添加新的子条目。

Answer 7

如果您可以使用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>

在游戏中添加新单词

7 个答案:

修改