logo标签列表

向游戏中添加新单词

javascriptjquery
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>

感谢您

1
为什么要使用“file:///C:/”这样的路径呢？难道这个应用程序不会在互联网上运行吗？另外，你们使用的是哪种服务器端语言？ - Undefined
是的，但这只是我制作@Sam时的临时措施。 - sMilbz
我不认为这是“服务器端”@sMilbz--顺便说一句，我建议你为他们构建一个界面来完成这个任务。 - zinking
7个回答
3
我要打破一下你的想法，建议使用一种对我来说看起来比你这里要简单的东西（至少比你这里看起来简单）。
使用HTML标记存储单词的问题在于：
1. 它是HTML --- 浏览器将不得不解析它，但是由于您将`
    `元素设置为`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。
    将该文件加载到您的页面中，并让脚本从中读取。相对于从DOM解析和读取相同信息，从JS对象读取更加容易和快速。此外，标记更加紧凑，您不会误用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>
唯一的问题是他们明确告诉我它必须能够适应HTML。 - sMilbz
那你最好将这些细节添加到你的问题中，因为听起来这会严重限制你的选择。 :) - Richard Neil Ilagan
我认为应该归功于Richard。我还认为数据应该以JSON格式呈现（可能在稍后从$.getJSON()调用中获取）。 - AardVark71
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);
我该如何告诉程序所有文件都来自一个文件夹，以便我可以仅缩写音频为“mum.wav”，因为目前我无法这样做？@kannix - sMilbz
有不同的可能性。我会在你实际播放声音文件的地方来实现它。所以你只需加载数据音频值，并将其附加到默认路径字符串即可。 - kannix
除了你的问题之外，在HTML标记中存储和管理所有单词似乎是一个不好的想法。你应该使用数据库或配置文件来处理。也许你可以在GitHub上托管整个项目，以便更好地了解你的代码？ - kannix
好的，为什么不直接将您的ul列表数据存储在listOfWords数组中呢？ - kannix
因为需要通过HTML添加东西，而不是通过javaScript/JQuery @kannix。 - sMilbz
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。技术并不总是能替代简单的数据输入。
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 );
    }
?>

当然，你的数据库应该有一个存储这三个值加上一些ID的表格。
2
你必须使用attr()来存储图片在默认位置。这里他们解释了存储图片的默认位置。
你能否给我一个例子？@user1621335 - sMilbz
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函数来添加新的子条目。

他没有要求使用JS方法将一些元素附加到DOM中，此外他使用jQuery，因此可以使用.append("<li>i'm an example</li>")。 - kannix
他似乎想让他的朋友更容易地向声音/图片列表中添加新条目。拥有一个带有3个字段和一个“添加”按钮的页面意味着他只需要添加相关信息，页面就可以动态更新XML。不需要点踩。 - Jon
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接