다른 방식으로 해봤는데 flipped 구현이 안돼요 ㅠㅠ
175
pos7271
작성한 질문수 19
0
const cardList = document.querySelectorAll('.card');
const cardBack = document.querySelectorAll('.card-back');
const new_candi = ['red', 'red', 'orange', 'orange', 'yellow', 'yellow', 'pink', 'pink', 'blue', 'blue', 'black', 'black'];
let color_candi = new_candi.slice();
let color = [];
let clickflag = true;
let click_card = [];
let right_card = [];
let start_date;
let end_date;
function shuffle () {
for (let i =0; color_candi.length > 0; i ++) {
color = color.concat(color_candi.splice(Math.floor(Math.random() * color_candi.length), 1));
}
}
function cardSetting() {
clickflag = false;
for (let i =0; i < 12; i ++) {
cardBack[i].style.backgroundColor = color[i];
}
for (const card of cardList) {
card.addEventListener('click', function(){
if(clickflag && !right_card.includes(card)) {
card.classList.toggle('flipped');
click_card.push(card);
if (click_card.length === 2) {
if (click_card[0].querySelector('.card-back').style.backgroundColor === click_card[1].querySelector('.card-back').style.backgroundColor) {
right_card.push(click_card[0]);
right_card.push(click_card[1]);
click_card = [];
if (right_card.length === 12) {
end_date = new Date().valueOf();
swal("성공입니다!", + ((end_date - start_date) / 1000) + "초 걸렸습니다.") ;
color_candi = new_candi.slice();
color = [];
right_card = [];
start_date = null;
end_date = null;
console.log(new_candi, color, right_card, start_date, end_date, click_card);
shuffle();
cardSetting();
}
} else { //두 카드의 색상이 다르면
clickflag = false;
setTimeout(function() {
click_card[0].classList.remove('flipped');
click_card[1].classList.remove('flipped');
clickflag = true;
click_card = [];
}, 1000);
}
}
}
});
};
cardList.forEach(function (card, index) {
setTimeout(function() {
card.classList.add('flipped');
}, 1000 + 100 * index);
});
setTimeout(function() {
cardList.forEach(function (card) {
card.classList.remove('flipped');
});
clickflag = true;
start_date = new Date().valueOf();
console.log(start_date);
}, 5000);
}
shuffle();
cardSetting();
답변 1
0
다 정상적으로 작동되는데
게임이 끝나고 리셋될때 모든 카드가 차례대로 뒤집어지는 부분이 작동이 안됩니다 ,, card 클래스에 flipped 클래스를 추가하는
cardList.forEach(function (card, index) {
setTimeout(function() {
card.classList.add('flipped');
}, 1000 + 100 * index);
});
이부분이 문제인것같습니다 ㅠ
혼자 해보려니 너무 어렵네요 ,,
iput 입력글자 제한에러...
0
227
0
리팩토링 관련 질문입니다. (자스스톤)
0
276
1
카드 짝맞추기 react-native
0
340
0
필터 메소드 관련 질문입니다.
0
339
1
가위바위보 게임 질문드립니다~
0
204
1
자바스크립트 기초에 관해서 질문있습니다.
0
208
1
질문입니다.
1
359
1
이벤트 리스너 안에서 동작 질문드립니다.
0
325
2
질문드립니다.
0
190
0
안녕하세요 깊은 복사 부분에서 질문 있습니다.
0
245
1
document.createElement('')함수에서
0
249
2
안녕하세요 클로저 부분에서 질문 있습니다.
0
280
1
안녕하세요 제로초님
0
739
1
끝말잇기 화면에 출력 반복문을 이용해서 횟수 제한
0
245
1
안녕하세요 제로초님 질문있습니다
0
317
1
안녕하세요 강의 정말 잘시청하고있습니다.
0
277
3
?
0
152
1
틱택토 게임에서 게임이 끝나고
0
567
1
9 곱하는게 이해가 안 되요~
0
174
1
지뢰찾기 에러잡아내기에서 질문있습니다!
0
459
4
지뢰찾기 에러 관련 질문!
0
484
3
리팩토링에 관한 질문입니다.
0
244
2
Array/Object spread
0
204
1
지뢰찾기게임에서 Math.random() 질문
0
224
1