Copyright 2021.devkimsonAll rights reserved.
Categories
Tags
8
16
32
웹 게임 개발의 시작 🎮 모바일 게임을 모방해서 게임을 만들고 직접 해보고, 업데이트 하는 등 취미 삼아 시간이 뜰 때 게임을 개발하고 있습니다. 물론 거창한 게임은 아니지만 떠오르는 아이디어나 방법이 생각날 때면 적어두었다가 실행에 옮겨 자기만족하는 수준입니다. 오늘은 타입스크립트를 이용하여 2D 웹게임을 만드는 과정에 대해 이야기해보려고 합니다. 게임을 개발하게 된 계기는 어릴 적에 했던 환세취호전이라는 게임이 떠올랐고, 싱글플레이와 멀티플레이를 구현할 수 있지 않을까 하는 호기심이 생겼기 때문입니다. 어릴 땐 게임이라면 참 좋아라 했는데, 지금 다시 해봐도 흥미가 생기지 않더라구요. 😊 게임의 주요 요소가 무엇일까 🕹️ 제가 경험하고 생각한 게임의 주요 요소는 다음과 같습니다.
2025년 02월 05일
JavaScript 프로젝트 앱으로 만들기 최근 웹 게임을 제작하면서 앱으로 설치해서 게임을 즐겨보고 싶다는 생각이 들었습니다. 모바일 애플리케이션을 제작하는데 지식이 없었지만 항상 똑똑한 사람들이 편리한 도구를 제작하여 오픈소스로 제공하기 때문에 앱으로 빌드하는 도구 또한 있으리라 생각하고 무작정 시도했습니다. 기존 자바스크립트 프로젝트를 빌드하고 애플리케이션으로 빌드하고 APK 파일을 얻어내는 과정에서 많은 삽질이 있었고, 편리하게 APK로 만든 경험과 방법을 기록하려합니다. 시도해본 도구 중에서 ionic과 react native, cordova가 있었는데요. ionic은 apk로 빌드하는 과정에서 문제가 있는지 모르겠지만 apk 실행 시 마우스 이벤트가 오작동하는 등의 자잘한 문제가 있었습니다. cordova를 사용하여 빌드 한 후에는 마우스, 터치 이벤트가 정상 작동하여 cordova를 채택하게 되었지요. 때문에 앱 빌드에 많은 도움을 얻은 코르도바(Cordova)를 소개해드리려 합니다. Apache Cordova 아파치 코르도바는 코도바라고도 하며, 니토비가 만들고 어도비 시스템즈가 인수한 모바일 개발 프레임워크입니다. 오브젝티브 C 처럼 기기에 특화된 언어들 대신 자바스크립트, HTML5, CSS3을 이용해 모바일 기기를 위한 응용 프로그램을 만들 수 있게 도와 줍니다. 로고는 네모 박스에 귀엽게 생긴 캐릭터가 평평하게 붙여진 모양입니다. 여담이지만 이전 명칭은 "코도바"가 아닌 "폰갭"이었다고 하네요.
2023년 10월 10일모방 할 게임 찾기 여유 시간을 가질 때면 항상 무언가를 만들기 위해서 찾아보고 직접 구현하는 시간을 가졌습니다. 그림을 그리거나 악보를 보며 기타를 치는 취미처럼 프로그램을 만들어 가지고 놀거나 지인에게 배포하여 함께 공유하기도 합니다. 지금까지도 그러고 있습니다. 이제까지 생각만 했던 게임을 만들어보고자 했습니다. 해당 게임은 위메이드플레이에서 개발, 유통한 모바일 게임입니다. 친구들과 순위로 경쟁도하고 스팸같은 하트 메세지도 남발했습니다 🤔 모방할 게임을 선정하고 필자가 사용하는 언어와 지식으로 제작해보고자 했습니다. 막연하게 "만들어 봐야지"로 시작했다가 완성하긴했지요. 게임 규칙 파악하기 모방하고자 하는 게임은 셀 수도 없을 만큼 많을 수 있습니다. 어떤 게임이 됐건 간에 만들어보고 시행착오를 겪으면서 기술을 이해하는데 목적이 있는 것이기 때문에 부담가질 필요도, 좌절할 필요도 없다고 생각합니다. 모방할 게임은 애니팡입니다. 애니팡을 기준으로 규칙을 나열해봅시다.
2023년 10월 06일
체스 게임 구현 이전에 만든 체스가 버그 투성이라 다른 방식으로 접근해서 구현했습니다. 혹시 코드를 보시고 싶은 분은 아래의 저장소 링크에서 확인하시기 바랍니다.
2022년 01월 17일
체스 게임 구현 저번에 올린 솔리테어처럼 코드를 하나씩 뜯어보며 만들어가는 포스팅이 아닙니다. 추후에 시간 될 때 차근차근 만들어나가는 포스팅을 하려합니다. 아래는 자바스크립트로 체스게임이 구현 되는지 테스트 해서 올리는 결과물입니다.
2022년 01월 13일
솔리테어를 만들어 보자 3편 얼른 기록하고 다른 공부를 하려다보니 급하게 올리게 되었습니다. 이전에 다음 포스팅에서 다룰 3가지를 먼저 알려드렸습니다. 1. 카드 이동 (묶음/단일) 2. 솔리테어 규칙 적용 3. 자동 카드 뒤집기 간단한 카드 뒤집기부터 해서 카드이동, 규칙 적용으로 대부분의 기능을 마무리 하도록 하겠습니다. 이후 주제는 타이머, 점수, 이동횟수, 자동완성이기 때문에 천천히 포스팅하려합니다.
2022년 01월 11일
솔리테어를 만들어 보자 2편 이전 편에 틀을 잡고 끝냈습니다. 이 다음은 저번 편에서 마지막 줄에 알려드린 카드 출력과 뽑기, 모으기를 구현하려합니다. 카드를 뽑고 모으고 출력하기만 하면 이제 규칙을 만들어 제어만 하면 완성이 됩니다. 이전에 만들었던 코드를 정제하면서 기록하려하니 시간이 배로 걸리는 느낌이 들지만 하나하나 만들어 봅시다.
2022년 01월 10일
솔리테어를 만들어 보자 1편 솔리테어는 대부분 컴퓨터에 설치되어 있는 것으로 알고 있습니다. 구글에서 솔리테어를 검색하면 나오는 게임이기도 하구요. 규칙과 카드를 짚거나 하는 등이 꽤 복잡하다고 생각이 듭니다만, 막상 게임을 하나하나 만들어 보니 어려운 작업은 딱히 없었다고 생각 됩니다. 솔리테어를 만들기에 앞서 규칙을 알아야합니다. 해본 사람들은 아실테지만 모르시는 분을 위해 규칙을 아래와 같이 나열해보겠습니다.
2022년 01월 10일