2

我正在创建网络游戏，其中将在屏幕上显示 3 张图像，用户必须单击与单词匹配的图像（也在屏幕上）

到目前为止，我已经制作了一个包含图像和单词的 JavaScript 数组（从数据库中填充），并设法在屏幕上的 3 个单独的 div 中从数组中打印 3 个随机图像。

目前，我真的很难同时打印出三个“属于”屏幕上随机图像之一的图像。

这是我当前的代码：-

 <script>
  var items = [
  <?php
  $con = mysql_connect("localhost","*****","******");
  if (!$con) {
    die('Could not connect: ' . mysql_error());
  }
  mysql_select_db("learning_game", $con);
  $result = mysql_query("SELECT * FROM data");
  $first = true;


  while ($row = mysql_fetch_array($result)) {
    if (!$first) {
      echo ",";
    }
    $first = false;
    echo "{name:'" . $row['word'] . "',image:'" . $row['image'] ."'}";
}
  mysql_close($con);
  ?>    
  ];
for (var i = 0; i < items.length; i += 1) {

  }  

   document.write("<br /> <br /> <br />");





 console.log(items);
 top.items = items;

 var images = new Array();
  var list = document.getElementsByTagName('div')[0];
   for(i = 0; i < 3; i++) {

         // Choose a random item and remove it from the array
       var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

      // Create the image element and set its src attribute
       images[i] = document.createElement('img');
        images[i].src = item.image;

      // Add it to your container element
   }

       document.getElementById("one").appendChild(images[0]);
       document.getElementById("two").appendChild(images[1]);
        document.getElementById("three").appendChild(images[2]);

     </script>

我希望总共有 4 个 div，每个图像 1 个 div，最后一个 div 用于链接/属于其中一个图像的单词。

JavaScript 数组看起来像这样：-

    var items = [
        {name:'Coch',image:'upload/coch.png'},                                                                           {name:'Glas',image:'upload/glas.png'},
        {name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},
        {name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},
        {name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},
        {name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},
        {name:'Piws',image:'upload/piws.png'}      ];

名称是“词”。image 是文件系统中图像的链接。

任何帮助都会很棒，在此先感谢您。

4

2 回答 2

0

只需创建一个新数组names并在选择图像时将三个名称添加到其中。然后使用相同的随机代码来选择其中一个。

…
var names = new Array()
…
    images[i].src = item.image;
    names[i] = item.name;
…
var name_to_display = names[Math.floor(Math.random() * 3)];
于 2013-03-06T18:11:41.020 回答
0

为什么不使用splice或修改原始数组，而不是将随机选择的项目的索引存储到一个新数组中（在确保它尚未被选择之后）？

此外，与其为每个图像都设置一个容器，为什么不让它们一个接一个地流动（当然我真的不知道你最终想要做什么）？

这是一个演示这一点的函数。在 JS Fiddle 中查看此操作或与全屏结果交互。

（如果您不想这样做，我很抱歉使用 jQuery；通过使用库为您提供工作演示更容易。）

function imageReset() {
   var selected, img,
      imageContainer = $('#images').empty();
   currentImages = [];
   while (currentImages.length < 3) {
      selected = Math.floor(Math.random() * items.length);
      if (currentImages.indexOf(selected) === -1) {
         currentImages.push(selected);
      }
   }
   selectedImage = currentImages[Math.floor(Math.random() * 3)];
   $('#word').empty().html(items[selectedImage].name);
   $.each(currentImages, function(i, imageIndex) {
       img = $('<img>').attr({
           src: items[imageIndex].image,
           width: "200",
           height: "200"
       });
       if (imageIndex === selectedImage) {
          img.data('correct', true);
       }
       img.appendTo(imageContainer).on('click', imageClick);
   });
}

这是最终页面的预览：

图像识别器 JS 小提琴

关于不使用库的注意事项：

  • 最棘手的部分将是确定是否点击了正确的图像。您可以使用诸如“数据正确”之类的扩展属性来做到这一点，但这可能很难跨浏览器进行。我使用了 jQuery 的数据存储，ala data()。您也可以，而不是将图像专门标记为所选图像，而是检查图像本身的“src”，然后使用它，循环遍历currentImages数组以查找它是哪个原始项目以及它是否是正确的。
  • $.each()循环遍历一个数组。你可以用for (i = 0, l = arr.length; i < l; i += 1) {}.
  • empty()删除元素的所有内容。您可以简单地删除第一个孩子，直到没有孩子为止。
  • $('<img>')做同样的事情createElement('img')。

我强烈推荐使用图书馆。除了“我只想”之外，我看不出有什么理由可以避免。即使使用库，您仍然可以通过研究底层代码来学习普通的 javascript 方法。坦率地说，如果我是一名软件开发企业主，我会要求我的初级 javascript 程序员使用该库，因为编码速度和质量会高得多。他们可以而且也许最终应该学会如何以“老式”的方式来做这件事，但与此同时，我不希望他们浪费时间。

于 2013-03-06T22:04:21.467 回答