HTML

CSS line-height

div 태그 안의 텍스트를 가운데 정렬 하고 싶을 때는 text-align을 center로 설정한다. 그러나 text-align 속성으로는 가로축 가운데 정렬만 가능하기 때문에 div 영역의 제일 위 가운데에 텍스트가 배치된다. 세로축 가운데 정렬을 위해서는 여러 방법이 있지만 제일 간단한 방법은 line-height를 이용하는 방법인 것 같다. line-height는 줄 높이를 설정하는 속성이다. line-height: normal | length | number | percentage | initial | inherit ; normal : 웹브라우저에서 정한 기본값 (보통 1.2) length : 길이 number : 글자 크기의 n배 percentage : 글자 크기의 n% initial : 기본값..

Font Awesome : HTML에 아이콘 삽입

리셋 버튼 디자인을 위해 html에 아이콘을 삽입해야 해서 아이콘 사용 방법을 찾아왔다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 위 사이트에 접속해 회원가입을 하고 하라는대로 하면 된다. html 헤드에 를 삽입하고, 사이트에서 원하는 아이콘을 검색한 후 해당 아이콘의 i태그를 복사해 사용하면 된다.

JS LocalStorage

게임을 로비 화면과 게임 플레이 화면으로 분리하면서 html 페이지 간 데이터를 공유해야 했다. (현재 플레이 중인 스테이지, 최고 점수, 현재 점수, 쿠키 체력 등) 따로 서버를 이용하지 않고도 페이지 간 데이터를 전달하는 간단한 방법이 있다. https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org LocalStorage에 원하는 값을 저장하면 명시적으로 연결(import)되어..

JS classList

저번 글에서 html class에 대해 정리했었는데, js 코드를 이용해 이를 제어할 수 있다. Element.classList는 엘리먼트의 클래스 목록을 반환하는 읽기 전용 프로퍼티다. 그러나 add(), remove() 등의 메서드를 통해 클래스 목록을 제어할 수 있다. 다음은 classList의 메서드들이다. classList.add( class1, class2, ... ) 엘리먼트에 클래스 이름 추가 이미 있는 클래스를 추가하고자 하는 경우 추가되지 않는다. 여러 클래스를 동시에 추가할 수 있다. classList.remove( class1, class2, ... ) 엘리먼트에서 클래스 제거 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않는다(null 반환). 여러 클래스를 동시에 제거..

HTML class / CSS 다중 선택자

html에서 클래스는 자주 사용하는 스타일(css)을 묶어놓기 위해 사용한다. class 1 class 2 이런 구조다. 태그 뒤에 class="클래스명"을 입력하고, css 코드에서 클래스를 어떻게 꾸밀지 정의한다. 저번 css 정리에서도 썼지만 클래스를 selector로 호출할 경우 클래스명 앞에 .을 쓰면 된다. 하나의 태그에 여러 개의 클래스를 동시에 적용할 수 있다. TEST 클래스 이름에 공백은 허용되지 않기 때문에 띄어쓰기만 해주면 class1, class2, class3을 모두 가진다는 뜻이 된다. 이 부분이 헷갈리는 부분인데.. css 코드에서 selector로 클래스 여러 개를 선택하는 경우는 어떻게 쓸까? 1. 이어서 쓰는 경우 .class1.class2 { } class1과 clas..

크롬 공룡 게임 만들기(4/4): 장애물 충돌 체크

이번에는 공룡과 장애물이 충돌하는 경우를 체크하고, 우리의 주인공들을 네모네모가 아니라 캐릭터 이미지로 바꿔보도록 하겠다. 매우 허접하지만 이 단계까지 하고 나면 대충 게임의 구색은 갖출 수 있다. 우선 두 유닛이 충돌하는지를 확인하는 함수 isBumped를 구현했다. function isBumped(dino, cactus) { var xDif = cactus.x - (dino.x + dino.width); var yDif = cactus.y - (dino.y + dino.height); if (xDif < 0 && yDif < 0) { ctx.clearRect(0, 0, canvas.width, canvas.height); cancelAnimationFrame(animation); } } 충돌 여부는 ..

크롬 공룡 게임 만들기(3/4): 장애물 관리 및 점프 구현

앞의 포스팅에서 일정 시간마다 장애물을 생성해 cactuses 배열에 넣어 관리하는 코드를 작성했었다. 오늘은 게임 키를 구현하기에 앞서 이미 지나간 장애물을 삭제하는 코드를 먼저 추가해 보겠다. 이미 지나가 화면에 보이지 않는 장애물을 배열에서 제거해 주지 않는다면, 게임 플레이 시간이 늘어남에 따라 배열에 담긴 장애물 수도 계속해서 증가할 것이다. 이건 바람직하지 않기 때문에 장애물을 생성하고 배열에 추가한 후 화면에 그리는 코드를 수정해 보도록 하겠다. if (timer % 240 === 0) { var cactus = new Cactus(); cactuses.push(cactus); } cactuses.forEach((a, i, o) => { if (a.x < 0) { o.splice(i, 1);..

크롬 공룡 게임 만들기(2/4): 공룡과 장애물 만들기

이제 본격적으로 main.js를 작성해 보자. 공룡 게임에 사용되는 유닛에는 크게 공룡과 장애물이 있다. 이런 등장 요소의 속성을 객체로 정리해 두면 편리하다. 객체란 관련된 데이터와 함수(객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다)의 집합이라고 보면 된다. 생각해 보면 게임에서 공룡은 한 마리만 있으면 되지만, 장애물은 여러 개가 있어야 할 뿐만 아니라 각각의 속성이 다를 수 있다. 쿠키런에서 1단 점프를 해야 하는 장애물과 2단 점프를 해야 하는 장애물이 있는 것 처럼.. 이렇게 비슷한 여러 객체를 만들어야 할 때 사용하는 것이 클래스다. 클래스를 쿠키 틀이라고 한다면 객체는 그 쿠키 틀로 찍어낸 쿠키 반죽이라고 할 수 있겠다. 쿠키 틀을 하나만 구비해 놓으면 쿠키를 하나하나 빚을 필요 ..