2

3つの画像が画面に表示され、ユーザーが単語に一致する画像をクリックする必要があるWebゲームを作成しています（これも画面に表示されます）

これまでのところ、画像と単語（データベースから入力）のJavaScript配列を作成し、配列から3つの別々のdivで画面上の3つのランダムな画像を印刷することができました。

現時点では、画面に印刷されたランダムな画像の1つに「属する」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、および画像の1つにリンク/属する単語の最後の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を作成し、画像を選択するときに3つの名前を追加するだけです。次に、同じランダムコードを使用して、そのうちの1つを選択します。

…
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フィドル

ライブラリを使用しない場合の注意：

  • 最も難しい部分は、正しい画像がクリックされたかどうかを判断することです。「data-correct」などのexpando属性を使用してこれを行うことができますが、これはクロスブラウザーで行うのが難しい場合があります。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 に答える