delete untranslated content - game (#14971)

files/ko/games/index.md

@@ -1,6 +1,8 @@
 ---
 title: 게임 개발
 slug: Games
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}
@@ -32,31 +34,24 @@ slug: Games
 ## 같이 보기
 
 - [Build New Games](http://buildnewgames.com/)
-  - 수많은 오픈 웹 게임 개발 튜토리얼을 가지고 있는 협업 사이트입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.
+  - : 수많은 오픈 웹 게임 개발 튜토리얼을 가지고 있는 협업 사이트입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.
 - [Creative JS](http://creativejs.com/)
-  - 게임만 있는 것은 아니지만 꽤 인상적인 JavaScript 기술과 실험들의 모음집입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.
+  - : 게임만 있는 것은 아니지만 꽤 인상적인 JavaScript 기술과 실험들의 모음집입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.
 - [Game Programming Patterns](https://gameprogrammingpatterns.com/)
-  - Bob Nystrom이 작성한 책으로, 더욱 효과적이고 효율적인 코드를 개발하는 게임 개발자들에게 도움이 되도록 게임 개발에서의 프로그래밍 패턴에 대해 논하는 이북입니다.
+  - : Bob Nystrom이 작성한 책으로, 더욱 효과적이고 효율적인 코드를 개발하는 게임 개발자들에게 도움이 되도록 게임 개발에서의 프로그래밍 패턴에 대해 논하는 이북입니다.
 - [Gamedev.js Weekly](https://gamedevjsweekly.com/)
-  - HTML5 게임 개발을 주제로 하는 뉴스레터로, 매주 금요일에 보내줍니다. 최신 기사들과 튜토리얼, 툴 및 자료들을 담고 있습니다.
-- [HTML5 Game Devs Forum](https://www.html5gamedevs.com/)
-  - 게임 개발자, 프레임 워크 개발자, 출판사들을 위한 포럼입니다. 질문하고, 답변을 받고, 남들을 도와주세요.
-
-<!---->
-
+  - : HTML5 게임 개발을 주제로 하는 뉴스레터로, 매주 금요일에 보내줍니다. 최신 기사들과 튜토리얼, 툴 및 자료들을 담고 있습니다.
 - [HTML5 Game Engine](https://html5gameengine.com/)
-  - 평가, 기능 및 샘플을 기준으로 인기있는 HTML5 게임 프레임워크들의 목록입니다.
+  - : 평가, 기능 및 샘플을 기준으로 인기있는 HTML5 게임 프레임워크들의 목록입니다.
 - [JSBreakouts](https://jsbreakouts.org/)
-  - 여러 프레임워크에서의 JavaScript Breakout 클론들을 비교하여 본인에게 맞는 프레임워크를 골라보세요.
+  - : 여러 프레임워크에서의 JavaScript Breakout 클론들을 비교하여 본인에게 맞는 프레임워크를 골라보세요.
 - [Tuts+ Game Development](https://gamedevelopment.tutsplus.com/)
-  - 일반적인 게임 개발에 대한 튜토리얼과 글이 올라옵니다.
+  - : 일반적인 게임 개발에 대한 튜토리얼과 글이 올라옵니다.
 - [HTML5 Gamedev Starter](https://html5devstarter.enclavegames.com/)
-  - 새로운 게임 개발자들을 위한 웹 주변의 다양하고 유용한 자료들에 대한 링크의 큐레이터 목록인 스타터입니다.
+  - : 새로운 게임 개발자들을 위한 웹 주변의 다양하고 유용한 자료들에 대한 링크의 큐레이터 목록인 스타터입니다.
 - [js13kGames](https://js13kgames.com/)
-  - 개발자들의 13 킬로바이트짜리 자바스크립트 코딩 공모전입니다. 제출된 게임들은 GitHub에 읽을 수 있는 형태로 올라옵니다.
+  - : 개발자들의 13 킬로바이트짜리 자바스크립트 코딩 공모전입니다. 제출된 게임들은 GitHub에 읽을 수 있는 형태로 올라옵니다.
 - [Mozilla Hacks Blog](https://hacks.mozilla.org/category/games/)
-  - Mozilla Hack 블로그의 게임 카테고리는 게임 개발과 관련된 흥미로운 기사들이 올라와 있습니다.
-
-## 같이 보기
-
+  - : Mozilla Hack 블로그의 게임 카테고리는 게임 개발과 관련된 흥미로운 기사들이 올라와 있습니다.
 - [Games section on wiki.mozilla.org](https://wiki.mozilla.org/Platform/Games)
+  - : 플랫폼 게임에 대한 Mozilla의 참여에 대한 정보가 있는 위키 페이지입니다.

files/ko/games/introduction/index.md

@@ -1,6 +1,8 @@
 ---
 title: 웹 게임 개발에 대해
 slug: Games/Introduction
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}

files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.md

@@ -1,6 +1,8 @@
 ---
 title: 득점
 slug: Games/Tutorials/2D_breakout_game_Phaser/The_score
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}
@@ -11,16 +13,16 @@ slug: Games/Tutorials/2D_breakout_game_Phaser/The_score
 
 점수를 얻는 방식의 게임은 좀더 재미있을 것 입니다.— 당신 또는, 친구의 최고 기록을 갈아치울수도 있습니다. 이 글에서는 우리의 게임에 득점 시스템을 추가해 보려고 합니다.
 
-우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 `text()` 메소드를 사용합니다.
+우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 `text()` 메서드를 사용합니다.
 
 ## 새로운 변수들
 
 이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요:
 
 ```js
-// ...
-var scoreText;
-var score = 0;
+// …
+let scoreText;
+let score = 0;
 ```
 
 ## 게임 화면에 점수가 표시 되도록 해보자
@@ -50,7 +52,7 @@ scoreText = game.add.text(5, 5, "Points: 0", {
 function ballHitBrick(ball, brick) {
   brick.kill();
   score += 10;
-  scoreText.setText("Points: " + score);
+  scoreText.setText(`Points: ${score}`);
 }
 ```
 

files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md

@@ -1,6 +1,8 @@
 ---
 title: 공을 벽에 튕기기
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}
@@ -18,7 +20,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
 보다 계산을 쉽게 하기 위하여 `ballRadius` 변수를 만든 뒤 원의 반지름 값을 대입하여 계산하는데 사용합니다. 아래의 코드를 기존의 변수들 아래에 삽입하세요:
 
 ```js
-var ballRadius = 10;
+const ballRadius = 10;
 ```
 
 이제`drawBall()` func기능 안에 볼을 그리는 코드를 아래와 같이 수정하세요:
@@ -57,11 +59,11 @@ if (y + dy > canvas.height || y + dy < 0) {
 }
 ```
 
-둘 중 하나의 조건이라도 만족한다면, 공의 방향은 반대로 바뀝니다.
+둘 중 하나의 조건이라도 `true`를 만족한다면, 공의 방향은 반대로 바뀝니다.
 
 ### 좌우로 튕겨내기
 
-우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 y 대신 x값을 대입하여 그대로 반복해주기만 하면 됩니다:
+우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 `y` 대신 `x`값을 대입하여 그대로 반복해주기만 하면 됩니다:
 
 ```js
 if (x + dx > canvas.width || x + dx < 0) {
@@ -79,7 +81,7 @@ if (y + dy > canvas.height || y + dy < 0) {
 
 코드를 테스트해보세요. — 아마 캔버스 모서리에서 튕겨나오는 볼이 인상적이지 않나요? 하지만 또 다른 문제가 생겼습니다. — 공이 벽을 튕겨나와 방향이 바뀌기 전에 살짝 벽 안으로 숨어버리네요:
 
-![](ball-in-wall.png)
+![skyblue ball disappearing into the top of the white wall.](ball-in-wall.png)
 
 이 문제는 우리가 충돌을 감지할 때 그 기준을 공의 원점에 두고 계산했지만, 원의 둘레를 기준으로 계산을 해야 하기 때문입니다. 벽에 공이 절반쯤 지난 뒤가 아니라 닿자마자 튕겨나와야 합니다. 이에 맞게 코드를 조금 수정해봅시다. 여러분이 삽입한 코드를 아래와 같이 수정해보세요:
 
@@ -98,9 +100,9 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
 
 자, 다시 여러분이 작성한 코드를 완성된 코드와 비교해보고 게임을 실행해보세요:
 
-{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}
+{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}
 
-> **참고:** **Exercise**: 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.
+> **참고:** 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.
 
 ## 다음 단계
 

files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md

@@ -1,6 +1,8 @@
 ---
 title: 벽돌 만들기
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}
@@ -16,24 +18,24 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
 이번 학습의 모든 목표는 벽돌들을 위한 코드를 2차원 배열로 동작하는 반복문을 통해 제공하는 것입니다. 그러나 먼저 우리는 가로, 세로, 행, 열 등 벽돌에 대한 값을 정의할 몇몇 변수들을 설정해야 합니다. 지난 학습에서 작성한 코드에 아래 코드를 추가해봅시다.
 
 ```js
-var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
+const brickRowCount = 3;
+const brickColumnCount = 5;
+const brickWidth = 75;
+const brickHeight = 20;
+const brickPadding = 10;
+const brickOffsetTop = 30;
+const brickOffsetLeft = 30;
 ```
 
 우리는 벽돌 배열 행과 열의 수, 그것들의 가로, 세로길이, 각 벽돌이 서로 닿지 않을 정도의 간격과 벽돌이 캔버스의 모서리에 닿지 않게 할 오프셋 변수들을 정의했습니다.
 
 우리는 2차원 배열에 벽돌을 담았습니다. 배열은 열 `c`, 행 `r`, 그리고 배열의 각 객체엔 화면에 벽돌을 그릴 위치를 나타낼 `x`, `y` 위치를 가지고 있습니다. 위에서 변수를 선언한 코드 뒤에 아래 코드를 추가해봅시다.
 
 ```js
-var bricks = [];
-for (var c = 0; c < brickColumnCount; c++) {
+const bricks = [];
+for (let c = 0; c < brickColumnCount; c++) {
   bricks[c] = [];
-  for (var r = 0; r < brickRowCount; r++) {
+  for (let r = 0; r < brickRowCount; r++) {
     bricks[c][r] = { x: 0, y: 0 };
   }
 }
@@ -47,8 +49,8 @@ for (var c = 0; c < brickColumnCount; c++) {
 
 ```js
 function drawBricks() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
       bricks[c][r].x = 0;
       bricks[c][r].y = 0;
       ctx.beginPath();
@@ -64,8 +66,8 @@ function drawBricks() {
 다시 행, 열 반복을 통해 각 벽돌의 `x`, `y` 값을 설정하고, 캔버스에 `brickWidth` \* `brickHeight` 크기의 벽돌들을 그립니다. 문제는 모든 벽돌들이 좌표 (0, 0) 위치해있다는 것입니다. 우리는 약간의 연산을 통해 각 벽돌의 `x`, `y` 값을 계산해야 합니다.
 
 ```js
-var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
-var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
 ```
 
 `brickX`는 `brickWidth` + `brickPadding`에 `c`를 곱하고, `brickOffsetLeft`를 더한 값입니다. `brickY`는 변수 `r`, `brickHeight`, `brickOffsetTop` 변수를 사용한다는 것을 제외하곤 동일합니다. 이제 모든 벽돌들을 올바른 위치에, 알맞은 간격을 두고, 캔버스 모서리로부터 오프셋 값만큼의 거리를 둔 상태로 그릴수 있게되었습니다.
@@ -74,10 +76,10 @@ var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
 
 ```js
 function drawBricks() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
-      var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
+      const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+      const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
       bricks[c][r].x = brickX;
       bricks[c][r].y = brickY;
       ctx.beginPath();
@@ -102,7 +104,7 @@ drawBricks();
 
 이 부분에서 게임은 조금 더 흥미로워졌습니다.
 
-{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}
+{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/Lu3vtejz/","","395")}}
 
 > **참고:** 연습하기: 행과 열의 수를 바꿔서 벽돌의 수를 변경해보거나, 위치를 변경해봅시다.
 

files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md

@@ -1,6 +1,8 @@
 ---
 title: 충돌 감지
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
+l10n:
+  sourceCommit: 56db19e6b8d19932c1b6150bc42e752e12a2b21f
 ---
 
 {{GamesSidebar}}
@@ -19,9 +21,9 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
 
 ```js
 function collisionDetection() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      var b = bricks[c][r];
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
+      const b = bricks[c][r];
       // calculations
     }
   }
@@ -39,9 +41,9 @@ function collisionDetection() {
 
 ```js
 function collisionDetection() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      var b = bricks[c][r];
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
+      const b = bricks[c][r];
       if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
         dy = -dy;
       }
@@ -57,10 +59,10 @@ function collisionDetection() {
 위의 코드는 우리가 의도한대로 작동할 것이고 공은 방향을 바꿀 것입니다. 문제는 벽돌이 그대로 있다는 것입니다. 우린 이미 공이 부딪힌 벽돌을 제거하기 위한 방법을 고민해봐야 합니다. 우리는 화면에 있는 벽돌을 그릴지 결정하는 변수를 추가해서 이 문제를 해결할 수 있습니다, 벽돌을 초기화하는 코드에, `status` 속성을 각 벽돌 객체에 추가해봅시다. 아래와 같이 말입니다.
 
 ```js
-var bricks = [];
-for (var c = 0; c < brickColumnCount; c++) {
+const bricks = [];
+for (let c = 0; c < brickColumnCount; c++) {
   bricks[c] = [];
-  for (var r = 0; r < brickRowCount; r++) {
+  for (let r = 0; r < brickRowCount; r++) {
     bricks[c][r] = { x: 0, y: 0, status: 1 };
   }
 }
@@ -70,11 +72,11 @@ for (var c = 0; c < brickColumnCount; c++) {
 
 ```js
 function drawBricks() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      if (bricks[c][r].status == 1) {
-        var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
-        var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
+      if (bricks[c][r].status === 1) {
+        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
         bricks[c][r].x = brickX;
         bricks[c][r].y = brickY;
         ctx.beginPath();
@@ -94,10 +96,10 @@ function drawBricks() {
 
 ```js
 function collisionDetection() {
-  for (var c = 0; c < brickColumnCount; c++) {
-    for (var r = 0; r < brickRowCount; r++) {
-      var b = bricks[c][r];
-      if (b.status == 1) {
+  for (let c = 0; c < brickColumnCount; c++) {
+    for (let r = 0; r < brickRowCount; r++) {
+      const b = bricks[c][r];
+      if (b.status === 1) {
         if (
           x > b.x &&
           x < b.x + brickWidth &&
@@ -125,7 +127,7 @@ collisionDetection();
 
 이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 벽돌을 파괴할 수 있습니다!
 
-{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}
+{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}
 
 > **참고:** **연습하기: 벽돌이 부딪힐 때마다 색깔을 바꿔보세요.**
 

files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md

@@ -1,6 +1,8 @@
 ---
 title: 캔버스 생성과 그리기
 slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{GamesSidebar}}
@@ -50,8 +52,8 @@ HTML문서 구조는 꽤 간단합니다. 게임은 {{htmlelement("canvas")}} 
 실제로 {{htmlelement("canvas")}}엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 `<script>` 태그 다음에 추가하세요..
 
 ```js
-var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
 ```
 
 {{htmlelement("canvas")}} 엘리먼트에 대한 참조를 `canvas` 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 `ctx` 변수에 저장하고 있습니다.
@@ -103,7 +105,7 @@ ctx.closePath();
 
 JSFiddle에서 라이브로 실행되는 전체 코드입니다.
 
-{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
+{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}
 
 > **참고:** **연습해보기**: 주어진 모양들의 크기와 색상을 변경해보세요.