Angular로 간단한 게임 만들어보기 - 4 (Angular 시작하기) <canvase, css>

안녕하세요. 엄티입니다.

 

간단한 게임을 만들기로 정했었는데 그 동안 고민을 조금 하다가

사다리 타기로 정했습니다.

그래서 일단 큰 구조는 처음 들어가게 되면

 1. 몇명이서 참여할 지를 입력받는 페이지,

2. 그다음 사다리가 돌아가는 플레이 페이지

 

이렇게 두 페이지가 필요할것 같네요.

페이지를 나누기에 앞서 일단은 한 페이지에서 사람수 입력과 사다리가 플레이되는 모습으로 구성해 보도록 하죠.

그다음에 페이지를 나누면 되니깐요.

 

그럼 일단 저번 포스팅에서 만들었던 main.html 수정해서 진행해 보도록 하겠습니다.

저번 포스팅 ng-route: http://eomtttttt-develop.tistory.com/4

Angular로 간단한 게임 만들어보기 - 3 (Angular 시작하기)

 

일단 canvas가 필요 합니다. 또한 제가 자주 사용하고 아주 전세계적으로 많이 사용하는 jquery를 다운받도록 하겠습니다.

jquery는 html에 element와 js를 아주 쉽고 강력하게 이어주는 매개체? 같은 존재이죠

다운로드는 https://jquery.com/download/ 여기서 받으시고

Download jQuery | jQuery

 

 

 

이렇게 index.html에 추가해 주시면 됩니다.

 

이렇게 사용 하시면 되요! 아주 간단하죠?http://gangzzang.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACjQuery-%EA%B8%B0%EB%B3%B8

제이쿼리(jQuery) 기본

 

그다음 main.html을 꾸며 보겠습니다.

일단 제 구성은 상단에 참여 인원수를 받을 수 있는 input box를 만들고 참여 인원이 확정 되면 그 밑에 각 사다리에 참여 하는 사람에 이름을 넣을 수 있고 이름을 클릭하면 결과를 알려주는 형식이 되면 좋을듯 하네요.  그럼 일단 결과창 부터!!!!!

 

1. 이렇게 접속하게 되면 인원수를 입력하는 화면이 나오게 되죠.

 

2. 이렇게 인원수를 입력하고 submit을 누르게 되면 참여하는 사람들이 이름을 쓸 수 있게 만들고 사다리가 플레이될 공간이 나오게 됩니다. 

사다리가 플레이 될 공간은 <canvas>로 그려볼 계획입니다.

 

 

 

 

자그럼 html 소스 및 css 그리고 js소스를 각각 보도록 하죠.

 

먼저 html!!!!

저는 보통 div를 사용하여 css에서 style을 하곤 하는데요 일단은 크게 두 부분이 보이네요.

등록하는 부분과 사다리가 보여지는 부분

또한 참여 인원을 등록하는 부분은 input box 및 button을 사용해서 form형태로 받아오면 좋을듯 하네요.

그리고 사다리가 플레이 되는 부분은 인원수를 입력하고 button을 눌렀을 때 보이면 좋을듯 하고요.

 

 

1, 일단 빨간 선으로 등록 부분과 플레이 부분을 나눠놨습니다.

   이렇게 함으로서 등록 페이지를 만들때 register-container만 가져 갈 수가 있겠죠?

 

2. 파란 박스를 보시면 ng-show가 있는데 인원수를 입력하면 이부분을 true로 만들어 주어서 사다리가 플레이 되는 공간을 보여주도록 합니다. 

단 여기서 ng-show와 ng-if가 있는데 두개의 차이는 간단히 말하면

ng-show는 처음 화면을 렌더링 하고 display를 보여주고 말고의 차이라면

ng-if는 아예 처음부터 화면을 렌더링을 하지 않아요 따라서 인자가 true가 될때 화면을 렌더링 하게 되죠.

 

3. ng-model 부분인데요 이부분은 form data를 제출 했을 때네 controller로 인자를 보내게 되요.따라서 controller에서는 $scope.inputNum으로 불리게 되고 form data를 submit했기 때문에 controller에 registerNum이라는 함수가 불리게 되죠.

 

4. 마지막으로 ng-repeat부분인데요 이부분은 for문이라고 생각하시면 쉬울 듯 해요. view를 그릴때에 저 'people-name-input-content' div를 반복해서 그려주는 함수이죠. ng-model은 역시 input box에 표시되는 부분이고 input box를 통해 입력받은 인자는 ng-model로 들어가죠. 

그럼 여기서 controller의 구성은 일단 참여 인원수를 받게 되면 분홍색 박스에 inputBoxList를 인원수 만큼 만들어 준 뒤, ng-repeat을 사용하여 총 참여 인원들이 이름을 입력 할 수 있는 input box를 만들어 주게 되는거죠.

 

그다음 css파일을 보겠습니다. 이는 아주 간단하고 스타일이기 때문에 따로 설명은 깊게 드리지는 않겠어요.

 

위와 같이 '.'으로 시작하게 되면 html element안에서 class로 맵핑이 되게 되죠. (참고 아이디는 '#' 로 시작)

웹에서는  css 파일을 읽고 html에 class 또는 id를 찾은 뒤 그 element에 스타일을 적용 시켜 줍니다. 

한가지 주의하실 점은 class는 중복되도 되지만 id는 중복되면 안된다는 점이고요 같은 class를 쓰게 되면 나중에 읽힌 class로 스타일이 맵핑된다는 점. 이점에 대해서는 따로 금방 찾아보시면 바로 나오고요 아주 기초적인 부분이니 일단 넘기도록 하겠습니다.

참고 url: https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90

각각 스타일에 용어는 모르시는 분은 댓글을 통해 물어보시면 친절히 알려드리고 인터넷에 찾아보면 바로 나와요.

 

마지막으로 main controller를 보도록 하겠습니다.

일단 저는 public한 함수와 private한 함수 두가지를 나눠서 사용하는데요.

기준은 public한 함수는 html 파일에서 부를 수 있고 $scope로 다시 맵핑 해줘야하죠.

private한 함수는 이 controller내에서만 사용합니다.

 

이렇게 보시게 되면 먼저 'registerNum'이란 함수는 앞서 보셨듯이 html파일에서 참여 인원을 입력한뒤 submit을 누르면 부르게 되는 함수죠 public한 함수이기 때문에 마지막줄에 보시면 

$scope.registerNum = registerNum; 으로 맵핑 해줬죠

일단 누르게 되면 private함수인 _isSupportNum 이란 함수가 불리는데 이는 기존에 적용해 두었던 2명 이상 10명 이하의 참여 인원을 충족시키는지 확인해 주는 함수입니다.

따라서 인원수가 우리가 생각한 조건에 맞다면

 

1. 아까 ng-repeat에서 불러주던 배열($scope.inputBoxLIst = [])을 초기화 해주고 

2. 그 배열($scope.inputBoxLIst) 안에 입력받은 인원 수 만큼 요소를 넣어 준 뒤 

3. $scope.showLadder = true로 만들어 html에서 ladder-paly-container를 보이게 합니다. 

4. 그 다음 jquery를 통하여 canvas tag를 가져오고 canvas를 그리기 width를 설정해 줍니다..

 

여기서 중요할 점은 c.width인데요 이는 canvas에 width를 알려주는 함수죠.

이렇게 짠 이유는 스타일 때문인데요 css 파일을 보시면 input box를 안고 있는 container가 각 100px이고 controller에 NAME_CONTAINER_WIDTH 도 100 인데요 거기다가 곱하기 인원수를 하는데 딱 봐도 아시겠죠?

입력 받은 인원수 만큼 이름입력칸을 만들고 사다리가 그려지는 곳에 총 넓이를 이름 입력받는 부분과 똑같이 만드려는 거죠. 어려운건 아니고 그냥 시각적 효과에요.

밑에와 같이 빨간선이 NAME_CONTAINER_WIDTH 이고

파란색이 NAME_CONTAINER_WIDTH * 인원수 에 크기죠

 

 

그럼 일단 인원수를 받고 그 크기만큼 사다리 플레이 공간을 그려주는것 까지 마무리가 됬네요

다음에는 실제로 사다리를 그려보도록 하죠.

 

틀린점이 있거나 궁금한 점이 있으면 댓글을 통하여 알려주세요.

그럼 이만~

 

오늘 포스팅한 자료들을 모아봤어요. 참고해 주세요~

 

main.controller.js

다운로드

main.css

다운로드

main.html

다운로드

index.html

다운로드