diff options
Diffstat (limited to 'files/ko/games/tutorials/2d_breakout_game_phaser')
| -rw-r--r-- | files/ko/games/tutorials/2d_breakout_game_phaser/index.html | 64 | ||||
| -rw-r--r-- | files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html | 73 |
2 files changed, 137 insertions, 0 deletions
diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/index.html new file mode 100644 index 0000000000..5ef42088c5 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_phaser/index.html @@ -0,0 +1,64 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Tutorials/2D_breakout_game_Phaser +tags: + - 2D + - Beginner + - Canvas + - Games + - JavaScript + - NeedsTranslation + - Phaser + - TopicStub + - Tutorial + - 게임 + - 자바스크립트 + - 초급자 + - 캔버스 + - 튜토리얼 +translation_of: Games/Tutorials/2D_breakout_game_Phaser +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div> + +<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}}</p> + +<p class="summary">이 튜토리얼을 차례차례 진행하면서 우리는 HTML5 {{htmlelement("canvas")}} 로 렌더되는 순수한 JavaScript로 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다.</p> + +<p>모든 과정은 플레이 가능하고 편집가능한 라이브 샘플을 포함하고 있습니다. 이 샘플을 통해, 여러분은 중간 스테이지들이 어떻게 보여져야 하는지 확인할 수 있습니다. 여러분은 이미지의 렌더링과 움직임, 충돌 감지, 컨트롤 메카니즘들과 승리와 패배 상태와 같은 기본적인 게임 원리들을 구현하기 위해서, {{htmlelement("canvas")}}엘리먼트의 기본적인 사용 방법을 배우게 될 것입니다.</p> + +<p>이 시리즈를 최대한 활용하려면 중급의 <a href="/ko/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> 지식이 있어야 합니다. 이 튜토리얼을 끝낸 후에는 여러분은 스스로 간단한 웹 게임들을 만들 수 있게 될 것입니다.</p> + +<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p> + +<h2 id="강의_내용">강의 내용</h2> + +<p>모든 강의 내용과 우리가 함께 만드는 <a href="http://breakout.enclavegames.com/lesson10.html">MDN 벽돌깨기 게임</a>의 다른 버전들은 <a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub</a>에서 찾을 수 있습니다.:</p> + +<ol> + <li><a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">공 움직이기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">벽으로 부터 튕겨나오기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">패들과 키보드 컨트롤</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">게임 오버</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">벽돌 필드 만들기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">충돌 감지</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">점수 추적과 승리</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">마우스 컨트롤</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">마무리</a></li> +</ol> + +<p>웹 게임 개발의 확고한 지식을 얻기 위해 순수한 JavaScript로 시작하는 것은 최고의 방법입니다. 이후에, 여러분은 프로젝트에 프레임워크를 골라서 사용할 수도 있습니다. 프레임워크들은 JavaScript로 만들어진 툴일 뿐입니다. 따라서 여러분이 프레임워크를 사용하더라도, 프레임워크 밑에서 정확히 어떤 일이 어떤일이 일어나는지 알기 위해 언어를 배우는것은 좋은 일입니다. 프레임워크들은 개발 속도를 올려주고, 게임의 지루한 부분들을 해결하는데 도움을 줍니다. 하지만 어떤 일들이 기대한대로 일어나지 않는다면, 여러분은 디버그를 시도하거나 여러분 스스로 순수한 JavaScript로 솔루션을 작성할 수 도 있습니다.</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>노트</strong></span>: 만약 여러분이 게임 라이브러리를 이용한 2D 웹 게임 개발의 학습에 흥미가 있다면, 이 시리즈의 대응 파트인 <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>를 살펴보시기 바랍니다.</p> +</div> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>노트</strong></span>: 이 시리즈의 내용들은 게임개발 워크숍의 재료로 쓰일 수 있습니다. 또한, 만약 여러분이 게임개발에 있어 강연을 원한다면 이 튜토리얼에 기초한 <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>를 활용할 수 있습니다.</p> +</div> + +<h2 id="다음_단계">다음 단계</h2> + +<p>좋습니다, 이제 시작하도록 합시다. 첫 번째 챕터인 <a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a> 부터 시작합니다.</p> + +<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}} </p> diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html new file mode 100644 index 0000000000..ca79e665a1 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html @@ -0,0 +1,73 @@ +--- +title: 득점 +slug: Games/Tutorials/2D_breakout_game_Phaser/득점 +tags: + - 게임 + - 게임제작 + - 득점 + - 득점시스템 + - 튜토리얼 +translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p> + +<div class="summary"> +<p>이것은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser tutorial</a>의 16단계중 11번째 과정입니다. 이 과정의 소스코드를 얻고자 한다면 이 강좌를 수강한 후 <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html">Gamedev-Phaser-Content-Kit/demos/lesson11.html</a>를 통해 얻으세요.</p> +</div> + +<p><span class="seoSummary">점수를 얻는 방식의 게임은 좀더 재미있을 것 입니다.— 당신 또는, 친구의 최고 기록을 갈아치울수도 있습니다. 이 글에서는 우리의 게임에 득점 시스템을 추가해 보려고 합니다.</span></p> + +<p>우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 <code>text()</code> 메소드를 사용합니다.</p> + +<h2 id="새로운_변수들">새로운 변수들</h2> + +<p>이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요:</p> + +<pre class="brush: js">// ... +var scoreText; +var score = 0; +</pre> + +<h2 id="게임_화면에_점수가_표시_되도록_해보자">게임 화면에 점수가 표시 되도록 해보자</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">지금 </font>create()</code> 함수 뒤에 다음과 같은 코드를 추가해봅시다:</p> + +<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' }); +</pre> + +<p><code>text()</code> 메소드는 4개의 변수를 가질수 있습니다:</p> + +<ul> + <li>x와 y 좌표값 자리에 글자를 그려냅니다.</li> + <li>실제 글자가 나타날 것입니다.</li> + <li>폰트도 글자와 함께 나타날 것입니다.</li> +</ul> + +<p>마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.</p> + +<h2 id="블록이_무너지면_점수를_갱신합니다.">블록이 무너지면 점수를 갱신합니다.</h2> + +<p>우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 <font face="Consolas, Liberation Mono, Courier, monospace">점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다.</font> 이건 <code>setText()매소드를 써서 해결 할수 있습니다</code> — <code>ballHitBrick()</code> 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요:</p> + +<pre class="brush: js">function ballHitBrick(ball, brick) { + brick.kill(); + score += 10; + scoreText.setText('Points: '+score); +} +</pre> + +<p>됬습니다, — <code>index.html</code> 을 다시 새로고침 해주고 공이 블록을 칠때마다 점수가 갱신되는지 확인해줍니다.</p> + +<h2 id="코드를_비교해보세요">코드를 비교해보세요</h2> + +<p>이번 강좌에서 배운 득점 시스템이 어떻게 작동하는지 이해하고자 한다면, 다음 아래를 이용해 시연해보세요.:</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}</p> + +<h2 id="다음_단계">다음 단계</h2> + +<p>우리는 이제 득점 시스템을 게임에 추가했습니다. 그러나 게임에서 이길 수 없다면, 게임하면서 득점하는게 무슨 소용일까요? 그래서 승리 상태를 추가해보려고 합니다. 게임에서 이기게 하고 싶다면 다음으로 넘어갑시다: <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">win the game</a>.</p> + +<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p> |