본문 바로가기

전체 글40

Flutter - 가장 빠르고 아름다운 네이티브 앱 분류 UI 프레임워크 (GUI SDK) 크로스 플랫폼 프레임워크 안드로이드 iOS 구글 퓨시아 웹 플랫폼 mac OS 마이크로소프트 윈도우 리눅스 회사 구글 Google 출시 2017년 5월에 최초 릴리즈 Mobile World Congress 2018에서 최초 정식 베타 릴리즈 Google은 2018년 출시 이후 꾸준히 Flutter를 업데이트해 왔으며, 여기에는 macOS와 Linux로 안정적 지원을 확장한 2022년 Flutter 3 업데이트가 포함됨 주요 비교 제품군 (개발언어) Flutter (Dart, C/C++) React Native (Javascript) Xamarin (C#) 주요 개발 툴 (환경) Visual Studio code Android Studio 대표적인 Flutter 앱 .. 2023. 1. 23.

자바스크립트 오목 게임 개발 #7 이번 회차에서는 오목판 위에 실제 오목돌을 그리는 클램스 멤버함수 및 호출 부분을 구현해 보겠습니다. 오목판의 특정 위치를 마우스로 좌클릭하면 흑돌부터 순서대로 그려지도록 합니다. Omok 클래스 멤버함수 추가 (omok.js) 오목돌을 그리기 위한 Omok 클래스의 멤버함수를 구현합니다. 오목돌 그리는 방법 먼저 오목돌을 그리는 방법에 대해 정리한 후에 실제 코드를 작성합니다. 오목돌은 마우스 클릭 이벤트 발생시점에 해당 위치에 직접 그려주는 방법도 있지만, 여기에서는 아래와 같이 오목돌 착수정보를 관리하는 배열에 추가(push) 한 후에 착수정보배열을 기준으로 전체 오목돌을 다시 그려주는 방법으로 구현해 보겠습니다. 오목위치 구하기 canvas상의 마우스 클릭 위치 좌표를 오목판 사이즈(15*15 o.. 2023. 1. 22.

자바스크립트 오목 게임 개발 #6 이번 회차에서는 오목게임의 근간이 되는 오목클래스를 디자인하고 우선 오목판을 그려봅니다. 오목클래스는 개발이 완료될 때까지 단계적으로 구현해야 할 중요한 영역입니다. 객체지향의 핵심이 되는 클래스/객체 개념은 별도로 꼭 학습해 보시길 권장합니다. 오목클래스 정의 오목클래스는 오목게임의 중요한 로직을 담고 있는 핵심클래스가 됩니다. 단계적으로 진행하면서 계속 개발하고 보완해 나갈 예정입니다. 멤버변수 오목의 여러 속성들을 멤버변수로 정의합니다. 주요 상수 정의 게임환경변수 정의 오목판정보 배열 정의 //상수 정의 VACANT = ''; BLACK = 'black'; WHITE = 'white'; HUMAN = 'H'; COM = 'C'; Alphabet = ['A', 'B', 'C', 'D', 'E', '.. 2023. 1. 21.

자바스크립트 오목 게임 개발 #5 본격적으로 자바스크립트로 개발을 시작해 보겠습니다. 오목게임 흐름(Flow) 먼저 오목게임이 어떤 순서로 처리되는지 전체적인 Flow를 도식화해서 정리해 봅니다. 전체 게임 흐름 시작버튼 클릭 이벤트 처리 사람 착수 클릭 이벤트 처리 전체 게임 흐름 게임 설정 : 게임에 필요한 변수 선언 및 초기값 할당 등의 설정을 처리합니다. 이벤트 설정 : 게임에서 발생할 수 있는 이벤트를 생성하고 이벤트 발생 시 처리할 콜백함수 내용을 구현합니다. 이벤트 대기 : 이벤트 발생을 대기합니다. 이벤트 처리 : 발생한 이벤트에 대한 콜백함수의 내용을 처리합니다. 시작버튼 클릭 이벤트 오목객체 생성 : 오목게임을 시작하기 위해 오목클래스에 대한 객체를 생성하고 게임을 시작합니다. 컴퓨터 착수 처리 : 흑 선수가 컴퓨터인 .. 2023. 1. 20.

자바스크립트 오목 게임 개발 #4 이 번 회차에서는 CSS를 포함해서 전체적인 HTML코드를 작성해 보겠습니다. HTML body 작성 이전 회차에서 설계한 내용을 기준으로 HTML의 body를 각 영역별로 작성합니다. canvas 영역 canvas 영역은 오목판을 그리기 위한 영역이므로 오목판 격자수와 격자의 길이를 대략 정해서 전체 사이즈를 지정해 줍니다. 15*15인 경우 가로 세로 14개, 19*19인 경우 18개의 정사각형을 그려주면 각각 15*15, 19*19의 격자무늬 오목판이 생성됩니다. 오목판 주위의 여백을 고려하여 대략 아래와 같이 사이즈를 지정해 줍니다. canvas사이즈는 개발하면서 조금씩 조정해 가면 됩니다. 오목판 사이즈 선택 영역 이 영역은 게임 오목판의 사이즈를 선택하기 위한 영역으로 15*15와 19*19 .. 2023. 1. 20.

자바스크립트 오목 게임 개발 #3 이 번에는 게임 화면을 디자인하고 HTML로 간단하게 구성을 해보겠습니다. 화면 디자인 개발할 게임화면을 Wireframe으로 간단하게 설계해 봅니다. 오목판 선택한 사이즈에 따라 오목판을 그립니다. 기본적으로, 15*15 사이즈가 표준이지만 오프라인 오목게임 시 바둑판(19*19 사이즈)을 주로 사용하기 때문에 선택할 수 있도록 구현해 보겠습니다. 게임 상대 일단, 다른 사람과 게임할 수 있도록 오목게임의 기본 형태를 개발합니다. 추가적으로, 컴퓨터와 대전할 수 있도록 컴퓨터 착수 로직을 개발합니다. 상대를 컴퓨터로 선택한 경우 흑선수를 누가 할지 선택하도록 합니다. 기능 버튼 (재)시작 : 처음 또는 게임 중간에 (재)시작버튼을 누르면 다시 게임을 시작할 수 있도록 초기화합니다. 무르기 : 게임 도중.. 2023. 1. 20.

자바스크립트 오목 게임 개발 #1 잘 알려져 있는 오목게임을 Javascript로 만들어 보면서 오목게임과 Javascript의 기본을 동시에 배울 수 있는 시리즈입니다. 오목에 대해 좀 더 상세히 알아보고 Javascript로 어떻게 개발할 수 있는지 같이 공부해 봅시다. 오목의 규칙 먼저 오목의 기본 규칙에 대해 알아봅니다. 여러 규칙들이 존재하지만, 여기에서는 Javascript로 구현할 기본 규칙을 정의하는 차원에서 정리해 보겠습니다. 두 명의 선수가 흑과 백을 번갈아 가면서 가로 세로 15칸으로 된 보드에 둡니다. 첫 수는 항상 보드의 정 중앙에 흑을 먼저 둡니다. 돌은 반드시 가로줄과 세로줄의 교차점에 두어야 합니다. 가로 세로 대각선으로 5개의 돌을 먼저 두는 선수가 승리합니다. 중간에 끊기거나 막히지 않게 가로 세로 좌우대.. 2023. 1. 19.

자바스크립트 오목 게임 개발 #2 오목게임을 개발하기 위한 준비사항을 알아보고 개발할 게임에 대한 기본 구상을 해 보겠습니다. 그리고, 개발에 필요한 Javascript의 기본 문법과 기능을 간략하게 알아보겠습니다. 준비사항 게임을 개발하기 위한 개발환경에 대해 알아봅니다. 웹 브라우저 Javascript 코드를 실행하기 위한 환경입니다. Javascript는 기본적으로 웹 브라우저 기반에서 실행되기 때문에 Google Chrome을 기본으로 사용합니다. https://www.google.com/intl/ko/chrome/ 에서 다운로드하여서 설치할 수 있습니다. 에디터 Javascript 코드를 작성하기 위한 에디터입니다. Javascript는 별도의 컴파일 환경이 필요하지 않기 때문에 전용 개발툴이 존재하지 않습니다. 대신, 개발을 .. 2023. 1. 19.

이전 1 2 3 4 5 다음

티스토리툴바