🔢 Array Shuffling Methods

array-shuffling.html

<style>*{font-size: 50px}</style>
<div id=o></div>
<div id=msg></div>
<script>
const BACK = "🎴";
const FOOD = [..."🍄🍅🍆🍇🍈🍉🍊🍋🍌🍍🍎🍏🍐🍑🍒🍓🍔🍕🍖🍗🍘🍙🍚🍛🍜🍝🍞🍟🍠🍡🍢🍣🍤🍥🍦🍧🍨🍩🍪🍫🍬🍭🍮🍯🍰🍱🍲🍳"];
const TYPE_COUNT = 4;
const COLUMNS = Math.ceil(Math.sqrt(TYPE_COUNT * 2));
const cards = [];
let indexA = indexB = -1;
for (let i = 0; i < TYPE_COUNT; i++) {
  cards.push(a = FOOD[i], a);
}

let matched, unflipTimeout, startTime, attempts = 0;

const shuffle = r => {for(i=r.length;--i;){t=r[i];r[i]=r[j=Math.random()*(i+1)|0];r[j]=t}return r};

const init = _ => {
  matched = new Array(TYPE_COUNT * 2).fill(0);
  attempts = 0;
  shuffle(cards);
  startTime = new Date().getTime();
  msg.innerHTML = "Start!";
};

const unflipCards = _ => {
  indexA = indexB = -1;
  msg.innerHTML = `Attempts: ${attempts}`;
  render();
};

render = _=> o.innerHTML = cards.map((f, i) => (matched[i] || [indexA, indexB].includes(i) ? `<button>${cards[i]}</button>` : `<button onclick="flip(${i})">${BACK}</button>`) + ((i + 1) % COLUMNS ? '' : '<br>')).join``;

const flip = index => {
  if (unflipTimeout) clearTimeout(unflipTimeout);
  if (indexA === -1) indexA = index;
  else if (indexB === -1) {
    indexB = index;
    if (cards[indexA] === cards[indexB]) {
      matched[indexA] = matched[indexB] = 1;
      msg.innerHTML = "Match!";
    }
    else attempts++;
    // win condition
    if (matched.filter(a => a).length === matched.length) {
      const totalTime = (new Date().getTime() - startTime) / 1e3;
      msg.innerHTML = `Win! Attempts: ${attempts}, Cards: ${cards.length}, Time: ${totalTime}s`;
    }
    else unflipTimeout = setTimeout(_=> unflipCards(), 2e3);
  }
  else unflipCards();
  render();
};
init();
unflipCards();

//for(i=0x1f1e6;i<0x1F6FF;i++)if(i<0x1F200||i>0x1F2FF)o.innerHTML+=String.fromCodePoint(i);
</script>