카드맞추기
-
JavaScript 입문 : 카드맞추기 게임 - 카드 기본데이터, 카드 생성, 카드 섞기, 카드맞추기 게임 시작 함수컴퓨터 알아가기/JavaScript 2022. 9. 29. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간까지 카드맞추기 게임 순서도와 카드가 뒤집히는 애니메이션인 CSS를 다뤄 봤습니다. 지금부터는 순수하게 자바스크립트만을 이용하여 카드맞추기 게임을 만들어 가도록 하겠습니다. 1. 카드 구성요소 만들기 카드 구성요소로는 전체 카드갯수와 색상이 들어간 배열이 필요합니다. 아울러 짝을 맞추는 게임이니 같은 색을 두번 사용해야 합니다. 여기서는 concat( ) 함수를 이용해 봅니다. 이제는 내가 쓰는 코드가 에러가 있는지 미리 확인하는 습관도 중요합니다. 강좌등을 보면 코드에 console.log( ) 메소드를 이용하라는 지침이 많은데 직접 코드에 쓰는 것 보다 콘솔에 타이핑해보면 쉽니다. 위 구성요소가 잘 되었는지는 다음과 같이 콘솔..
-
JavaScript 입문 : 카드맞추기 게임 - 기본프레임 잡기 (카드뒤집기 애니메이션 CSS 포함)컴퓨터 알아가기/JavaScript 2022. 9. 28. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간 순서도 기본이 완성이 되었으니 본격젹으로 카드맞추기 게임에 대한 코딩을 시작하도록 합니다. 1. HTML CSS JS 기본 형태만들기 이번 시간에는 HTML 파일 한곳에 CSS와 자바스크립트 코드인 script 태그를 같이 써 보도록 하겠습니다. 상기 코드를 보면 CSS코드는 태그에 기입하고 자바스크립트 코드는 태그에 기입할 예정입니다. 태그는 하나만 만들었으며 향후 이 곳에 카드 12장을 자바스크립트를 통하여 반영할 예정입니다. 2. 카드 애니메이션 CSS 자바스크립트 코드만으로 카드를 뒤집는 애니메이션은 만들기 상당히 어렵다고 합니다. 전문가들조차 그런 말을 하니 저로서는 엄두도 내기 싫네요 ㅎ. 이제부터 CSS를 작성하고..
-
JavaScript 입문 : 카드맞추기 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 9. 27. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 자바스크립트를 이용하여 뒤집혀진 카드의 짝을 찾는 '카드맞추기' 게임을 만들어 보고자 합니다. 다음과 같은 결과물을 예상 할 수 있는데요. 첫 화면에 12개의 카드가 엎어져 있고 전체 색을 보여준 후 다시 뒤집어 진 상태에서 같은 색을 맞추는 게임입니다. 강좌에 따르면 자바스크립트의 가장 중요한 요소 중 하나인 '이벤투 루프, Event Loop'에 대해 이해를 해야 완벽한 게임을 만들 수 있다고 합니다. 이론과 원리를 안다면 에러가 나는 상황에서 답답한 마음도 아느정도 해소될 것으로 기대해 봅니다. ▒ 카드맞추기 게임 완성 결과물 첫 화면에는 다음과 같이 12개의 카드가 엎어진 상태로 보입니다. (편의상 카드앞면이라고 하겠습니다. ) ..