Study/프로젝트8 카드 짝 맞추기 게임 Project 4 (기능3 : 재시작 기능 수정과 카드 뒤집기) 재시작 기능 수정의 필요성 기존 코드에는 재시작 버튼을 누르면 화면의 요소들을 숨기거나 보여주기만 했다. 하지만 이제 기능이 도입되고, 게임화면이 복잡해졌으므로 재시작을 누름과 동시에 기능과 게임화면을 모두 처음으로 초기화 해주어야 한다. 따라서 앞으로도 기능이 추가됨에 따라 재시작 기능은 수정되어야 할 부분이 늘어날 것! 우선 현재까지의 추가된 기능과 변화는 우선 타이머 와 시간초과 기능, 카드덱 랜덤 배열 기능, div#timer, div#carddeck, div#gameover의 생성 및 소멸에 관련된 html요소 변화들이 있다. (이때 카드덱 랜덤 배열 기능은 시작 버튼 클릭 시 새로 호출되는 turnIntoGame() 을 통해 자동적으로 발생. 재시작 버튼과 관련이 없다.) 재시작 버튼을 누르는.. 2023. 8. 17. 카드 짝 맞추기 게임 Project 3 (기능2 : 카드랜덤배치와 타이머구현) 카드 16개 만들어주는 에밋 문법 & 타이머 html요소에 배치하기 우선 Project2 까지 진행상황은 준비화면과 버튼구현, 게임화면의 카드 포지션 까지 였다. 추가적으로 게임화면에서 카드 4개를 예쁘게 배열하는 CSS 파일까지 작성했다. 이제 16개의 카드를 배열하여야 하는데, 이때 배열하는 카드의 앞면 즉 img.cardImg 요소의 src는 javascript를 이용하여 랜덤 배치되어야 하므로 전부 공란으로 비워두었다. 현재까지의 index.html을 보면 다음과 같다. 앞에서의 포지셔닝을 유지하며 16개의 이미지를 만들어주기 위해서 다음과 같은 에밋(Emmet)문법을 사용하면 더욱 편리하게 만들 수 있다. - 에밋문법 (div[class="cover"]>img[src="img/cover.png".. 2023. 8. 17. 카드 짝 맞추기 게임 Project 2 (기능1 : 버튼기능 & 카드덱 구현 ) html 속성을 DOM요소 프로퍼티로 가져오기 CSS에만 게시된 속성은 html 을 통해 읽어올 수 없으므로 DOM요소의 프로퍼티로 가져올 수 없다. 물론 getComputedStyle(element, [:pseudo]) 를 통해 CSS에 적용된 style을 얻어올 수는 있어도, 읽기전용 이므로 변경이 불가능하다. 이때 DOM 요소 프로퍼티를 이용해 CSS를 변경할 수 있는 방법은 2가지이다. 1) html 인라인 style 속성 에 직접 게시하여 DOM요소 프로퍼티로 가져오기 2) 적용하고자 하는 CSS 속성을 class로 제작하고, html 의 요소의 class에 추가/삭제를 통해 변경 이 프로젝트에서 요소의 생성과 소멸은 style의 display 속성을 핵심적으로 사용하므로 1)을 선택했다. 따라.. 2023. 8. 16. 카드 짝 맞추기 게임 Project 1 (준비화면, CSS, 웹폰트) style.css 파일 첨부 in index.html 외부 폰트 (웹폰트) 추가 : 프로젝트 폴더에 다운받은 폰트 2개를 넣어두었다. @font-face { font-family:"cafe24"; font-weight: bold; src: url(Cafe24Supermagic-Bold-v1.0.woff); } @font-face { font-family: "cafe24"; font-weight: normal; src: url(Cafe24Supermagic-Regular-v1.0.woff); } 아래의 방식으로 외부 폰트를 추가해 줄 수 있다. @font-face { font-family: "내가 정해 줄 폰트명"; font-weight: 정수/굵기명 ; src : url(주소); } 이제 이미지를 준비하.. 2023. 8. 16. 이전 1 2 다음
