使用Javascript製作匹配遊戲

我正在爲我的Web編程類製作匹配遊戲，並且在選擇單元格時我難以通過數組來翻轉圖像。我沒有看到爲什麼點擊時，它不會改變爲圖像。我知道我錯過了遊戲的全部功能，但我只是想確保單元格翻轉到圖像。使用Javascript製作匹配遊戲

HTML：

<html> 
<head> 
    <title>Match Game</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <div id="board"> 

    </div> 
    <script type="text/javascript" src="memory.js"></script> 
</body> 
</html>

JS：

document.addEventListener("DOM-ContentLoaded", playMemory(), false); 

function playMemory() { 

function createBoard() { 
    var matchBoard = document.getElementById("board"); 
    var header = document.createElement("h1"); 
    var footer = document.createElement("footer"); 
    var matchTable = document.createElement("table"); 
    var message = document.createElement("div"); 
    var olay = document.createElement("div"); 
    var timer = document.createElement("div"); 
    var choice = []; 


    var row, cell, defaultImg; 
    for(var i = 0; i < 6; i++) { 
     row = document.createElement("tr"); 
     matchTable.appendChild(row); 
     for(var j = 0; j < 6; j++) { 
      cell = document.createElement("td"); 
      row.appendChild(cell); 
      defaultImg = document.createElement("img"); 
      defaultImg.setAttribute("src", "main.jpg"); 
      cell.appendChild(defaultImg); 
     } 
    } 
    timer.appendChild(document.createTextNode("00:00")); 
    header.appendChild(document.createTextNode("Pick-A-Hero")); 
    footer.appendChild(document.createTextNode("")); 
    matchBoard.appendChild(header); 
    matchBoard.appendChild(matchTable); 
    matchBoard.appendChild(timer); 
    matchBoard.appendChild(message); 
    matchBoard.appendChild(footer); 

} 
var usedHeroes = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 
        0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]; 

function cellClick(cell) { 
    if(cell.style.backgroundImage === "url(main.jpg)"){ 
     for(var i =0; i< document.getElementsByTagName('td').length;i++){ 
      var random = Math.floor(Math.Random() * 36); 
      cell[i].style.backgroundImage = "url(hero" + usedHeroes[random] + ".jpg"; 
     } 
    } 
} 

document.addEventListener("click", function() { 
    for(var i = 0; i < document.getElementsByTagName('td').length; i++) { 
     cellClick(this); 
    } 
}); 


createBoard(); 


}

的JPG文件被命名爲hero0.jpg到hero17.jpg。我希望有人能夠理解這一點，並指出我正確的方向。新的JavaScript，任何幫助將不勝感激：D

來源

2016-07-23 remedy

你可以使用它的div呢？ https://davidwalsh.name/css-flip有一個卡片式的div翻轉教程。 – David

對作業沒有任何限制，但她確實指出了使用以前的作業板佈局，這與我做的相同。我正在研究這種CSS風格，似乎是一個好主意。謝謝！ :) – remedy

您的問題是，您的點擊偵聽器調用函數cellClick與錯誤的參數。的this的價值，這是你的聽衆的範圍是文檔，因爲事件偵聽器添加到文件（通過document.addEventListener）

你可以嘗試調試cellClick方法，你會看到你的不獲取一個單元格元素，但文檔。

爲了說明這個問題，我添加了一個代碼片斷，顯示如何獲取單元格元素並在每個單元格上添加事件偵聽器。
click事件偵聽器也被添加到該文件來說明一個事實，即無論用戶點擊後，this值始終是document

document.addEventListener("click", function() { 
 
    console.log(this === document); 
 
}); 
 

 
var cellELs = document.querySelectorAll(".cell") 
 

 
for (i = 0; i < cellELs.length; ++i) { 
 
    cellELs[i].addEventListener("click", function() { 
 
    this.style['background-color'] = "red"; 
 
    }); 
 
}

.cell { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-bottom: 10px; 
 
    border: 1px green solid; 
 
    background-color: lightgreen; 
 
}

<div class="cell"></div> 
 
<div class="cell"></div> 
 
<div class="cell"></div>

來源

2016-07-23 22:15:54 zoom

好的，謝謝。我明白我現在要去哪裏錯了。謝謝！ – remedy

Math.Random()應Math.random()，請確保您總是使用控制檯檢查是否有任何Javascript錯誤。

來源

2016-07-23 22:16:52

正確，OP會糾正此問題。但是目前這條線永遠不會被執行，因爲前面的語句if（cell.style.backgroundImage ===「url（main.jpg）」）'總是爲false。 – zoom

是的，我剛剛解決了這個問題，現在重寫，我有一個想法，我需要做什麼。感謝您指出:) – remedy

使用Javascript製作匹配遊戲

回答

相關問題