200923__JS Flipping card game ์ •๋ฆฌ (2/2)

edie_koยท2020๋…„ 9์›” 22์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
5/21

๐ŸŒบPositive Ko๐Ÿฆ„๐Ÿ’—

ํ•ด๋‹น ํŽ˜์ด์ง€ ๊ฒŒ์ž„ ์ฝ”๋“œ ๋ฆฌ๋ทฐ์ž…๋‹ˆ๋‹ค.

(์ฐธ๊ณ . ์ œ๋กœ์ดˆ ์นด๋“œ ๋’ค์ง‘๊ธฐ ๊ฒŒ์ž„)

์ง€๋‚œ ๊ธ€๊นŒ์ง€ '๋’ค์ง‘ํžˆ๋Š” ๊ธฐ๋Šฅ CSS ๊ตฌํ˜„ โ†’ ์นด๋“œ ์„ธํŒ… โ†’ ํด๋ฆญ ์‹œ ๋’ค์ง‘ํžˆ๋Š” ์ด๋ฒคํŠธ ๊ตฌํ˜„'๊นŒ์ง€ ๋˜์งš์–ด ๋ดค์Šต๋‹ˆ๋‹ค.

4. ์นด๋“œ์— ์ƒ‰์ด ์ž„์˜๋กœ ๋ฐฐ์ •๋˜๋„๋ก ํ•œ๋‹ค.

let cardColor = [];
let cardColorset = colorPool.slice();
let colorPool = [
  '#A5736A', // brown
  '#A5736A',
  '#FECD56', // yellow
  '#FECD56',
  '#50869B', // blue
  '#50869B',
  '#698D5D', // green
  '#698D5D',
  '#E14B56', // pink
  '#E14B56',
  '#F8A255', // orange
  '#F8A255',
];
function shuffle() {
  for (let i = 0; cardColorset.length > 0; i += 1) {
    cardColor = cardColor.concat(
      cardColorset.splice(Math.floor(Math.random() * cardColorset.length), 1)
    );
  }
}

color pool์— ์ƒ‰์ƒ 12๊ฐ€์ง€๋ฅผ ์ง์„ ๋งž์ถ”์–ด ๋„ฃ๊ณ . cardColorset์— ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ์ž„์˜ ์ง€์ •๋˜๋„๋ก ํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ์ฃผ์˜์ ์€ .slice()๋ฅผ ์“ฐ์ง€ ์•Š์œผ๋ฉด ์ฐธ์กฐ ๊ด€๊ณ„๋กœ ์ธํ•ด, colorPool ์ž์ฒด๊ฐ€ ๋ฐ”๋€๋‹ค. ๋”ฐ๋ผ์„œ ํ›„์— ๊ฒŒ์ž„์ด ๋๋‚˜๊ณ  ๋ฆฌ์…‹ํ•  ๋•Œ ์˜จ์ „ํ•œ colorPool์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์นด๋“œ ์ƒ‰๊น”์ด ํฐ์ƒ‰์œผ๋กœ๋งŒ ๋‚˜์˜ค๋Š” ์—๋Ÿฌ๊ฐ€ ์ƒ๊ธด๋‹ค.

slice() & splice() :

slice() ๋ฉ”์†Œ๋“œ๋Š” begin๋ถ€ํ„ฐ end ์ „๊นŒ์ง€์˜ ๋ณต์‚ฌ๋ณธ์„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด ๊ฐ์ฒด๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ฆ‰, ์›๋ณธ ๋ฐฐ์—ด์€ ์ˆ˜์ •๋˜์ง€ ์•Š๋Š”๋‹ค.

splice() ๋ฉ”์†Œ๋“œ๋Š” ๋ฐฐ์—ด์˜ ๊ธฐ์กด ์š”์†Œ๋ฅผ ์‚ญ์ œ ๋˜๋Š” ๊ต์ฒดํ•˜๊ฑฐ๋‚˜ ์ƒˆ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๋‚ด์šฉ์„ ๋ณ€๊ฒฝํ•œ๋‹ค. ์ด ๋ฉ”์†Œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด ์ž์ฒด๋ฅผ ์ˆ˜์ •ํ•œ๋‹ค.

https://im-developer.tistory.com/103

5. ๋งจ ์ฒ˜์Œ์— ์นด๋“œ ์„ธํŒ…์ด ๋œ ํ›„, ์นด๋“œ์˜ ์ƒ‰๊น”์„ ์ž ์‹œ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ

document.querySelectorAll('.card').forEach(function (card, index) {
    setTimeout(() => {
      card.classList.add('flipped');
    }, 1000 + 100 * index);
  });

  setTimeout(() => {
    document.querySelectorAll('.card').forEach(function (card, index) {
      card.classList.remove('flipped');
    });
    clickFlag = true;
    gameStart = new Date();
  }, 5000);

setTimeout()์œผ๋กœ ์‹œ๊ฐ„ ์กฐ์ ˆ. clickFlag boolean๊ฐ’์œผ๋กœ card๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์‹œ๊ฐ„ ๋™์•ˆ์—๋Š” ์นด๋“œ๊ฐ€ ํด๋ฆญ๋˜์–ด ๋’ค์ง‘ํžˆ์ง€ ์•Š๋„๋ก ํ•œ๋‹ค.

6. clicked card ์™€ matched card๋ฅผ ๋„ฃ์–ด ๊ฐ™์€ ์ƒ‰์œผ๋กœ ํด๋ฆญ๋œ ์นด๋“œ๋Š” matched๋กœ ๋ถ„๋ฅ˜ํ•˜์—ฌ ๋‹ค์‹œ ํด๋ฆญ๋˜์ง€ ์•Š๋„๋ก ํ•œ๋‹ค.

let clickedCard = [];
let matchedCard = [];

(function (c) {
      card.addEventListener('click', () => {
        if (clickFlag && !matchedCard.includes(c)) {
          c.classList.toggle('flipped');
          clickedCard.push(c);
          if (clickedCard.length === 2) {
            if (
              clickedCard[0].querySelector('.card-back').style
                .backgroundColor ===
              clickedCard[1].querySelector('.card-back').style.backgroundColor
            ) {
              matchedCard.push(clickedCard[0]);
              matchedCard.push(clickedCard[1]);
              clickedCard = [];
             

includes() : ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์ด ํŠน์ • ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š”์ง€ ํŒ๋ณ„https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

toggle() : ํด๋ž˜์Šค ๋„ค์ž„์— () ์š”์†Œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š”์ง€ ํŒ๋ณ„ํ•˜๊ณ , ์—†๋‹ค๋ฉด ์ถ”๊ฐ€ํ•ด์ฃผ๊ณ  ์žˆ๋‹ค๋ฉด ์ œ๊ฑฐํ•ด์ค€๋‹ค.

7. ๊ฒŒ์ž„ ์ดˆ๊ธฐํ™”

 if (matchedCard.length === cardWidth * cardHeight) {
                let gameFinish = new Date();
                alert(
                  `Congratulations๐Ÿ‘ Time record: ${parseInt(
                    (gameFinish - gameStart) / 1000
                  )} seconds`
                );
                document.querySelector('#gameTable').innerHTML = '';
                cardColorset = colorPool.slice();
                cardColor = [];
                matchedCard = [];
                gameStart = null;
                shuffle();
                cardSet(cardWidth, cardHeight);
              }
            } else {
              clickFlag = false;
              setTimeout(() => {
                clickedCard[0].classList.remove('flipped');
                clickedCard[1].classList.remove('flipped');
                clickFlag = true;
                clickedCard = [];
              }, 1000);
            }
          }
        }
      });
    })(card);

matchedCard.length === cardWidth * cardHeight ์ด ๋˜๋ฉด ์นด๋“œ ๊ฒŒ์ž„์„ ์ดˆ๊ธฐํ™” ํ•œ๋‹ค.
๊ฒŒ์ž„ ํ…Œ์ด๋ธ”์„ innerHTML๋กœ ์ง€์›Œ๋ฒ„๋ฆฌ๊ณ , ๋ชจ๋“  ์š”์†Œ๋“ค์„ ์ฐจ๋ก€๋Œ€๋กœ [] ์ดˆ๊ธฐํ™” ์‹œํ‚จ๋‹ค.

profile
๋‚ด ์ด๋ฆ„ ๊ณ ์€์ •, ์€์„ 180deg ๋Œ๋ ค ๊ณ ๊ธ์ • ๐Ÿคญ

0๊ฐœ์˜ ๋Œ“๊ธ€