CODEWITHSUNDEEP
javascripthtml
remedy
remedy

Reputation: 125

Making a match game using Javascript

I am making a match game for my Web Programming class, and I am having difficulty working through arrays to flip the images when a cell is selected. I'm not seeing why when clicked, it won't change to the image. I know I'm missing the full functionality of the game, but I just want to make sure the cells flip to the image.

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


}

The jpg files are named hero0.jpg to hero17.jpg. I'm hoping someone can make sense of this and point me in the right direction. New to javascript, any help would be appreciated :D

Upvotes: 0

Views: 2250

Answers (2)

zoom
zoom

Reputation: 1756

Your problem is that your click listener is calling the function cellClick with the wrong argument. The value of this, which is the scope of your listener is the document, because the event listener is added to the document (through document.addEventListener)

You can try to debug the cellClick method, and you will see that your are not getting a cell element but the document.

To illustrate the issue, I added a snippet that show how to get cell elements and add an event listeners on each cell.
A click event listener is also added to the document to illustrate the fact that wherever the user click, the this value is always the 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>

Upvotes: 2

yuuzo
yuuzo

Reputation: 337

Math.Random() should be Math.random(), make sure you always use the console to check for any Javascript errors.

Upvotes: 1

Related Questions