html5 canvas_html5 튜토리얼 팁을 사용하여 우주 게임을 만드는 예

HTML5 Canvas는 게임 개발에 도움이 되는 가벼운 이미지를 빠르게 생성할 수 있습니다. 이 섹션에서는 캔버스를 사용하여 웹 페이지에서 실행될 복고풍 스타일의 우주 비행 게임을 만드는 방법을 설명합니다. 이 게임은 주로 Canvas 기능을 사용하여 웹 게임을 개발하는 기본 원칙을 보여주기 위해 설계되었습니다. 이 우주 게임의 목표는 폭발하는 소행성이 흩어져 있는 별 필드를 통과하여 우주선을 안전하게 기지로 되돌리는 것입니다.
이 튜토리얼에는 게임을 실행하는 데 필요한 전체 코드가 포함되어 있습니다. 코드는 HTML5 Canvas 및 JavaScript를 사용하여 작성되었으며 별도의 주석이 달린 4개의 코드 예제가 포함되어 있습니다. 각 예에는 게임의 다양한 측면을 개발하는 데 필요한 주요 프로그래밍 작업이 포함됩니다. 네 번째 코드 예제에서는 모든 작업을 결합하여 화살표 키를 사용하여 폭발하는 붉은 소행성이 점재하는 별밭의 미로를 통해 우주선을 이동하는 완전히 작동하는 게임을 만듭니다. 우주선이 행성에 충돌하면 파괴됩니다. 안전하게 기지로 돌아가려면 소행성을 피하거나 충돌하기 전에 폭파시켜야 합니다. 배를 이동한 횟수와 발사한 폭탄의 수에 따라 포인트가 부여됩니다.
이 주제에는 HTML5 Canvas와 JavaScript를 사용하여 임의의 흰색 별 영역을 만들고 프리스비 모양의 주황색과 녹색 우주선을 그리는 방법을 보여주는 독립 실행형 주석이 달린 코드 예제가 포함되어 있습니다. 이 게임 이미지는 픽셀을 사용하여 만들어졌습니다. 즉시 모드를 사용하면 Canvas는 픽셀을 화면에 직접 배치할 수 있습니다. 이 기능을 사용하면 원하는 위치에 원하는 색상으로 점, 선, 도형을 쉽게 그릴 수 있습니다. 이 코드 예제에서는 수학적 베지어 곡선과 모양의 색상을 결합하여 우주선을 만드는 방법을 보여줍니다. 그런 다음 호로 만든 작은 원을 사용하여 별을 그리는 방법을 설명합니다.
이 코드 샘플에는 Canvas를 사용하여 이러한 게임 요소를 그리는 기본 원칙을 보여주는 다음 작업이 포함되어 있습니다.
1. 웹 페이지에 Canvas 요소 추가
2. 검정색 배경 만들기
3 . 배경에 임의의 별 그리기
4. 배경에 우주선 추가
코드 예제의 끝 부분에는 이러한 임무의 디자인과 구조 및 작동 방식에 대한 세부 정보를 설명하는 토론 자료가 있습니다.
캔버스 코드 예시:

코드 복사

코드는 다음과 같습니다.

캔버스 우주 게임
< /h1>

캔버스 代码示例讨论

本节说明本代示例的设计和结构。 它为您讲解代码的不同分，以及整同它们的方式。 Canvas 示例使用标准 HTML5 标头 ，以便浏览器可以将它区别 HTML5 规格的一part分加以区别。

代码分成两个主要part分：
1.主体代码
2.脚本代码

主体代码
현재 页face加载时,主体标记使사용 onload 函数调사용 canvasSpaceGame 函数。 Canvas 标主记是体的一分。 정了 ID 属性。 必须使用 ID ， 才能将 캔버스元素添加到页면적对象模型中。

脚本代码
脚本代码包括三个函数: canvasSpaceGame、stars 와 makeShip。 加载页face时将调用 canvasSpaceGame 函数。stars 와 makeShip DU是从 canvasSpaceGame 调사용적。

canvasSpaceGame 函数
加载页face时将调用此函数。 它通过재主体代码中使用 Canvas 元素 ID 来获取画布， 然后获取画布的上文，并准备好接受绘图。 将上下文初始化为 2D 画布后,使사용 fillStyle、Rect 와 fill 方法将画布绘제조为黑color。

stars 函数
此函数是从 canvasSpaceGame 调使用. 它使用 for loop 在に维平面上生成 50 个潜在的星星位置，然后使用 fillStyle 创建白color。 随建白color。 随后，会进行一项检查，确认 x, y 坐标是否与左上角过于靠近。 如果星绘제어得与左上角角过于靠近，则会将 fillStyle 更改为黑color，使其不会妨碍宇宙飞船。 随后，使用 arc 方法绘官每个星并使用 应的填充颜color 。
makeShip
此函数是从 canvasSpaceGame 调飞船。 使用一系列的 startPath、moveTo、bezierCurveTo、closePath、fillStyle 과 fill method ，绘system 个简单的宇宙飞船。
飞船是通过绘제조两个椭圆Adobe Illustrator CS5에서 Ai2Canvas를 사용하여 캔버스를 제작할 수 있습니다.到此示例的代码中。