2017-04-16 18 views
1

基本的に、いくつかの隠れた画像ペアが必要なメモリカードゲームを作成したいと考えています。私は関数を書いていますが、NaNを返します。さらに、配列のsrcがすでに2回存在するかどうかを調べる方法はわかりません。チェック値が配列javascriptで2回存在する場合

function createCards(ammount) { 
 
    const gameCards = document.createElement("div") * ammount; 
 
    for (let i = 0; gameCards.length - 1; i++) { 
 
     gameCards[i].className = "card.card--click"; 
 
     const gameCardFront = document.createElement("div"); 
 
     const gameCardBack = document.createElement("div"); 
 
     gameCards[i].appendChild(gameCardFront); 
 
     gameCards[i].appendChild(gameCardBack); 
 
     gameCardFront.className = "card__front"; 
 
     gameCardBack.className = "card__back"; 
 
     function randImg() { 
 
     const img = new Image(); 
 
     const imgArray = ["ball", "car", "fork", "spoon", "sun"]; 
 
     const gameArray = []; 
 
     for (let i = 0; i < ammount * 2 + 1; i++) { 
 
      const randomSrc = Math.floor(Math.random() * (imgArray.length)); 
 
      img.src = "img/" + imgArray[randomSrc] + ".png"; 
 
      img.alt = imgArray[randomSrc]; 
 
      gameArray.push(img); 
 
     } 
 
     return gameArray; 
 
     } 
 
     randImg(); 
 
     gameCardBack.appendChild(img); 
 
    } 
 
    return gameCards; 
 
    }; 
 
    createCards(8);

答えて

1
function createCards(ammount) { 
    const gameCards = [] 
    for (let i = 0; i < ammount; i++) { 
     const gameCard = document.createElement("div"); 
     gameCard.className = "card.card--click"; 
     const gameCardFront = document.createElement("div"); 
     const gameCardBack = document.createElement("div"); 
     gameCard.appendChild(gameCardFront); 
     gameCard.appendChild(gameCardBack); 
     gameCardFront.className = "card__front"; 
     gameCardBack.className = "card__back"; 
     function randImg() { 
      const uniqueSrc = {}; 
      const imgArray = ["ball", "car", "fork", "spoon", "sun"]; 
      const images = document.createElement("div"); 
      for (let i = 0; i < ammount * 2 + 1; i++) { 
       const randomSrc = Math.floor(Math.random() * (imgArray.length)); 
       const img = new Image(); 
       if (!uniqueSrc[randomSrc]) { 
        uniqueSrc[randomSrc] = randomSrc; 
        img.src = "img/" + imgArray[randomSrc] + ".png"; 
        img.alt = imgArray[randomSrc]; 
        images.appendChild(img); 
       } else { 
        i--; 
       } 
      } 
      return images; 
     } 
     const images = randImg(); 
     gameCardBack.appendChild(images); 
     gameCards.push(gameCard) 
    } 
    return gameCards; 
}; 

あなたのコードはいくつかのバグを持っているようです。それを修正して、今すぐ正常に動作します。

+0

はい、それは動作しますが、それは私が推測するクラスではないclassNameである必要があります。 2番目の関数はsrc "ball.png"を持つ画像のみを返します – Miqez

+0

classNameに変更することができます。 2つ目のことは、イメージ名は5つだけですが、期待している(量* 2)は約8で16となります。したがって、十分な数の名前を指定すると、完全に取得されます。 –

+0

はい、私はこのゲームの仕組みを作りたいと思っています。さらに画像を追加しますが、関数createCards(5)を呼び出してもsrc = "ball.png"という5つの画像を受け取ります。何故ですか? – Miqez

関連する問題