Question

我正在为我的Web编程类制作一个匹配游戏，当我选择一个单元格时，我很难通过数组来翻转图像。我没有看到为什么点击时，它不会改变为图像。我知道我错过了游戏的全部功能，但我只是想确保细胞翻转到图像。

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

Answer 1

您的问题是您的点击侦听器使用错误的参数调用函数cellClick。 this的值，即侦听器的范围是文档，因为事件侦听器已添加到文档中（通过document.addEventListener）

你可以尝试调试cellClick方法，你会看到你没有得到一个单元格元素而是文档。

为了说明这个问题，我添加了一个片段，展示如何获取单元格元素并在每个单元格上添加事件侦听器。
点击事件监听器也会添加到文档中，以说明无论用户点击何处，this值始终为document

＆＃13;

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";
  });
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Math.Random()应为Math.random()，请确保始终使用控制台检查是否存在任何Javascript错误。

使用Javascript制作比赛游戏

2 个答案: