지난글:https://gall.dcinside.com/programming/1370753



오늘은 css 위주로함

기본적인 틀이 없으니까 더이상 진행을 못하겠음

기능은 만들어졌으니 대충 그럴듯하게 작동하도록 디지인 줘봤음




국비들을때도 css는 포기했었는데

지금 다시 하려니 숨넘어갈뻔했음

프론트 땔감은 css에 시간을 제일많이 소비하는게 분명함




암튼 시작화면 css를 적용한모습

대충 그럴듯해보인다

저렇게 팝업 띄우는것도 몰라서 구글에 레이어 팝업 검색봄




채팅창은 '형체'가 있는 수준으로는 꾸며줌

스크롤은 있는데 새 채팅뜰때마다 스크롤이 내려가는건 없음


그리고 누가 방에 누가 들어왔을때 이벤트 채팅창에 나타나게 함


채팅창이 ul 태그인데

<li> <span> 텍스트 </span> </li>

를 만들어서 추가하는 방식임

이거보다 더 간단하게 하는방법 없나

여튼 동작모습은 대충 이럼






대충 ui 어느정도 만졌고 캔버스에 실제 게임화면 그릴려고 캔버스좀 쉽게 다룰수있는 

라이브러리 없나 알아봄, 예전에 js 책볼때 저자가 추천하던 paper.js 라는거 한번 알아보기로함





캔버스로 화면그리는 라이브러리인데

패키지 용량이 6메가 씩이나함

아예 자체적으로 paperscript 라고 이름붙힌 기술을 소개하더라

스크립트 태그에 타입을 paperscript 라고 쓰면 자동으로 설정도 된데나

홈페이지에 튜토리얼 한두시간 정도 읽어보고 시작설정 방법이랑 개념 잡고있었는데




이거 보고 안쓰기로 결정함

마치 자전거가 필요해서 알아보고있는데 우주왕복선을 보고있는 그런느낌임

6메가 씩이나 하는 존나큰 라이브러리로 할수있는건 많을건데

지금 내수준으론 아니다 싶음






캔버스는또 내일 알아보는걸로 하고

오늘건 대충 마무리 지음

사실 채팅창이나 여러 게임메뉴를 canvas 안에다 담고싶었는데 캔버스안에 

요소에다 이벤트 등록하거나 그런건 못하더라고

그래서 일단은 게임 영역 표시한 캔버스 밖에다 저렇게 놔뒀는데




알고보니까 캔버스에다 그린게 아니라

캔버스는 게임 화면만 랜더링 하고 나머지 채팅창이나 메뉴는

캔버스 위에다가 표시하는거였음

다른 사이트는 어떻게 했나 알아본다고 웹게임 몇개 알아보다가

ㄹㅇ 이글 쓰는 와중에 방금 알았음 ㅋㅋㅋㅋㅋㅋ 



이거 토대로 내일 캔버스 화면 조정하고 만들어 봐야겠다