캔버스를 사용하여 우주 게임을 만드는 방법

이 자습서에서는 HTML 5 캔버스 기능을 사용하여 아케이드 스타일의 구형 우주 게임을 개발하는 방법을 보여 줍니다.

이 조항의 내용

항목설명

HTML5 Canvas 및 JavaScript를 사용하여 게임용 배경과 우주선 그리기

이 항목에서는 HTML5 Canvas 및 JavaScript를 사용하여 게임용 별 필드 배경과 비행 우주선을 그리는 방법에 대해 설명합니다.

HTML5 Canvas 및 JavaScript를 사용하여 게임에서 우주선 이동

이 항목에서는 배경 및 우주선 그리기 항목에서 만든 녹색과 주황색의 우주선을 HTML5 canvas와 JavaScript를 사용하여 이동하는 방법을 설명합니다.

HTML5 Canvas 및 JavaScript를 사용하여 게임에서 우주선 간 충돌 감지

이 항목에서는 우주선과 화면에 있는 다른 개체 간의 충돌을 감지하는 방법에 대해 설명합니다.

HTML5 Canvas 및 JavaScript를 사용하여 게임 및 트랙 점수 계산에서 장애물 제거

이 항목에는 HTML5 Canvas와 JavaScript를 사용하여 우주선에서 장애물을 제거하고 점수를 추적하는 방법을 보여주는 독립형 주석 코드 샘플이 포함되어 있습니다. 샘플 코드는 게임에서 HTML5 canvas와 JavaScript를 사용하여 우주선 간 충돌을 탐지 항목의 코드를 기반으로 합니다.

 

HTML5 canvas는 게임 개발에 유용한 빠른 경량 그래픽을 만들 수 있습니다. 이 섹션에서는 캔버스를 사용하여 웹 페이지에서 실행되는 복고풍의 우주 비행 게임을 만드는 방법에 대해 설명합니다. 이 게임은 캔버스 기능을 사용하여 웹용 게임을 개발할 수 있는 방법의 기본 원칙을 보여 주기 위한 것입니다. 이 우주 게임의 목적은 폭발하는 소행성의 무리를 통과하여 우주선을 기지로 비행하는 것입니다.

이 자습서에는 게임 실행을 위한 전체 코드가 들어 있습니다. 이 코드는 HTML5 canvas와 JavaScript로 작성되었으며 독립 실행형 주석 코드 샘플 4개로 이루어져 있습니다. 각 샘플은 게임의 서로 다른 측면을 개발하는 데 필요한 주요 프로그래밍 작업을 다룹니다. 네 번째 코드 샘플에서는 모든 작업이 결합되어 실행 가능한 전체 게임을 만듭니다. 게임 방법은 화살표 키를 사용하여 폭발하는 빨간색 소행성의 무리 사이로 우주선을 이동하면 됩니다. 소행성에 부딪치면 우주선이 파괴됩니다. 안전하게 기지로 돌아가려면 충돌하기 전에 소행성을 피하거나 폭파시켜야 합니다. 점수는 우주선을 이동한 횟수와 발사한 폭탄 수를 기준으로 계산됩니다.

캔버스는 사용하면 다양한 웹 기반 게임을 만들 수 있습니다. 캔버스는 immediate mode로 작동하며 그래픽을 화면에 바로 렌더링하기 때문에 효율적인 개발 도구입니다. retained mode 시스템과 달리 화면이 그려지기 전에 수행되는 중간 단계가 없습니다. 따라서 캔버스의 즉시 모드를 사용하면 다른 그래픽 기술보다 더 적은 메모리를 사용하며 빠르게 실행되는 게임을 개발할 수 있습니다. 캔버스의 또 다른 이점은 픽셀을 사용하여 화면에 화상을 만들고 읽는 방식입니다. 각 픽셀을 개별적으로 변경하면 복잡한 애니메이션을 쉽게 구현할 수 있습니다. 뿐만 아니라 캔버스는 이전에 화면에 그려진 픽셀을 감지할 수 있습니다. 이 기능을 통해 게임 프로그램에서 개체가 충돌하는지 여부를 확인할 수 있습니다. 충돌 감지는 빠른 액션 게임 플레이를 만드는 데 필요한 요구 사항입니다.

이 자습서의 코드 샘플은 4가지 게임 프로그래밍 작업의 기본 원칙을 보여 주기 위해 가능한 한 단순하게 작성되었습니다. 샘플이 단순하고 확장과 사용자 지정이 용이하므로 사용자가 고유한 웹 게임을 만들 수도 있습니다. 코드 끝에는 각 코드 부분의 디자인과 구조를 설명하고 각 부분이 결합되는 방식을 보여 주며 추가 정보 링크를 포함하는 토론 자료가 나와 있습니다. Canvas 프로그래밍에 대한 자세한 내용은 MSDN Canvas Reference를 참조하세요.

관련 항목

HTML5 Canvas

 

 

표시:
© 2014 Microsoft