Web Dev/Game Development :: 게임개발 5

JavaSciprt로 3D 게임을 만들어보자 :: 맵 구성 (2/?)

JavaScript로 간단한 3D 게임을 만들며 배운 점 저번 포스트에서 기획을 위주로 알아봤고, 이번주에는 참고자료를 보며 주요 기능을 파악하고 구현을 해봤습니다. 주요 내용 3D 게임을 만들기 위한 필요한 내용 다음과 같이 추려봤습니다. 1. 맵과 캐릭터 그리기 2. 키보드 이벤트(이동, 점프) 3. 충돌 이벤트(벽, 코인) 3D 렌더링 세팅 3D 렌더링 세팅 완성본 👇 맵을 만들기 전에 3D를 렌더링 할 화면을 구성합니다. HTML로 구조 구성 index.html viewport 3D 렌더링을 감싸주는 TV같은 녀석 camera 상하좌우 카메라 위치 scene 3D 렌더링이 될 장소 floor 렌더링 될 맵, 히어로의 시작 장소 CSS로 3D 변환 3D를 만들어 주는 부분은 CSS가 담당합니다. 그..

JavaSciprt로 3D 게임을 만들어보자 (1/?)

JavaScript로 간단한 3D 게임을 만들며 배운 점 'JavaScript로 3D 게임을 만들어보자'는? js13KGames에 참가하며 기록합니다 js13KGames는 JavaScript로 13kb 이하의 게임을 만드는 대회입니다. Theme 발표를 기준으로 한 달 뒤에 종료됩니다. 3번째 참가고, 이번에는 간단한 3D 게임을 만들 예정입니다. 갓 취업한 웹 프론트엔드 개발자로 주로 주말에만 작업합니다 현재 상황은 테마 발표까지 2주가 남았고, 어떤 게임을 만들지 기획하고 있습니다. 주말 프로젝트이고 한 달 안에 만들어야 하기에, 찾아본 게임 기획중에서 꼭 필요한 사항이라는 것들을 정리해보고 있습니다. 간단한 게임 기획 테마 발표 전 -> '프로토타입' 기간, 테마 발표 후 -> '프로덕션' 기간으로..

게임 만들며 자바스크립트 배우기(0/7)

웹 개발을 독학하며 배우고 있습니다. FreeCodeCamp 커리큘럼을 따라가고 있고, 6개의 인증서를 다 받으면 풀스택이 될 수 있다고 하네요. 2번째 인증서까지 받았고 다음 부트스트랩으로 넘어가기전 자바스크립트를 제대로 다지기 위해 뭘 할지 생각하다가 한 동영상을 봤습니다. 바로 7개의 게임을 만들며 자바스크립트 배우기 (Learn JavaScript by Building 7 Games - Full Course) youtu.be/lhNdUVh3qCc 게임은 총 7개로 메모리 게임, 뱀 게임, 스페이스 인베이더, 개구리길건너기, 테트리스 등 있습니다. (Memory Game, Whack-a-mole, Connect Four, Nokia 3310 Snake, Space Invaders, Frogger, ..

자바스크립트로 게임만들기(3/7) - Connect 4

밑의 글로 내려가기전 이 글을 먼저 읽어보는걸 추천 드립니다. https://forgottenknowledge.tistory.com/entry/%EA%B2%8C%EC%9E%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%9A%B0%EA%B8%B007 게임 만들며 자바스크립트 배우기(0/7) 웹 개발을 독학하며 배우고 있습니다. FreeCodeCamp 커리큘럼을 따라가고 있고, 6개의 인증서를 다 받으면 풀스택이 될 수 있다고 하네요. 2번째 인증서까지 받았고 다음 부트스트랩으로 넘어가기전 forgottenknowledge.tistory.com 이번 게임은 조금 생소할 수도 있는..

게임 만들며 자바스크립트 배우기 (1/7) 메모리 게임(Memory Game)

밑의 글로 내려가기전 이 글을 먼저 읽어보는걸 추천 드립니다. https://forgottenknowledge.tistory.com/entry/%EA%B2%8C%EC%9E%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%9A%B0%EA%B8%B007 게임 만들며 자바스크립트 배우기(0/7) 웹 개발을 독학하며 배우고 있습니다. FreeCodeCamp 커리큘럼을 따라가고 있고, 6개의 인증서를 다 받으면 풀스택이 될 수 있다고 하네요. 2번째 인증서까지 받았고 다음 부트스트랩으로 넘어가기전 forgottenknowledge.tistory.com 결과물은 이렇게 나옵니다. 코딩에 ..

728x90