Podwójne występowanie obrazka

Question

Witam,

Chce zrobić grę w której będziemy szukać takich samych obrazków. Jeden obrazek musi pojawić się dwa razy, nie mniej nie więcej, w losowych miejscach w tabeli, żeby każda gra była inna. Tutaj zaczyna się problem, o ile wiem jak losowo wybrać obrazek, to nie wiem jak zrobić żeby pojawiał się dokładnie 2 razy. 

Oto mój kod:

---

function memory() {
    
    var t = document.createElement('table');
    document.getElementsByTagName('main')[0].appendChild(t);
    
    var table = document.getElementsByTagName('table')[0];
    
    var img = ["0.png", "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png"];
    
    for ( var x=0; x<4; x++ ) {
    
        var row = table.insertRow(x);
        
        for ( var y=0; y<4; y++ ) {
            
            var cell = row.insertCell(y);    
        
        }
    
    }
    
    
    function images() {
        
        for ( var i=0; i<16; i++ ) {
            
            var random = Math.round( Math.random() * 7 );
                    
            var td = document.getElementsByTagName('td')[i];
                        
            td.innerHTML = '<img src="'+ img[random] +'">';
            
         }
    }
    
    images()
    
}

memory();

---

 

Comments

Kod do kolorowania korolowania.

---

Poprawione, sorry :)

---

W pętlach tworzysz globalne zmienne (pełniące rolę iteratorów), nie rób tak - deklaruj je słówkiem var. Czyli for (var i = 0 /*reszta kodu*/)

td.innerHTML = '<img src="'+ img[random] +'">';

Czy to jest kod, który umieszcza obrazek w komórce tabeli?

---

Tak, zgadza się. random daje liczby od 0 do 7, dzięki temu mogę wyciągnąć obrazek z tablicy i wrzucić do td.

Oczywiście słuszna uwaga co do deklarowania zmiennych.

---

W pętli, wewnątrz funkcji images(), która wykonuje się 15 razy, umieszczasz randomowe obrazki do komórek tabeli - dobrze rozumiem? I chcesz aby wśród tych 15 rozmieszczonych obrazków, 1 z nich był dwukrotnie wstawiony - tak?

Jeśli tak, to możesz np. przed pętlą (czyli na górze funkcji images()) umieścić sobie zmienną var additionalImage; i dla niej wylosować liczbę od 0 do 15. Następnie w pętli zapisać warunek

if (additionalImage === i)
{
  /* wstaw zdjęcie */
}

 Jeśli dobrze myślę, to w pętli dla jednej iteracji (wcześniej wylosowanej) wykona Ci wstawienie dodatkowego obrazka. Będzie to zawsze drugi obrazek.

Spróbuj i daj znać.

---

Pętla w funkcji images() wykonuje się 16 razy (od 0 do 15), więc mam 16 obrazków w tabeli 4x4. Chodzi o to żeby każdy obrazek powtórzył się 2 razy (w tablicy img mam ich 8) ale w losowych miejscach w tabeli.

Answer 1

funkcja images() jest skopana, wykonuje się 16 razy i za każdym wejściem w fora losuje randomową liczbę, dlatego masz kilka obrazków więcej niż dwa razy, a inne nie występują wcale. Możesz np. dać warunek który sprawdza czy liczba się nie wylosowała więcej niż 2 razy.

Comments

 warunek który sprawdza czy liczba się nie wylosowała więcej niż 2 razy.

No właśnie, tylko jak to zapisać?  Nie potrafię tego warunku skonstruować.

---

var img = ["0.png", "1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png"];
img = img.concat(img);

Array.prototype.shuffle = function() {
  var arrayLen = this.length, randomValue, tempValue;
  
  while (arrayLen !== 0) {
    randomValue = Math.floor(Math.random() * arrayLen);
    arrayLen -= 1;
    
    tempValue = this[arrayLen];
    this[arrayLen] = this[randomValue];
    this[randomValue] = tempValue;
  }
  return this;
};

function images(array) {
  for (var i=0, len=array.length; i<len; i++) {
    var td = document.getElementsByTagName('td')[i];
    td.innerHTML = '<img src="'+ array[i] +'">';
  }
}

images(img.shuffle());

 

---

Wielkie dzięki, działa dokładnie tak jak chciałem. Tylko z drugiej strony nie mam pojęcia jak to działa :P

Answer 2

Sprawdź taki kod:

function randomImage(i)
{
            var random = Math.round( Math.random() * 7 );                     
            var td = document.getElementsByTagName('td')[i];                         
            td.innerHTML = '<img src="'+ img[random] +'">';
}

function images()
 {
       var additionalImage = Math.floor(Math.random() * 16);  // losowa liczba od 0 - 16   

        for ( var i=0; i<16; i++ ) 
       {
            randomImage(i);   // to samo, co do tej pory tu sie wykonywalo, ale jako oddzielna funkcja
            if (additionalImage === i)  // dla jednej, losowej iteracji petli....
               randomImage(i); // ... wylosuj i umiesc jeszcze 1 obrazek
       }
}

[edit]

Poprawka, trzeba jeszcze przekazać i jako parametr do funkcji randomImage( i );

Comments

Postaram się Ci jeszcze raz wytłumaczyć o co mi chodzi :P

Mam 8 różnych obrazków i tabele 4 na 4, czyli 16 miejsc na obrazki. Każdy obrazek ma się powtarzać dokładnie 2 razy i w dodatku w losowych miejscach w tej tabeli (po każdym odświeżeniu strony obrazki są inaczej ułożone).

Jak na razie obrazki pojawiają się w różnych miejscach ale powtarzają więcej niż 2 razy lub nawet w ogóle ich nie ma.

Może obrazek jeszcze trochę rozjaśni sytuację.

Mimo wszystko dzięki za próbę pomocy :)

---

Nie podałeś kodu HTML, więc trudno na wyczucie zaproponować rozwiązanie.

Kod, który zaproponowałem, jak rozumiem powoduje:

Jak na razie obrazki pojawiają się w różnych miejscach ale powtarzają więcej niż 2 razy lub nawet w ogóle ich nie ma.

Zobacz (po kilku uruchomieniach skryptu) czy losowanie dla additionalImage przebiega prawidłowo, czyli losuje się liczba 0 - 15 (tak samo, jak w pętli masz).

Po drugie, testowo zmodyfikuj IFa, na:

if (additionalImage === i)  // dla jednej, losowej iteracji petli....
{      console.log('Dodatkowy obrazek dla iteracji: ', additionalImage); // pokaze CI sie losowy numer 'additionalImage', pwinien byc rowny iteratorowi
       randomImage(i); // 
}