ランダムに複数の画像を生成する

Question

私は3つの画像を配列に入れてランダムに生成するためにインデックスをランダム化しますが、それぞれの画像を4回生成したいと思います。これを行う最も効率的な方法は何でしょうか？

編集（フルコード）：

var image_array = ["image1.png", "image2.png", "image3.png"]; 

function set_page() 
{ 
    var table = document.getElementById("grid"); 

    if(table != null) 
    { 
     for(var i = 0; i < table.rows.length; i++) 
     { 
      for(var j = 0; j < table.rows[i].cells.length; j++) 
      { 
       table.rows[i].cells[j].onclick = function() { 
        click_cell(this); 
       } 

       //table.rows[i].cells[j].style.backgroundImage = "url('../images/back.png')"; 

       add_cell_image(table.rows[i].cells[j]); 

      } 
     } 
    } 
} 

function click_cell(cell) 
{ 

} 

function add_cell_image(cell) 
{ 
    for(var i = 0; i <= image_array.length; i++) 
    { 
     for(var j = 0; j <= image_array.length; j++) 
     { 
      var index = create_values(); 

      cell.innerHTML = "<img class='cell_image' align='middle' width='90' height='90' src ='../images/" + image_array[index] + "'/>"; 
     } 
    } 
} 

function create_values() 
{ 
    return Math.floor(Math.random() * image_array.length); 
} 

Answer 1

あなたはすべてのインデックスとshuffleそれを含む配列を使用することができます。

<div id="cell"/> 

<script> 
images = ["img1", "img2", "img3"]; 

/** 
* Shuffles array in place. 
* @param {Array} a items The array containing the items. 
*/ 
function shuffle(a) { 
    var j, x, i; 
    for (i = a.length; i; i--) { 
     j = Math.floor(Math.random() * i); 
     x = a[i - 1]; 
     a[i - 1] = a[j]; 
     a[j] = x; 
    } 
} 

function range(number) { 
    return Array.apply(null, Array(number)).map(function (_, i) {return i;}); 
} 

function create_image(image_source) { 
    var img = document.createElement('img'); 
    img.src = image_source; 
    img.classList.add('cell_image'); 
    img.align = 'middle'; 
    img.height = '90'; 
    img.width = '90'; 
    return img; 
} 

function add_cell_image(cell) { 
    indices = range(images.length * 4); 
    shuffle(indices); 
    for (let i = 0; i < indices.length; i++) { 
     image_source = "../images/" + images[indices[i] % images.length]; 
     image = create_image(image_source); 
     cell.appendChild(image); 
    } 
} 

cell = document.getElementById('cell') 
add_cell_image(cell); 
</script> 

Answer 2

は、ここで一つの解決策です。最もエレガントではありませんが、それはあなたを始めなければなりません。

考え方は、オプションの配列を作成することです。画像の最初のセットをX回連結します。元の質問では、各画像を4回繰り返したいと言っていました。そこで、最初の配列を4回連結して配列のオプションを作成します。

このオプション配列から、.sliceを使用してランダム要素を選択すると、options配列からそのオプションが削除されます。 options配列が空になるまでこれを続けます。

var image_array = [1, 2, 3]; 
 
var options = create_options(image_array, 4); 
 

 
function set_page(table, options) { 
 
    if (table != null) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
     for (var j = 0; j < table.rows[i].cells.length; j++) { 
 
     var randIndex = Math.floor(Math.random() * options.length); 
 
     var item = options.splice(randIndex, 1)[0]; 
 
     var imgEl = create_image(item); 
 
     table.rows[i].cells[j].appendChild(imgEl); 
 
     } 
 
    } 
 
    } 
 
} 
 

 
function create_image(image_id) { 
 
    var imgEl = document.createElement('img'); 
 
    imgEl.src = "https://via.placeholder.com/350x150?text=" + image_id; 
 
    imgEl.classList.add('cell_image'); 
 
    imgEl.height = '90'; 
 
    imgEl.width = '90'; 
 
    return imgEl; 
 
} 
 

 
function create_options(image_array, N) { 
 
    var options = []; 
 

 
    for (var i = 0; i < N; i++) { 
 
    options = options.concat(image_array); 
 
    } 
 

 
    return options; 
 
} 
 

 
set_page(document.getElementById('grid'), options);

<table id="grid"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>