在游戏中添加新单词

Posted 2023-03-16

【中文标题】在游戏中添加新单词

【英文标题】：Adding new words to the game

【发布时间】：2012-08-23 20:18:23

【问题描述】：

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

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

谢谢

【问题讨论】：

为什么要使用“file:///C:/”，这个应用程序不会上互联网吗？另外，您使用的是什么服务器端语言？

是的，但这只是暂时的，而我是@Sam

我看不出那是“服务器端”@sMilbz --BTW 我建议您为他们构建一个界面来执行此操作。

【参考方案1】：

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

使用 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，我建议从您的 <li> 中删除 data-word 属性，而只使用它的文本值。

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

【讨论】：

唯一的问题是他们明确告诉我它必须通过 html 来适应

那么你最好将这个细节添加到你的问题中，因为这听起来会严重限制你的选择。 :)

我认为应该归功于 Richard。我还认为数据应该以 json 格式提供（可能在后期来自 $.getJSON() 调用）。

【参考方案2】：

我建议，您只需像这样存储信息：

<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

有不同的可能性。我会在你实际播放声音文件的地方实现它。因此，您只需加载 data-audio 值并将其附加到具有默认路径的字符串

appart 从您的问题中存储和管理您在 html 标记中的所有单词似乎是一个坏主意。您应该为此使用数据库或配置文件。也许您可以在 github 上托管整个项目，以便我们更好地全面了解您的代码？

ok，为什么不把你的 ul list 的数据直接存入 listOfWords 数组呢？

因为需要通过 HTML 而不是 javaScript/JQuery @kannix 来添加东西

【参考方案3】：

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

【讨论】：

你能给我举个例子吗？ @user1621335

【参考方案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 经典示例，我相信您会找到其他特定于您使用的平台的示例。

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

【参考方案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 的表。

【参考方案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 函数的功能添加新的子条目。

【讨论】：

他没有要求使用 js 方法将一些元素附加到 dom，此外他使用 jquery，因此他可以使用 ´.append("我是一个例子 ")`

他似乎想让他的朋友可以轻松地将新条目添加到他的声音/图片列表中。拥有一个包含 3 个字段和一个“添加”按钮的页面意味着他所要做的就是添加相关信息，并且该页面可以动态更新 XML。不需要反对票。

【参考方案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>