안녕하세요.
가산에 있는 국비지원IT학원 구디아카데미입니다.
오늘은 GDJ11기인!! Angular 2회차 과정에서
Html, CSS, JavaScript, jQuery를 활용해 간단한 게임을 만드는 실습을 했습니다.
(*GDJ란? Goo Dee Java 의 약자로 구디아카데미 자바과정을 의미하며 뒤에 숫자는 기수입니다.)
우선, Html, CSS, JavaScript, jQuery가 뭐지?
이것만 알면 게임을 만들 수 있는 건가?
하시는 분들을 위해 간단히 설명을 해보면요.
게임을 어떻게 하는지 보여준 뒤 어떻게 만들었는지도 같이 살펴보았답니다.
이과장님이 개발자가 되려면 이것저것 많이 코딩해보는 것도 중요하지만
다른사람이 코딩한 것을 보는 것도 많은 도움이 된다고 늘 말씀하셨죠!
8조 보드게임의 경우 말(자동차)의 움직임을 구현 할 때
Class마다 말을 넣어놓고 ‘red-on’일 때만 해당 칸의 말(자동차)이 보이도록 구현했습니다.
또 특정시간마다 특정 함수를 계속 호출해서 실행 시키는 setInterval(function, duration)함수를 사용하여
말(자동차)이 한 칸씩 이동하도록 만들었습니다.
그 다음 소개드릴 게임은 3조(성현씨, 주원씨, 진희씨, 종현씨)가 만든 스릴 있고 재미있는 방탈출 게임입니다.
기존의 방 탈출게임과 게임방법은 동일합니다.
방 탈출 게임이란? 방을 탈출하기 위해 단서를 모아 추리하는 추리게임입니다.
①번 같은 단서를 클릭하면 단서를 획득 했다는 화면이 나오고 단서함(②번)에 들어가면 모은 단서를 확인 할 수 있습니다.
또 단서함에 들어가 단서를 클릭하면 ④,⑤,⑥ 같은 버튼이 활성화 됩니다.
기본적으로 돋보기(⑥)를 클릭하면 단서를 자세하게 볼 수 있고 ④를 클릭하여 획득한 단서를 사용 할 수도 있고
2개의 단서를 합치거나 분리(⑤)해 새로운 단서를 획득 할 수도 있습니다.
단서를 사용하게 되면 ⑦번처럼 표기가 되고 방을 탈출하기 위해서는
⑧의 비밀번호 4자리를 알아내낸 후 입력하면 탈출에 성공 할 수 있습니다.
성현씨가 게임 테스트를 부탁해서 해봤는데 저는 아주 금방(?) 척척척 풀었습니다.
이런 유형의 게임을 좋아하는 저에게는 너무 재미있었던 게임이었습니다. :-)
방탕출 게임의 경우 여러 방의 이미지를 겹쳐 놓은 다음 문 그림을 클릭 시 다른 방으로 넘어가게 되는데
이 부분은 해당 방에 대한 이미지만 켜줌으로 방에서 방으로 이동하는 것처럼 구현했습니다.
즉, FR(ON)을 선택했을 경우 SR화면과 TR화면은 OFF되어 FR의 이미지만 보이도록 했고
여기서 FR은 첫 번째 방의 약자 (First Room)을 의미합니다.
그리고 아이템 획득 이미지는 인라인 블록으로 이미지위에 이미지를 겹쳐보이도록 변환을 주어 구현했다고 하네요.
주차장님도 와서 보시고선 잘 만들었다고 칭찬해주셨습니다. :-)
마지막으로 소개해 드릴 게임은 7조(진석씨, 한수씨, (김)건우씨)의 던전형 RPG게임입니다.
기능을 살펴보면 마우스 다운으로 배경을 움직이게 했고
변수로 적이 나오도록 기능을 구현 했으며
다른 조에서 사용하지 않은 Delay기능을 사용해
처음 화면에서 스토리가 자연스럽게 흘러가도록 만들었습니다.
어쩐지 스토리가 마치 애니매이션을 보는 것 같았어요 ㅋㅋㅋ
그 외 다른 조 게임을 살펴보면
성우씨, 민균씨, 건희씨, 동현씨는 검강화하기 게임을 만들었습니다.
검을 강화시켜 장병들한테 주고 괴물과 싸우는 게임인데
검강화시 단계별로 확률이 있는데 확률이 낮을 때는 방지권을 사용하셔야 해요!
안 그러면.. 강화 실패 시 무조건! 1단계 검으로 돌아가요ㅠ
다음은 4조(균호씨, 태헌씨, (조)건희씨)의 비트코인으로 빚 갚기 게임입니다.
지금까지 해본 게임 형태가 아니라 신성했지만, 게임을 이해하는 데는 시간이 조금 필요했답니다.
그리고 게임에는 막노동이 있는데 비트코인으로 빚을 갚는 것보다 막노동으로 갚는 게 더 쉬운 게임으로
숨은 교훈이 있는 게임이었습니다.ㅋㅋㅋ
COMMENT (1)개