Erstellen eines Karten-Matching-Spiels

-3

Ich möchte ein Karten-Matching-Spiel erstellen, aber ich habe ein Problem mit den Bildern, die versteckt werden sollen. Wenn ich auf eine Karte klicke, wird der Pfad des Bildes anstelle des tatsächlichen Bildes angezeigt.Erstellen eines Karten-Matching-Spiels

Hier sind alle Codes, die ich geschrieben habe:

<!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>

Quelle

2016-04-15 Monzer

benötigen Sie den Titel des Bildes in Komma zu setzen. Zum Beispiel hättest du 'background: url (" picture.jpg ");'. – Zachariel

@Zachariel Dies sind Anführungszeichen, keine Kommas, und sie sind in CSS nicht erforderlich. – Barmar

Es passiert wegen dieser Zeile: 'tile.innerHTML = val;' – Barmar

Sie haben einige suboptimalen Code und ehrlich gesagt ist mein nur ein Refactoring das und hat vieles, was verbessert werden kann - Studie auf.

Da, hier ist das Umgestalten:

ich wirklich Ereignis in Auszeichnungs Wenigsten SO bewegte ich den Click-Handler Aufruf direkt in den Code.
Ich habe zwei Sätze JavaScript in Ihrer Seite gesehen warum? Ich habe sie beide in eins gegeben (siehe die letzte Zeile).
Ihr Array von Bildern war nicht funktionierend und wortreich, also habe ich ein Array von Namen verwendet und daraus eine Reihe von Bildern erstellt.
Insertion eines Elements ist anders als Text so ich tile.appendChild(cardArray[cardIndex]); statt

-Code verwendet:

// 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();

Quelle

2016-04-16 03:20:11

Entschuldigung, ich habe es versucht, aber funktioniert nicht. – Monzer

Erstellen eines Karten-Matching-Spiels

Antwort

Verwandte Themen