실습
JavaScript 실습
코드깎는머슴
2024. 2. 23. 18:38
728x90
반응형
공부하기 싫어서 수업 때 만든 작은 창 만드는 방법을 응용해서 사천성을 만들어봤다.
사천성이 뭔지 모르는 사람도 있을테니 사천성은 간단하게 말하면 카드 짝 맞추기 게임입니다.
물론 미적 감각이 죽은 자퇴생 공돌이의 작품이라 디자인은 형편 없다...
적당히 기능구현만 하고 최적화라고는 1도 안해서 좀 형편없어보이긴 하지만
뭐라도 만들어낸게 있으니까 배우는 보람?이 느껴지긴 하는 것 같다.
만들면서 스스로 의문인 점들을 적어가며 해결해나갔고,
마지막까지 해결 못한 점들은 수업하는 날 강사님께 찾아가서 여쭤보려고 했는데,
자바스크립트에 sleep() 메서드가 없다는 걸 알게 되었고 적당히 직접 만들어서 쓰려고 했더니,
사용은 되는데 내가 원하는 순서로 사용이 안되어서 강사님께 여쭈어봤다.
// 자바스크립트에 sleep()이 없대서 적당히 만듦
function sleep(sec) { // 지연시킬 시간 입력
let past = Date.now();
let now = past;
while (now - past < sec * 1000) { // 아까전과 지금의 차이가 `sec`초가 될 때까지 이 작업을 수행한다.
now = Date.now();
}
}
if (count === MAX_COUNT){ // 오픈된 게 2장이면
// sleep(2);
// 오픈한 2장의 값이 같으면
if (main.querySelectorAll(':scope .dialog > .content.visible')[0].innerText === main.querySelectorAll(':scope .dialog > .content.visible')[1].innerText){
count -= 2; // 냅둘 거여도 개수는 낮춰야 뒤의 진행에 문제가 없음
main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.add('visi');
// 이제 더이상 안보이게하지 않음
main.querySelectorAll(':scope .dialog > .content.visible')[1].classList.add('visi');
// 이제 더이상 안보이게하지 않음
main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
// 원래 속성은 지우기
main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
// 원래 속성은 지우기, 0번을 삭제하면 1번이 앞으로 당겨져서 0번을 또 지워야함
// 배열이면 안 이런데 어레이리스트 구현한 배열이라 이렇게 해야함
}else { // 2장의 값이 다르면
for (let i = 0; i < MAX_COUNT; i++){
main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
// 둘 다 다시 덮어
count --; // 시행이 2번 되니까 한번에 1씩만 빼면 됨
}
}
}
위에 올린 자바스크립트 파일 중에 주석 쳐진 // sleep(2) 부분이다.
이 부분을 setTimeout(f, t) 메서드를 이용해서 구현하라고 말씀해주셨다.
아마 안되는 이유가 xhr이 비동기 방식인데 sleep(2)가 실행되는 중에 뒷 부분이 먼저 실행되서 그런 것 같다.
이 생각을 스스로 못한 게 좀 아쉽긴 하지만 뭐 일단 스스로 여기까지라도 만들어봤으니 그나마 좀 나은 것 같다.
그리고 다 만들고 한 생각인데
그냥 css에 gird 썼으면 됐는데 왜 위치 잡는 로직을 따로 만들어줬지..?
머리가 멍청하면 몸이 고생한다는 말을 오늘도 떠올린다.
갈길이 멀다...
첫 화면
게임 시작 누르면 나오는 화면
진행 중인 화면
728x90
반응형