๋ค์ด๊ฐ๊ธฐ
์ง ๋ง์ถ๊ธฐ๋ฅผ ํด๋ณด์.
์ง ๋ง์ถ๊ธฐ ๊ฒ์์ ๋ค์๊ณผ ๊ฐ๋ค.
12์ฅ์ ์นด๋๊ฐ ์๊ณ , ๋ ์ฅ์ฉ ์๋ก ์์ด ๊ฐ๋ค. ๋ชจ๋ ์นด๋์ ์์ ๋ณด์ฌ ์ฃผ๋ฉฐ ์ ๊น ๋์ ์นด๋ ์ง์ ์ธ์ธ ์ ์๋ ์๊ฐ์ ์ฃผ๊ณ ๋์, ์นด๋๋ฅผ ๋ค์ ์ ๋ถ ๋ค์ง์ ๋ค ์ง์ ๋ง์ถ๊ฒ ํ๋ค.
๋ง์ ์นด๋๋ฅผ ์ค์๊ฐ์ผ๋ก ๋ค์ง๊ธฐ ๋๋ฌธ์, ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋์๊ฐ๋ ์์๋ฅผ ์ ํํ๊ฒ ์์์ผ ํ๋ค.
๐ ์์๋ ๊ทธ๋ฆฌ๊ธฐ
2์ฅ์ฉ ์นด๋๋ฅผ ๋ค์ง์ด 2์ฅ์ ์นด๋ ์์ด ๊ฐ์ผ๋ฉด ์๋ฃ ๋ชฉ๋ก์ ๋ฃ๊ณ , ๋ค๋ฅด๋ฉด ๋ค์ ๋ค์ง๋๋ค.
12์ฅ์ ์นด๋๋ฅผ ๋ชจ๋ ๋ง์ถ๋ฉด ์ฑ๊ณต์ด๋ค.
์์ ์์๋๋ฅผ ๋ณด๋ฉด
์๋ก ๊ด๋ จ ์๋ ์ ์ฐจ๋ ํ๋์ ์ ์ฐจ๋ก ๋ฌถ๊ณ , ๋ณต์กํ ๋น๋๊ธฐ ์ ์ฐจ๋ ์กฐ๊ฑด๋ฌธ ์ ์ฐจ์์๋ง ์์๋๋ฅผ ๋ถ๋ฆฌํ๋ค.
Note!
๋น๋๊ธฐ๊ฐ ๋ญ์์ง?
๋น๋๊ธฐ๋ ๋๊ธฐ์ ๋ฐ๋๋ง๋ก, ์ค์ ์ฝ๋ฉํ ์์์ ๋ค๋ฅด๊ฒ ๋์ํ๋ ์ฝ๋๋ฅผ ๋น๋๊ธฐ ์ฝ๋๋ผ๊ณ ํ๋ค.
ex) ์ด๋ฒคํธ ๋ฆฌ์ค๋ ( ์ด๋ฒคํธ๊ฐ ๋ฐ๋๋๊ธฐ ์ ์ ์ด๋ ์ฝ๋๊ฐ ๋๊ธฐํ๊ธฐ ๋๋ฌธ์ )
์ ์์์ผํ์ฃ ?
์๋ํฐ์ ์ ์ ์ฝ๋ ์์์ ์ค์ ๋์ ์์๊ฐ ๋ค๋ฅด๋ฏ๋ก ์ด๋ค ์๋ฆฌ๋ก ๋์ํ๋์ง ์ตํ์ผ ํ๋ค.
์๋ฆฌ๋ฅผ ์ตํ๋ค๋ณด๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ณต๋ถํ ๋ ๋ฐ๋์ ์๊ณ ๋์ด๊ฐ์ผ ํ๋ ์ค์ฝํ, ํด๋ก์ ๊ฐ์ ๊ฐ๋ ๋ค๋ ํจ๊ป ์๊ฒ ๋๋ค.
๐ ์ฒซ ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์ง ๋ง์ถ๊ธฐ</title>
<style>
.card{
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
width: 70px;
height: 100px;
perspective: 140px;
}
.card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card.flipped .card-inner{
transform: rotateY(180deg);
}
.card-front{
background: navy;
}
.card-front, .card-back{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
backface-visibility: hidden;
}
.card-back{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
<script>
const $wrapper = document.querySelector('#wrapper');
</script>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์นด๋ ๋ค์ง๊ธฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ง์ ๊ตฌํํ์ง์๋๋ค.
CSS๋ฅผ ์ฌ์ฉํ๋ฉด ์นด๋๋ฅผ ๋ค์ง๋ ํจ๊ณผ๋ฅผ ๋ผ ์ ์๋ค.
์นด๋์ flipped ํด๋์ค๋ฅผ ์ถ๊ฐํ๋ฉด ์นด๋๊ฐ ์๋ฉด์ผ๋ก ๋ค์งํ๊ณ , flipped ํด๋์ค๋ฅผ ์ ๊ฑฐํ๋ฉด ๋ท๋ฉด์ผ๋ก ๋ค์งํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ก๋ ์นด๋ ๋ค์ง๊ธฐ ํจ๊ณผ๋ฅผ ๊ตฌํํ ์ ์์ง๋ง, ์๋ CSS๊ฐ ๋์์ธ์ ๋ด๋นํ๋ฏ๋ก CSS๋ก ํํ ๊ฐ๋ฅํ ๋์์ธ ์์ญ์ ์ต๋ํ CSS๋ง ์ฌ์ฉํด์ ๊ตฌํํ๋ ๊ฒ์ด ํธํ๋ค.
๐ ์นด๋ ์์ฑํ๊ธฐ
์นด๋๋ฅผ ์์ฑํ์. 12์ฅ์ ์นด๋๋ฅผ ์์ฑํ๊ณ , 2์ฅ์ฉ ์์ด ๊ฐ์ผ๋ฏ๋ก ์ด 6๊ฐ์ง ์์ด ํ์ํ๋ค.
6๊ฐ์ง ์์ผ๋ก ๋นจ๊ฐ, ์ฃผํฉ, ๋ ธ๋, ์ด๋ก, ํ์, ๋ถํ์ ์ ์ ํ๊ฒ ๋ค.
6๊ฐ์ง ์์ ์๋ฉด์ ๋ณธ๋ ์์ด๊ณ , ๋ท๋ฉด์ ๋จ์์ผ๋ก ํต์ผํ๊ฒ ๋ค.
6๊ฐ์ง ์์ ๋ ๋ฒ ๋ณต์ฌํด์ ์ด์ด ๋ถ์ด๋ฉด 12์ฅ์ด ๋๋ค.
๋ค๋ง, ์นด๋์ ์์๋ฅผ ๋งค๋ฒ ๋ค๋ฅด๊ฒ ๋ฌด์์๋ก ์์ด์ผ ํ๋, ํผ์ -์์ด์ธ ์ ํ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ๊ฒ ๋ค.
<script>
const $wrapper = document.querySelector('#wrapper');
const total = 12; //์ ์ฒด ์นด๋ ๊ฐ์๋ฅผ ์ ์ฅํ ๋ณ์.
const colors = ['red','orange','yellow','green','white','pink'] //6๊ฐ์ง ์์ ์ ์ฅํ ๋ณ์.
let colorCopy = colors.concat(colors); //๋ ๊ฐ์ ๋ฌธ์์ด์ ํ๋์ ๋ฌธ์์ด๋ก ๋ง๋ค์ด์ค๋ค.
let shuffled = [];
function shuffle(){ //ํผ์
-์์ด์ธ ์
ํ
for (let i=0; colorCopy.length>0; i++){
const randomIndex = Math.floor(Math.random() * colorCopy.length);
shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1));
}
}//shuffle
function createCard(i){ //12๊ฐ ์นด๋๋ฅผ ์์ฑ.
//์นด๋์ ์ธ๋ฑ์ค(i)๋ฅผ ์ธ์๋ก ์ ๋ฌํด์ shuffled๋ก๋ถํฐ ์นด๋์ ์์์ ๊ฐ์ ธ์ด.
const card = document.createElement('div');
card.className = 'card'; //.card ํ๊ทธ ์์ฑ
const cardInner = document.createElement('div');
cardInner.className = 'card-inner'; //.card-inner ํ๊ทธ ์์ฑ
const cardFront = document.createElement('div');
cardFront.className = 'card-front'; //.card-front ํ๊ทธ ์์ฑ
const cardBack = document.createElement('div');
cardBack.className = 'card-back'; //.card-back ํ๊ทธ ์์ฑ
cardBack.style.backgroundColor = shuffled[i]; //๊ฐ์ ธ์จ ์์์ CSS์์ฑ์ ์ถ๊ฐ.
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
return card;
}//createCard
function startGame(){ //๊ฒ์ ์์.
shuffle(); //์นด๋ ์๊ธฐ.
for (let i = 0; i < total; i += 1){
const card = createCard(i); //createCard ํจ์ ์คํ.
$wrapper.appendChild(card); //wrapper ํ๊ทธ ์์ผ๋ก ๋ฃ๊ธฐ.
}
}//startGame
startGame();
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
์ ์ฒด ์นด๋ ๊ฐ์๋ฅผ ์ ์ฅํ total ๋ณ์, 6๊ฐ์ง ์์ ์ ์ฅํ colors ๋ณ์๊ฐ ์๋ค.
colors์์ 6๊ฐ์ง ์์ ๋ ๋ฒ ๋ณต์ฌํด colorCopy๋ฅผ ๋ง๋ค๊ณ , ๋ค์ shuffle ํจ์๋ก ์นด๋๋ฅผ ์์ด shuffled ๋ฐฐ์ด๋ก ๋ง๋ ๋ค.
startGame ํจ์๋ก ๊ฒ์์ด ์์๋๋ฉด, ์นด๋๋ฅผ ์๊ณ ( shuffle ) 12๊ฐ์ ์นด๋๋ฅผ ์์ฑ ( createCard ) ํ๋ค.
์์์ shuffled ๋ก๋ถํฐ ์นด๋ ์์์ ๊ฐ์ ธ์์ CSS์์ฑ์ ๋ฃ๋๋ค.
์ด๋ ๊ฒ ๋ง๋ค์ด์ง ์นด๋๋ ์ต์ข ์ผ๋ก $wrapper ํ๊ทธ ์์ผ๋ก ๋ค์ด๊ฐ๋ค.
๐ ์นด๋ ์ ๊น ๋ณด์ด๊ณ ๋ค์ง๊ธฐ
์ ๊น ๋์ ์นด๋ ์๋ฉด์ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ฃผ๊ณ 3์ด๋ฅผ ์ค ๋ค ๋ค์ ๋ค์ง๋๋ค.
์นด๋ ๋ค์ง๊ธฐ๋ flipped ํด๋์ค๋ฅผ ๋ฃ๊ฑฐ๋ ๋นผ๋ ๊ฒ์ผ๋ก ํ ์ ์๋ค.
๋ชจ๋ ์นด๋์ flipped ํด๋์ค๋ฅผ ์ถ๊ฐํ๋ฉด ์๋ฉด์ด ๋ณด์ด๊ณ , ๋นผ๋ฉด ๋ท๋ฉด์ด ๋ณด์ธ๋ค.
.card.flipped .card-inner{
transform: rotateY(180deg);
}
์นด๋๋ณ๋ก ์๊ฐ์ฐจ๋ฅผ ๋๊ณ ๋ค์ง๊ฒ ๋ค.
์นด๋๊ฐ ์์ฑ๋๋ฉด ๋ฐ๋ก ์๋ฉด์ ๋ณด์ฌ ์ฃผ๊ณ ์ผ์ ์๊ฐ ํ ๋ค์ ๋ค์ง์ผ๋ฏ๋ก ์ด ๊ณผ์ ์ startGame ํจ์ ์์ ์์ฑํ๋ค.
<script>
.
.
.
function startGame(){ //๊ฒ์ ์์.
shuffle(); //์นด๋ ์๊ธฐ.
for (let i = 0; i < total; i += 1){
const card = createCard(i); //createCard ํจ์ ์คํ.
$wrapper.appendChild(card); //wrapper ํ๊ทธ ์์ผ๋ก ๋ฃ๊ธฐ.
}
document.querySelectorAll('.card').forEach((card,index) => { //์ด๋ฐ ์นด๋ ๊ณต๊ฐ
setTimeout(() => {
card.classList.add(`flipped`);
}, 1000 + 100 * index);
});
setTimeout(() => { //์นด๋ ๊ฐ์ถ๊ธฐ.
document.querySelectorAll('.card').forEach((card => {
card.classList.remove('flipped');
}));
},5000);
}//startGame
startGame();
</script>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๐ ์นด๋ ํด๋ฆญํด ์ง ๋ง์ถ๊ธฐ
์นด๋๋ฅผ ํด๋ฆญํด์ ์ง์ ๋ง์ถ์. 2์ฅ์ ์นด๋๋ฅผ ๋ค์ง์ด ์์ด ์ผ์นํ๋ฉด ๊ทธ๋๋ก ๋๋๊ณ , ์์ด ์ผ์นํ์ง ์์ผ๋ฉด ๋ ๋ค ๋ค์ ๋ค์ง๋๋ค.
๋ชจ๋ ์นด๋๊ฐ ์๋ฉด์ด ๋๋ฉด ์ง ๋ง์ถ๊ธฐ ์ฑ๊ณต์ด๋ค. ์ด๋ ๊ฒ ๋๋ฉด '์ถํํฉ๋๋ค!' ๋ผ๋ ๋ฉ์์ง๋ฅผ ํ์ํ๊ฒ ๋ค.
function onClickCard(){} //์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
function startGame(){ //๊ฒ์ ์์.
shuffle(); //์นด๋ ์๊ธฐ.
for (let i = 0; i < total; i += 1){
const card = createCard(i); //createCard ํจ์ ์คํ.
card.addEventListener('click',onClickCard); //ํด๋ฆญ ์ด๋ฒคํธ๋ฆฌ์ค๋ ์คํ.
$wrapper.appendChild(card); //wrapper ํ๊ทธ ์์ผ๋ก ๋ฃ๊ธฐ.
}
.
.
.
}//startGame
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
์ ์ฝ๋๋ ์์ฑํ ์นด๋ ํ๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ถ์ธ ๊ฒ์ด๋ค.
๐ค ์นด๋๋ฅผ ํด๋ฆญํ ๋์ ์ ์ฐจ ๊ตฌํ
let clicked = []; //ํด๋ฆญํ ์นด๋ ๋ฐฐ์ด ๋ณ์.
function onClickCard(){//์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
this.classList.toggle('flipped'); //ํด๋น ์นด๋ ๋ค์ง๊ธฐ.
clicked.push(this); //๋ฐฐ์ด ์ถ๊ฐ.
if (clicked.length !== 2){ //์นด๋ ๋ฐฐ์ด์ 2์ฅ ์๋์ง ํ์ธ.
return; //2์ฅ์ด ์๋๋ผ๋ฉด return์ผ๋ก ํจ์ ์ข
๋ฃ.
}
const firstBackColor = clicked[0].querySelector('.card-back').style.backgroundColor;
const secondBackColor = clicked[1].querySelector('.card-back').style.backgroundColor;
if(firstBackColor === secondBackColor){ //๋ ์นด๋๊ฐ ๊ฐ์ ์นด๋๋ฉด?
return;
}
} //onClickCard
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
return ์๋ซ๋ถ๋ถ์ ํด๋ฆญํ ์นด๋์ ๊ฐ์๊ฐ ๋ ๊ฐ์ผ ๋๋ง ์งํ.
์ด๋ ๋ ์นด๋์ ์๋ฉด์ด ๋๊ฐ์์ง ๋น๊ต๊ฐ ํ์ํ๋ฏ๋ก .style.backgroundColor ๋ฅผ ๋น๊ต.
๋ ์นด๋๊ฐ ๊ฐ์ผ๋ฉด ํด๋ฆญ ๋ฐฐ์ด์์ ์๋ฃ ๋ฐฐ์ด๋ก ์ฎ๊ธฐ๊ณ , ๋ ์นด๋๊ฐ ๋ค๋ฅด๋ฉด ํด๋ฆญ ๋ฐฐ์ด์์ ๋นผ๊ณ ๋ท๋ฉด์ผ๋ก ๋ค์ง๋ ์ฝ๋๋ฅผ ๋ง๋ค์.
let completed = []; //์๋ฃ ๋ฐฐ์ด ๋ณ์.
function onClickCard(){//์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
this.classList.toggle('flipped'); //ํด๋น ์นด๋ ๋ค์ง๊ธฐ.
clicked.push(this); //๋ฐฐ์ด ์ถ๊ฐ.
if (clicked.length !== 2){ //์นด๋ ๋ฐฐ์ด์ 2์ฅ ์๋์ง ํ์ธ.
return; //2์ฅ์ด ์๋๋ผ๋ฉด return์ผ๋ก ํจ์ ์ข
๋ฃ.
}
const firstBackColor = clicked[0].querySelector('.card-back').style.backgroundColor;
const secondBackColor = clicked[1].querySelector('.card-back').style.backgroundColor;
if (firstBackColor === secondBackColor){ //๋ ์นด๋๊ฐ ๊ฐ์ ์นด๋๋ฉด.
completed.push(clicked[0]);
completed.push(clicked[1]);
clicked = [];
retrun;
}
//๋ ์นด๋๊ฐ ๋ค๋ฅด๋ฉด
clicked[0].classList.remove('flipped'); //flipped ํด๋์ค ์ ๊ฑฐ
clicked[1].classList.remove('flipped');
clicked = [];
} //onClickCard
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋ ์นด๋๊ฐ ๋ค๋ฅด๋ฉด flipped ํด๋์ค๋ฅผ ์ ๊ฑฐ / ๋ ์นด๋๊ฐ ๊ฐ์ผ๋ฉด flipped ํด๋์ค๋ฅผ ์ ๊ฑฐํ์ง ์์ผ๋ฏ๋ก ์นด๋๊ฐ ๊ณ์ ์๋ฉด์ธ ์ํ๋ก ์ ์ง.
์ ์ฝ๋๋ฅผ ์คํํ๋ฉด ๋ ์นด๋๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ ๋ ๋ฒ์งธ ์นด๋๋ ๋ค์งํ์ง ์๋๋ค.
์ด๋ ๋ ๋ฒ์งธ ์นด๋์ ์๋ฉด์ ๋ณด์ด๊ธฐ๋ ์ ์ flipped ํด๋์ค๊ฐ ์ ๊ฑฐ๋์๊ธฐ ๋๋ฌธ.
๋ฐ๋ผ์ ์๋ฉด์ ๋ณด์ผ ์ ์๋ ์ถฉ๋ถํ ์๊ฐ ํ๋ณด ํ์ ( 0.5์ด ์ฃผ์ )
function onClickCard(){//์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
this.classList.toggle('flipped'); //ํด๋น ์นด๋ ๋ค์ง๊ธฐ.
clicked.push(this); //๋ฐฐ์ด ์ถ๊ฐ.
if (clicked.length !== 2){ //์นด๋ ๋ฐฐ์ด์ 2์ฅ ์๋์ง ํ์ธ.
return; //2์ฅ์ด ์๋๋ผ๋ฉด return์ผ๋ก ํจ์ ์ข
๋ฃ.
}
const firstBackColor = clicked[0].querySelector('.card-back').style.backgroundColor;
const secondBackColor = clicked[1].querySelector('.card-back').style.backgroundColor;
if (firstBackColor === secondBackColor){ //๋ ์นด๋๊ฐ ๊ฐ์ ์นด๋๋ฉด.
completed.push(clicked[0]);
completed.push(clicked[1]);
clicked = [];
retrun;
}
//๋ ์นด๋๊ฐ ๋ค๋ฅด๋ฉด
setTimeout(()=>{
clicked[0].classList.remove('flipped'); //flipped ํด๋์ค ์ ๊ฑฐ
clicked[1].classList.remove('flipped');
clicked = [];
},500);
} //onClickCard
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๐ค ๋ชจ๋ ์นด๋๊ฐ ์ง์ด ๋ง์ถฐ์ก๋์ง ํ์ธ
๋ชจ๋ ์๋ฉด์ด๋ผ๋ฉด '์ถํํฉ๋๋ค!' ๋ผ๊ณ ํ์ํ๋ alert ์ฐฝ์ ๋์ด๋ค.
function onClickCard(){//์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
.
.
.
if (firstBackColor === secondBackColor){ //๋ ์นด๋๊ฐ ๊ฐ์ ์นด๋๋ฉด.
completed.push(clicked[0]);
completed.push(clicked[1]);
clicked = [];
if(completed.length !== total){
return;
}
alert('์ถํํฉ๋๋ค!');
retrun;
}
.
.
.
} //onClickCard
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋ง์ง๋ง ์นด๋๊ฐ ์๋ฉด์ ๋ณด์ด๊ธฐ ์ ์ alert ์ฐฝ์ด ๋จผ์ ๋ฌ๋ค.
์ด ํ์๋ ์นด๋๊ฐ ๋ค์งํ ๋๊น์ง ์ถฉ๋ถํ ์๊ฐ์ ์ฃผ์ง ์์์ ๊ทธ๋ฐ ๊ฒ์ด๋ค.
function onClickCard(){//์นด๋๋ฅผ ํด๋ฆญํ๋ฉด.
.
.
.
if (firstBackColor === secondBackColor){ //๋ ์นด๋๊ฐ ๊ฐ์ ์นด๋๋ฉด.
completed.push(clicked[0]);
completed.push(clicked[1]);
clicked = [];
if(completed.length !== total){
return;
}
setTimeout(()=>{
alert('์ถํํฉ๋๋ค!');
resetGame(); //๊ฒ์ ์ด๊ธฐํ ํจ์ ์คํ.
},1000);//1์ด ์๊ฐ ์ฃผ๊ธฐ.
return;
}
.
.
.
} //onClickCard
function resetGame(){ //๊ฒ์ ์ด๊ธฐํ.
$wrapper.innerHTML = '';
colorCopy = colors.concat(colors);
shuffled = [];
completed = [];
startGame();
}//resetGame
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com