カードマッチゲームの作成

-3

カードマッチングゲームを作成したいが、私は隠されているはずのイメージを表示する問題がある。カードをクリックすると、実際の画像の代わりに画像のパスが表示されます。ここでカードマッチゲームの作成

は、私が書かれているすべてのコードです：

<!DOCTYPE html> 
<html> 
<head> 

<title></title> 
<meta charset="utf-8" /> 

<style type="text/css"> 
    div#card_board 
    { 
     background: #ccc; 
     border: #999 1px solid; 
     width: 710px; 
     height: 600px; 
     padding: 24px; 
     margin: 0px auto; 
    } 

    div#card_board > div 
    { 
     background: url(cardQtion.jpg) no-repeat; 
     background-size: 100%; 
     border: #000 1px solid; 
     width: 114px; 
     height: 132px; 
     float: left; 
     margin: 10px; 
     padding: 20px; 
     font-size: 64px; 
     cursor: pointer; 
     text-align: center; 
    } 
</style> 

<script> 

    var cardArray = new Array(); 

    cardArray[0] = new Image(); 
    cardArray[0].src = 'cardA.jpg'; 

    cardArray[1] = new Image(); 
    cardArray[1].src = 'cardA.jpg'; 

    cardArray[2] = new Image(); 
    cardArray[2].src = 'cardB.jpg'; 

    cardArray[3] = new Image(); 
    cardArray[3].src = 'cardB.jpg'; 

    cardArray[4] = new Image(); 
    cardArray[4].src = 'cardC.jpg'; 

    cardArray[5] = new Image(); 
    cardArray[5].src = 'cardC.jpg'; 

    cardArray[6] = new Image(); 
    cardArray[6].src = 'cardD.jpg'; 

    cardArray[7] = new Image(); 
    cardArray[7].src = 'cardD.jpg'; 

    cardArray[8] = new Image(); 
    cardArray[8].src = 'cardE.jpg'; 

    cardArray[9] = new Image(); 
    cardArray[9].src = 'cardE.jpg'; 

    cardArray[10] = new Image(); 
    cardArray[10].src = 'cardF.jpg'; 

    cardArray[11] = new Image(); 
    cardArray[11].src = 'cardF.jpg'; 


    var cardVal = []; 
    var cardIDs = []; 
    var cardBackFace = 0; 

    Array.prototype.cardMix = function() 
    { 
     var i = this.length, j, temp; 
     while (--i > 0) 
     { 
      j = Math.floor(Math.random() * (i + 1)); 
      temp = this[j]; 
      this[j] = this[i]; 
      this[i] = temp; 
     } 
    } 

    function newBoard() 
    { 

     cardBackFace = 0; 
     var output = ""; 
     cardArray.cardMix(); 
     for (var i = 0; i < cardArray.length; i++) 
     { 
      output += '<div id="card_' + i + '" onclick="cardBackcard(this,\'' + cardArray[i].src + '\')"></div>'; 
     } 
     document.getElementById('card_board').innerHTML = output; 
    } 

    function cardBackcard(tile, val) { 
     if (tile.innerHTML == "" && cardVal.length < 2) { 
      tile.style.background = '#FFF'; 
      tile.innerHTML = val; 
      if (cardVal.length == 0) { 
       cardVal.push(val); 
       cardIDs.push(tile.id); 
      } else if (cardVal.length == 1) { 
       cardVal.push(val); 
       cardIDs.push(tile.id); 
       if (cardVal[0] == cardVal[1]) { 
        cardBackFace += 2; 

        cardVal = []; 
        cardIDs = []; 

        if (cardBackFace == cardArray.length) { 
         alert("Board cleared... generating new board"); 
         document.getElementById('card_board').innerHTML = ""; 
         newBoard(); 
        } 
       } else { 
        function card2Back() { 

         var card_1 = document.getElementById(cardIDs[0]); 
         var card_2 = document.getElementById(cardIDs[1]); 
        card_1.style.background = 'url(cardQtion.jpg) no-repeat'; 
         card_1.innerHTML = ""; 
        card_2.style.background = 'url(cardQtion.jpg) no-repeat'; 
         card_2.innerHTML = ""; 

         cardVal = []; 
         cardIDs = []; 
        } 
        setTimeout(card2Back, 700); 
       } 
      } 
     } 
    } 


</script> 

</head> 
<body> 
<div id="card_board"></div> 
<script>newBoard();</script> 
</body> 
</html>

出典

2016-04-15 Monzer

あなたはカンマで画像のタイトルを配置する必要があります。例えば、あなたは 'background：url（" picture.jpg "）;'を持っています。 – Zachariel

@ Zacharielこれらはカンマではなく引用符で、CSSでは必須ではありません。 – Barmar

この行のために起こっています： 'tile.innerHTML = val;' – Barmar

あなたが持っているいくつかの最適なコードよりも少ないと率直鉱山はその唯一のリファクタリングで、向上させることができる多くを持っている - 研究アップ。ことを考えると

は、ここにリファクタリングです：

私は本当にマークアップでイベントを嫌うので、私は右のコードにそのクリックハンドラの呼び出しを移動しました。
あなたのページにJavaScriptのセットが2つあるのはなぜですか？私は単にそれらを1つにまとめます（この最後の行を参照）。
イメージの配列は機能しませんでしたので、名前の配列を使用してイメージの配列を作成しました。要素の
挿入は私がtile.appendChild(cardArray[cardIndex]);を使用して、テキストとは異なっている代わりに

コード：

// create an array of card images 
var cardArray = []; 
var cards = ['cardA.jpg', 'cardB.jpg', 'cardC.jpg', 'cardD.jpg', 'cardE.jpg', 'cardF.jpg']; 
for (var i = 0; i < cards.length; i++) { 
    var im = new Image(); 
    im.src = cards[i]; 
    im.alt = cards[i]; 
    cardArray.push(im); 
    cardArray.push(im); 
} 

var cardVal = []; 
var cardIDs = []; 
var cardBackFace = 0; 

Array.prototype.cardMix = function() { 
    var i = this.length, 
    j, temp; 
    while (--i > 0) { 
    j = Math.floor(Math.random() * (i + 1)); 
    temp = this[j]; 
    this[j] = this[i]; 
    this[i] = temp; 
    } 
} 

function newBoard() { 
    cardBackFace = 0; 
    var output = ""; 
    cardArray.cardMix(); 
    for (var i = 0; i < cardArray.length; i++) { 
    output += '<div id="card_' + i + '" class="cardcontainer" data-card="' + i + '"></div>'; 
    } 
    document.getElementById('card_board').innerHTML = output; 
    var classname = document.getElementsByClassName("cardcontainer"); 
    for (var i = 0; i < classname.length; i++) { 
    classname[i].addEventListener('click', cardBackcard, false); 
    } 
} 

function card2Back() { 
    var card_1 = document.getElementById(cardIDs[0]); 
    var card_2 = document.getElementById(cardIDs[1]); 
    card_1.style.background = "url('cardQtion.jpg') no-repeat"; 
    card_1.innerHTML = ""; 
    card_2.style.background = "url('cardQtion.jpg') no-repeat"; 
    card_2.innerHTML = ""; 
    cardVal = []; 
    cardIDs = []; 
} 

function cardBackcard() { 
    // these used to be in the HTML as parameters, I refactored to pass `this` 
    // and then use the attribute which is the index of the card it had 
    var tile = this; 
    //multiply by 1 to get number, could use parseInt but I did not 
    var cardIndex = this.getAttribute("data-card") *1; 

    if (!(tile.innerHTML == "" && cardVal.length < 2)) return; 
    tile.style.background = '#FFF'; 
    tile.appendChild(cardArray[cardIndex]); 
    if (!(cardVal.length == 0 && cardVal[0] == cardVal[1])) return; 
    cardVal.push(cardIndex); 
    cardIDs.push(tile.id); 
    if (cardVal.length == 1) { 
    if (cardVal[0] == cardVal[1]) { 
     cardBackFace += 2; 
     cardVal = []; 
     cardIDs = []; 
     if (cardBackFace == cardArray.length) { 
     alert("Board cleared... generating new board"); 
     document.getElementById('card_board').innerHTML = ""; 
     newBoard(); 
     } 
    } else { 
     setTimeout(card2Back, 700); 
    } 
    } 
} 
newBoard();

出典

2016-04-16 03:20:11

申し訳ありません仲間、私はあなたのコーディングを試みたが、あまりにも動作しません。 – Monzer

カードマッチゲームの作成

答えて

関連する問題