How can I re-empty the array after there is no match?

Question

How can I re-empty the array after there is no match?

Navigation

#1 by (1 votes)

0

I am new to this, I want to know how I can do if there is no match, empty the array so that I can check again? If there is a match, both are shown, if there is not, they are returned, that happens only once, I can not make the game meaningful.

var box = document.getElementsByClassName('box')[0];
var all = [
  {
    pic: 'a.png',
    name: 'circle'
  },
  {
    pic: 'a.png',
    name: 'circle'
  },
  {
    pic: 'b.png',
    name: 'square'
  },
  {
    pic: 'b.png',
    name: 'square'
  },
  {
    pic: 'c.png',
    name: 'star'
  },
  {
    pic: 'c.png',
    name: 'star'
  },
  {
    pic: 'd.png',
    name: 'moon'
  },
  {
    pic: 'd.png',
    name: 'moon'
  },
  {
    pic: 'e.png',
    name: 'heart'
  },
  {
    pic: 'e.png',
    name: 'heart'
  },
  {
    pic: 'f.png',
    name: 'star'
  },
  {
    pic: 'f.png',
    name: 'star'
  }
];
var cardNodes =[];
var cardsInPlay =[];

let cardElement, cardId, random = all[Math.floor(Math.random()*all.length)];
// console.log(random[1]);

function createBoard(){
  for (var i = 0; i < all.length - 1; i++) {
    cardElement = document.createElement('img');
    cardElement.setAttribute('src', 'images/back.png');
    cardElement.setAttribute('data-id', i);
    cardElement.style.width = '190px';
    cardElement.style.height = '190px';
    cardElement.style.margin = '20px';
    box.appendChild(cardElement);
    cardNodes.push(cardElement);
    cardElement.onclick = backFlip;
  }
}
createBoard();

function backFlip(){
  cardId = this.getAttribute('data-id');
  this.setAttribute('src', 'images/${all[cardId].pic}');
  cardsInPlay.push(all[cardId].name);
  // console.log(cardId, cardsInPlay);
  // console.log(cardNodes);
  checkForMatch();
}



function checkForMatch(){
  if (cardsInPlay.length === 2) {

    if (cardsInPlay[0] !== cardsInPlay[1]) {
      setTimeout(function(){
        cardNodes.map(x=>x.setAttribute('src', 'images/back.png'))
      },1000);
    }
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MEMORY GAME</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>MEMORY GAME</h1>
    <p>This is a game in which you have to remember the position of the cards to match, you have a timer</p>
    <div class="box">

    </div>

    <script src="app.js" charset="utf-8"></script>
  </body>
</html>

javascript array

asked by fran 17.12.2017 в 16:46

source

1 answer

View values of FormData function year (date) does not exist

score 1 · Accepted Answer

You have different ways to empty the array:

The simplest: assign an empty array to the variable:

cardsInPlay = [];

You can also empty it by calling the pop method that extracts the last element of the array until it is empty:

while (cardsInPlay.length) cardsInPlay.pop();

Or with the shift method that extracts the first element:

while (cardsInPlay.length) cardsInPlay.shift();

Although I suppose the best option is to use splice that allows you to delete a number of elements from an index:

cardsInPlay.splice(0, cardsInPlay.length);