[ko] Fix problems in '2d breakout game tutorials with pure js series #7~#10'. (#987)

* Fix problems in 'Collision Detection' article.

* Fix problems in 'Track the score and win' article.

* Fix problems in 'Mouse controls' article.

* Fix problems in 'Finishing up' article.

* Update files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html

Co-authored-by: Sungwoo Park <codest99@gmail.com>

4 files changed, 51 insertions, 57 deletions

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
index d214b49ae7..55784de72a 100644
--- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
+++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
@@ -8,19 +8,19 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
 
 <div>{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}</div>
 
-<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
 
 <div class="summary">
-<p>이 학습은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>의 일곱 번째 단계입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.</p>
+<p>이 학습은 <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gamedev Canvas tutorial</a>의 일곱 번째 단계입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.</p>
 </div>
 
-<p>지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌은 그냥 지나가버리고 게임은 아직 흥미로워지려면 멀어보입니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.</p>
+<p>지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌을 그냥 지나쳐버리니 게임은 아직 그렇게 흥미롭지 않습니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.</p>
 
 <p>물론 어떻게 적용할지는 우리가 결정할 문제입니다. 그러나 공이 벽돌에 닿았는지 계산하는 일은 꽤나 까다로울 수 있습니다. 왜냐하면 캔버스엔 이를 위한 기능이 없기 때문입니다.  이번 학습은 가능한 쉬운 방법으로 진행될 것입니다. 우린 공의 중앙이 어느 벽돌과 충돌하는지 확인할 것입니다. 이는 항상 완벽한 결과를 주진 않지만, 충돌 감지를 위한 정교한 방법은 무궁무진합니다. 그러나 이 방법 역시 기본적인 개념을 학습하기에 꽤 괜찮습니다.</p>
 
 <h2 id="충돌_감지_함수">충돌 감지 함수</h2>
 
-<p>이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 b 변수를 정의할 것입니다.</p>
+<p>이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 <code>b</code>변수를 정의할 것입니다.</p>
 
 <pre class="brush: js">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
@@ -67,7 +67,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
     }
 }</pre>
 
-<p>다음으로 <code>drawBricks</code> 함수에서 벽돌들을 그리기 전에 <code>status</code> 속성을 확인해야 합니다. 만약 <code>status</code>가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고간 벽돌이므로 우린 더이상 화면에 그릴 필요가 없습니다. 아래와 같이 <code>drawBricks</code> 함수를 수정해봅시다,</p>
+<p>다음으로 <code>drawBricks</code> 함수에서 벽돌들을 그리기 전에 <code>status</code> 속성을 확인해야 합니다. 만약 <code>status</code>가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고 간 벽돌이므로 우린 더 이상 화면에 그릴 필요가 없습니다. 아래와 같이 <code>drawBricks</code> 함수를 수정해 봅시다.</p>
 
 <pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
     for(var c=0; c&lt;brickColumnCount; c++) {
@@ -87,7 +87,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
     }
 }</pre>
 
-<h2 id="충돌_감지함수에서_상태_추적_및_업데이트">충돌 감지함수에서 상태 추적 및 업데이트</h2>
+<h2 id="충돌_감지_함수에서_상태_추적_및_업데이트">충돌 감지 함수에서 상태 추적 및 업데이트</h2>
 
 <p>이제 <code>collisonDectection</code> 함수에 벽돌 <code>status</code> 속성을 포함시켜야 합니다. 만약 벽돌이 활성 상태(<code>status</code> 1)이라면 충돌이 일어났는지 확인해야 합니다. 만약 충돌이 발생했다면 다시 그리지 않게 벽돌의 속성을 0으로 변경해야 합니다. <code>collisionDetection</code> 함수를 아래와 같이 수정합시다.</p>
 
@@ -114,7 +114,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <h2 id="코드_비교하기">코드 비교하기</h2>
 
-<p>이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 별돌을 파괴할 수 있습니다!</p>
+<p>이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 벽돌을 파괴할 수 있습니다!</p>
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}</p>
 
@@ -124,6 +124,6 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <h2 id="다음_단계">다음 단계</h2>
 
-<p>우리는 충분히 여기까지 왔습니다! 이제 어덟 번째 장에서는<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win"> 점수를 추가와 승패 판정 방법</a>을 알아 볼 것입니다.</p>
+<p>우리는 충분히 여기까지 왔습니다! 이제 여덟 번째 장에서는 <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">점수 추가와 승패 판정 방법</a>을 알아 볼 것입니다.</p>
 
-<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
index e0ef02994f..4bcf3680d2 100644
--- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
+++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
@@ -10,23 +10,23 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/ko/docs/Games")}}</div>
 
-<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+<p>{{Previous("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
 
 <div class="summary">
-<p><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>.의<strong> 10 개의 레슨 중 마지막 단계 </strong>입니다. 이 수업을 마친 후 비교하여 살펴 볼 소스코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>. 여기서 찾아 볼 수 있습니다.</p>
+<p><a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gamedev Canvas tutorial</a>의 <strong>10개의 레슨 중 마지막 단계</strong>입니다. 이 수업을 마친 후 비교하여 살펴볼 소스코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>에서 찾아볼 수 있습니다.</p>
 </div>
 
-<p><span class="seoSummary">우리가 쓰는 모든 게임에 항상 개선해야 할 것이 있습니다. 예를 들어 이 게임에 2인용 플레이어를 추가할 수 있습니다. 한두 번 잘못 만들어 경기를 끝낼 수도 있습니다. 그러나 우리는 코드 렌더링을 향상시켜 발전할 수 있습니다.</span></p>
+<p><span class="seoSummary">우리가 쓰는 모든 게임에 항상 개선해야 할 것이 있습니다. 예를 들자면, 우리는 플레이어에게 한 개보다 많은 라이프를 제공할 수 있습니다. 플레이어들은 한 번 또는 두 번의 실수를 만들어도 여전히 게임을 끝낼 수 있습니다. 우리는 또한 우리의 코드 렌더링을 개선할 수 있습니다.</span></p>
 
 <h2 id="플레이어에게_생명을_부여하기">플레이어에게 생명을 부여하기</h2>
 
-<p>생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서  변수를 추가하여 생명 수를 저장합니다.</p>
+<p>생명을 구현하는 방법은 아주 간단합니다. 먼저 변수를 선언했던 곳과 같은 장소에서 변수를 추가하여 생명 수를 저장합니다.</p>
 
 <pre class="brush: js">var lives = 3; //남은 생명 수</pre>
 
-<p>남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태 입니다. <code>drawScore()</code>함수 아래에 다음 기능을 추가 하십시오.</p>
+<p>남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태입니다. <code>drawScore()</code>함수 아래에 다음 기능을 추가하세요.</p>
 
 <pre class="brush: js">function drawLives() {
     ctx.font = "16px Arial";
@@ -34,17 +34,13 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
     ctx.fillText("Lives: "+lives, canvas.width-65, 20);
 }</pre>
 
-<p>지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이였습니다. 이제 우리는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄일 것입니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정할 수 있습니다. <code>draw()</code> 함수는 다음 세 줄로 대체합니다:</p>
+<p>지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이었습니다. 이제 우리는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄일 것입니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정할 수 있습니다. 그렇게 하기 위해 <code>draw()</code> 함수 내에서 다음 세 줄을 다음 블럭의 코드로 대체합시다.</p>
 
 <pre class="brush: js">alert("GAME OVER");
 document.location.reload();
 clearInterval(interval); // Needed for Chrome to end game
 </pre>
 
-<p> </p>
-
-<p> </p>
-
 <p>이를 통해 아래와 같이 약간 복잡한 논리를 추가할 수 있습니다:</p>
 
 <pre class="brush: js">lives--;
@@ -61,7 +57,7 @@ else {
     paddleX = (canvas.width-paddleWidth)/2;
 }</pre>
 
-<p>자, 이제 공이 화면의 맨아래 가장자리에 맞으면 생명(<code>lives</code>)을 하나 뺍니다. 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.</p>
+<p>자, 이제 공이 화면의 맨 아래 가장자리에 맞으면 생명(<code>lives</code>)을 하나 뺍니다. 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.</p>
 
 <h3 id="남은_생명_표시_렌더링하기">남은 생명 표시 렌더링하기</h3>
 
@@ -72,11 +68,11 @@ else {
 
 <h2 id="requestAnimationFrame()을_사용하여_랜더링_개선하기">requestAnimationFrame()을 사용하여 랜더링 개선하기</h2>
 
-<p>이제 게임 역학과 연결이 되지 않고, 그것이 렌더링되는 방식에 대해 연구해 봅시다. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 브라우저가 현재 Replace를 사용하여 구현한 고정 프레임보다 게임을 더 잘 랜더링할 수 있도록 {{domxref("windowTimers.setInterval()", "setInterval()")}} 도와줍니다:</p>
+<p>이제 게임 메커니즘과 연결이 되지 않지만, 그것이 렌더링되는 방식에 대해 연구해 봅시다. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}}은 우리가 현재 {{domxref("windowTimers.setInterval()", "setInterval()")}}을 사용하여 구현한 고정된 프레임레이트(fixed framerate)보다 더 낫게 게임을 렌더링합니다. 다음 줄을,</p>
 
 <pre class="brush: js">var interval = setInterval(draw, 10);</pre>
 
-<p>간단하게:</p>
+<p>이렇게 대체하세요.</p>
 
 <pre class="brush: js">draw();</pre>
 
@@ -93,20 +89,18 @@ else {
 
 <h2 id="코드_비교하기">코드 비교하기</h2>
 
-<p>그것이 이 레슨의 전부입니다. 게임의 최종버전이 준비되 있고 시작할 준비가 되어 있습니다!</p>
+<p>그것이 이 레슨의 전부입니다. 게임의 최종 버전이 준비되어 있고 시작할 준비가 되어 있습니다!</p>
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}</p>
 
 <div class="note">
-<p><strong>Exercise</strong>: 남은 생명에 따라 공이 패들에서 튕겨나가는 각도를 변경합니다.</p>
+<p><strong>Exercise</strong>: 생명의 수와 공이 패들에서 튕겨나가는 각도를 변경해 보세요.</p>
 </div>
 
 <h2 id="게임_오버_-_마무리!">게임 오버 - 마무리!</h2>
 
-<p>축하합니다! 당신은 모든 수업을 완수하였습니다! 이쯤 되면 이제 캔버스의 조작 기초와 간단한 2D 게임 구현 방법을 알게 되었을 것 입니다. 이제 몇 가지 프레임워크를 배우고 게임 개발을 해 본 좋은 시간이였습니다.</p>
-
-<p>이 시리즈의 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a> 또는 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb built in Phaser</a> 튜토리얼을 확인해 볼 수 있습니다. <a href="https://developer.mozilla.org/en/docs/Games">Games section on MDN</a>의 섹션에서 더 많은 지식과 영감을 얻으십시오.</p>
+<p>축하합니다! 당신은 모든 수업을 완수하였습니다! 이쯤 되면 이제 캔버스의 조작 기초와 간단한 2D 게임 구현 방법을 알게 되었을 것입니다. 이제 몇몇 프레임워크를 배우고 게임 개발을 계속하기에 좋은 시간입니다. 이 시리즈의 <a href="/ko/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> 또는 <a href="/ko/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb built in Phaser</a> 튜토리얼을 확인해 볼 수 있습니다. <a href="/ko/docs/Games">Games section on MDN</a>의 섹션에서 더 많은 지식과 영감을 얻어보세요.</p>
 
-<p> </p>
+<p>당신은 또한 <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">이 튜토리얼 시리즈의 메인 페이지</a>로 돌아갈 수 있습니다. 즐겁게 코딩하세요!</p>
 
-<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+<p>{{Previous("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
index 0526df40d3..c2834d6583 100644
--- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
+++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
@@ -10,25 +10,25 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/ko/docs/Games")}}</div>
 
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
 
 <div class="summary">
-<p>이 레슨은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>.의 10개 중 <strong>9 번째</strong> 단계입니다. 당신은 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>. 이 소스코드에서 이 수업의 교훈을 찾을 수 있습니다.</p>
+<p>이 레슨은 <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gamedev Canvas tutorial</a>의 10개 중 <strong>9번째</strong> 단계입니다. 당신은 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>에서 완성된 소스코드를 찾을 수 있습니다.</p>
 </div>
 
-<p><span class="seoSummary">경기 자체가 사실상 끝났으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.</span></p>
+<p><span class="seoSummary">게임 자체는 사실상 완성되었으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.</span></p>
 
 <h2 id="마우스_이동_감지하기">마우스 이동 감지하기</h2>
 
-<p>마우스 움직임을 감지하기 위해 감지를 하는 것은 키 감지를 하는 것보다 훨씬 더 쉽습니다. 우리가 필요한 것은 {{event("mousemove")}} 이 이벤트 감지입니다. 이 <code>keyup event</code> 바로 아래에 이 행을 추가하십시오.</p>
+<p>마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽습니다. 우리에게 필요한 모든 것은 {{event("mousemove")}} 이벤트에 대한 리스너입니다. 이 <code>keyup event</code> 바로 아래에 이 행을 추가해보세요.</p>
 
 <pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
 
-<h2 id="마우스_움직임에_따라_패들_이동_하기">마우스 움직임에 따라 패들 이동 하기</h2>
+<h2 id="마우스_움직임에_따라_패들_이동_하기">마우스 움직임에 따라 패들 이동하기</h2>
 
-<p>포인터 좌표에 따라 패들 위치를 업데이트를 할 수 있습니다. 다음과 같은 핸들러 기능을 정확하게 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가하십시오:</p>
+<p>포인터 좌표에 따라 패들 위치를 업데이트할 수 있습니다. 다음의 핸들러 함수가 정확히 이것을 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가해보세요.</p>
 
 <pre class="brush: js">function mouseMoveHandler(e) {
     var relativeX = e.clientX - canvas.offsetLeft;
@@ -37,7 +37,7 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
     }
 }</pre>
 
-<p>이 함수에서 우리는 먼저 상대적인 <code>relativeX</code> 를 구합니다. 이 값은 뷰포트(<code>e.clientX</code>)와 캔버스 왼쪽 가장자리 (<code>canvas.offsetLeft</code>) 사이의 거리에 마우스 위치를 뺀 값입니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, <code>paddleX</code>의 위치(패들 왼쪽 가장자리에 배치되어 있다)는 패들 width의 반을 뺀 <code>relativeX</code>의 값으로 설정되므로 이동은 실제로 패들 가운데 상대적으로 이동이 됩니다.</p>
+<p>이 함수에서 우리는 첫번째로 <code>relativeX</code> 값을 계산하는데, 이는 뷰포트 (<code>e.clientX</code>) 안에 있는 가로 마우스 위치에 캔버스의 좌측 끝과 뷰포트 (<code>canvas.offsetLeft</code>) 의 좌측 끝 사이의 거리를 뺀 값과 같습니다. 이는 캔버스의 좌측 끝과 마우스 포인터 사이의 거리와 같습니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, <code>paddleX</code>의 위치(패들 왼쪽 가장자리에 배치되어 있습니다)는 패들 폭의 반을 뺀 <code>relativeX</code>의 값으로 설정되므로 이동은 패들의 중앙과 관련될 것입니다.</p>
 
 <p>이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않을 것입니다.</p>
 
@@ -48,11 +48,11 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
 <p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}</p>
 
 <div class="summary">
-<p>Exercise: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것 입니다. 패들 이동 제한 경계를 조정해 보세요.</p>
+<p>연습: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것입니다. 패들 이동 제한 경계를 조정해 보세요.</p>
 </div>
 
 <h2 id="다음_단계">다음 단계</h2>
 
-<p>이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finishing up</a>.<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up"> (마지막)</a></p>
+<p>이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up">마지막</a>.</p>
 
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
index b82e8be9bd..591d13370f 100644
--- a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
+++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
@@ -1,5 +1,5 @@
 ---
-title: Track the score and win
+title: 점수 추가와 승패 판정 방법
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
 tags:
   - Canvas
@@ -10,23 +10,23 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/ko/docs/Games")}}</div>
 
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
 
 <div class="summary">
-<p>이번 단계는  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a> 의 8번째 단계입니다.  <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a> 에서 이번 단계의 소스 코드를 확인할 수 있습니다.</p>
+<p>이번 단계는  <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Gamedev Canvas tutorial</a>의 8번째 단계입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>에서 이번 단계의 소스 코드를 확인할 수 있습니다.</p>
 </div>
 
-<p><span class="seoSummary">벽돌 깨기 기능은 잘 작동한다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 Score 기능을 만든다.</span></p>
+<p><span class="seoSummary">벽돌 깨기 기능은 잘 작동합니다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 점수 기능을 만들 수 있습니다.</span></p>
 
 <h2 id="점수_계산하기">점수 계산하기</h2>
 
-<p>게임 안에 점수 기능이 있다면, 친구들이 더 좋아할 것이다. 그러기 위해서는 점수를 기록할 변수가 필요합니다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가하자.</p>
+<p>게임 플레이 도중 점수를 볼 수 있다면, 친구들에게 자랑할 수 있을 것입니다. 그러기 위해서는 점수를 기록할 변수가 필요합니다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가합시다.</p>
 
 <pre class="brush: js">var score = 0;</pre>
 
-<p>점수 화면을 만들고, 업데이트를 하기 위해서 <code>drawScore()</code> 함수가 필요하다. 아래 코드를 <code>collisionDetection()</code> 함수 아래에 추가하자.</p>
+<p>점수 화면을 만들고, 업데이트를 하기 위해서 <code>drawScore()</code> 함수가 필요합니다. 아래 코드를 <code>collisionDetection()</code> 함수 아래에 추가합시다.</p>
 
 <pre class="brush: js">function drawScore() {
     ctx.font = "16px Arial";
@@ -34,9 +34,9 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
     ctx.fillText("Score: "+score, 8, 20);
 }</pre>
 
-<p>텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같다. — {{domxref("CanvasRenderingContext2D.font","font()")}} 함수에서 크기와 타입을 설정할 수 있다. <font><font>그런 다음 </font></font>{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} 함수를 사용하여 <font><font>글꼴의 색상을 설정하고 </font></font>{{domxref("CanvasRenderingContext2D.fillText","fillText()")}} 함수를 이용해서 <font><font>캔버스에 배치 될 실제 텍스트와 배치 위치를 설정하는 데 사용한다. </font><font>첫 번째 매개 변수는 텍스트 자체다. 위의 코드는 현재 점의 수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치 될 좌표이다.</font></font></p>
+<p>텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷합니다. 폰트를 정의하는 것은 CSS에서의 작업과 같습니다. — {{domxref("CanvasRenderingContext2D.font","font()")}} 함수에서 크기와 타입을 설정할 수 있습니다. <font><font>그런 다음 </font></font>{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} 함수를 사용하여 <font><font>글꼴의 색상을 설정하고 </font></font>{{domxref("CanvasRenderingContext2D.fillText","fillText()")}} 함수를 이용해서 <font><font>캔버스에 배치될 실제 텍스트와 배치 위치를 설정하는 데 사용합니다. </font><font>첫 번째 매개 변수는 텍스트 자체입니다. 위의 코드는 현재 점수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치될 좌표입니다.</font></font></p>
 
-<p>벽돌이 깨질 때마다 점수 변수의 값을 증가 시키기 위해서 <code>collisionDetection()</code> 함수에 강조 표시된 코드를 입력하여 수정한다.</p>
+<p>벽돌이 깨질 때마다 점수 변수의 값을 증가시키기 위해서 <code>collisionDetection()</code> 함수에 강조 표시된 코드를 입력하여 수정합시다.</p>
 
 <pre class="brush: js; highlight:[9]">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
@@ -53,13 +53,13 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
     }
 }</pre>
 
-<p><code>draw()</code> 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있다. <code>draw()</code> 아래 코드를  <code>drawPaddle()</code> 아래에서 호출한다.</p>
+<p><code>draw()</code> 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있습니다. <code>draw()</code> 아래 코드를 <code>drawPaddle()</code> 아래에서 호출합니다.</p>
 
 <pre class="brush: js">drawScore();</pre>
 
 <h2 id="모든_벽돌이_파괴되었을_때_승리_메시지_표시"><font><font>모든 벽돌이 파괴되었을 때 승리 메시지 표시</font></font></h2>
 
-<p><font><font>점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것이다. 모든 벽돌의 파괴가 </font><font>결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면  승리 메시지를 표시해야한다.  </font></font><code>collisionDetection()</code><font><font>함수에 강조된 코드를 붙여넣는다.</font></font></p>
+<p><font><font>점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것입니다. 모든 벽돌의 파괴가 </font><font>결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면 승리 메시지를 표시해야 합니다. </font></font><code>collisionDetection()</code><font><font>함수에 강조된 코드를 붙여넣읍시다.</font></font></p>
 
 <pre class="brush: js; highlight:[10,11,12,13]">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
@@ -80,22 +80,22 @@ original_slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽�
     }
 }</pre>
 
-<p><font><font>결국 사용자는 모든 벽돌을 파괴 한 순간, 실제로 게임에서 승리 할 수 ​​있다. 이는 게임과 관련하여 굉장히 중요하다.</font><font> </font></font><code>document.location.reload()</code><font><font>기능은 페이지를 다시로드하고 경고를 클릭하면 게임을 다시 시작한다.</font></font></p>
+<p><font><font>결국 사용자는 모든 벽돌을 파괴한 순간, 실제로 게임에서 승리할 수 ​​있습니다. 이는 게임과 관련하여 굉장히 중요합니다.</font><font> </font></font><code>document.location.reload()</code><font><font>기능은 페이지를 다시 로드하고 경고 버튼이 클릭되면 게임을 다시 시작합니다.</font></font></p>
 
 <h2 id="코드_비교"><font><font>코드 비교</font></font></h2>
 
-<p><font><font>최종 코드는 아래와 같다. 지금까지 작성한 코드와 비교해보자.</font></font></p>
+<p><font><font>최종 코드는 아래와 같습니다. 지금까지 작성한 코드와 비교해 봅시다.</font></font></p>
 
 <p> </p>
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}</p>
 
 <div class="note">
-<p><strong>추가학습</strong>: 벽돌을 깰 때마다 얻는 점수를 늘리고,  게임 클리어 시 최종 점수를 경고창에 표시해보자.</p>
+<p><strong>추가학습</strong>: 벽돌을 깰 때마다 얻는 점수를 늘리고, 게임 클리어 시 최종 점수를 경고창에 표시해 봅시다.</p>
 </div>
 
 <h2 id="다음_단계">다음 단계</h2>
 
-<p>게임은 현재 꽤 멋지게 보인다. 다음 단계에서는,  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls">Mouse controls (마우스로 패들 조종하는 방법)</a> 을 통해서 게임을 즐길 수 있습니다.</p>
+<p>게임은 현재 꽤 멋지게 보입니다. 다음 단계에서는, <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls">Mouse controls (마우스로 패들 조종하는 방법)</a>을 통해서 게임을 즐길 수 있습니다.</p>
 
-<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+<p>{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>