mercredi 25 septembre 2019

Shuffle random image from array

I'm new in JS and currently working on my memory card game. The point is to open all the cells and memorise images. Each cell shows you random picture and turns back. It means you have to look through all the cards unless you match all identical ones. So far I've managed to generate a field with certain number of cells and appended each cell with one image (cards' back). How can I append one random picture from array (cards' front) with certain cell when onclick method happens?

var images = ["cards/club.png", "cards/heart.png", "cards/spade.png", "cards/star.png"];

function imgRandom(imgArr) {
    return imgArr[Math.floor(Math.random() * imgArr.length)];
}

function createTable() {
    var table = document.getElementById("gameBoard");
    var card = document.getElementById("cardBack");

    table.innerHTML = "";
    for (var i = 0; i < size; i++) {
        var row = document.createElement("tr");
        for (var j = 0; j < size; j++) {
            var cell = document.createElement("td");
            var backImg = document.createElement('img');
            backImg.className = "cardBack";
            cell.className = "square";
            cell.id = i + ',' + j;

            cell.appendChild(backImg);

            backImg.onclick = function () {
                console.log(imgRandom(images));
            }
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}



Aucun commentaire:

Enregistrer un commentaire