From 6847ba7092a55256c65fa7dec2b7d7bf908b2d2a Mon Sep 17 00:00:00 2001 From: minwook-shin Date: Fri, 27 Nov 2020 21:38:09 +0900 Subject: [PATCH] add 6-5 readme ko translation --- .../5-keeping-score/translations/README.ko.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/6-space-game/5-keeping-score/translations/README.ko.md b/6-space-game/5-keeping-score/translations/README.ko.md index 66333a5c..db8d197c 100644 --- a/6-space-game/5-keeping-score/translations/README.ko.md +++ b/6-space-game/5-keeping-score/translations/README.ko.md @@ -4,11 +4,11 @@ [Pre-lecture quiz](.github/pre-lecture-quiz.md) -In this lesson, you'll learn how to add scoring to a game and calculate lives. +이 강의에서는 어떻게 게임에서 점수를 내고 생명을 구하는 가에 대하여 배웁니다. ## 화면에 텍스트 그리기 -To be able to display a game score on the screen, you'll need to know how to place text on the screen. The answer is using the `fillText()` method on the canvas object. You can also control other aspects like what font to use, the color of the text and even its alignment (left, right, center). Below is some code drawing some text on the screen. +화면에 게임 점수를 표시하려면, 화면에 텍스트를 두는 방법을 알아야 합니다. 답변은 canvas 객체에 `fillText()` 메소드를 사용한다고 할 수 있습니다. 사용할 글꼴, 텍스트 색상과 정렬(왼쪽, 오른쪽, 가운데)처럼 다른 측면으로 제어할 수 있습니다. 다음은 화면에 텍스트를 그리는 코드입니다: ```javascript ctx.font = "30px Arial"; @@ -17,22 +17,22 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier! +✅ [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요! ## 게임 컨셉에서 생명 -The concept of having a life in a game is only a number. In the context of a space game it's common to assign a set of lives that get deducted one by one when your ship takes damage. It's nice if you can show a graphical representation of this like miniships or hearts instead of a number. +게임에서 생명을 가진다는 개념은 숫자에 불과합니다. space 게임의 맥락에서는 배가 피해를 입었을 때마다 생명을 하나씩 빼는 것이 일반적입니다. 숫자 대신 miniships이나 하트와 같은 그래픽으로 표현할 수 있다면 좋습니다. ## 무엇을 만드나요 -Let's add the following to your game: +게임에 다음을 추가하겠습니다: -- **Game score**: For every enemy ship that is destroyed, the hero should be awarded some points, we suggest a 100 points per ship. The game score should be shown in the bottom left. -- **Life**: Your ship has three lives. You lose a life every time an enemy ship collides with you. A life score should be displayed at the bottom right and be made out of the following graphic ![life image](solution/assets/life.png). +- **게임 점수**: 적의 배가 파괴될 때마다, 영웅은 점수를 받아야하고, 하나의 배마다 100점을 제안합니다. 게임 점수는 좌측 하단에 보여야 합니다. +- **생명**: 여러분의 배는 세 생명이 있습니다. 적의 배로 부딪칠 때마다 생명을 잃습니다. 생명 점수는 우측 하단에 보여야되고 ![life image](solution/assets/life.png)로 만들어야 합니다. ## 권장 단계 -Locate the files that have been created for you in the `your-work` sub folder. It should contain the following: +`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다: ```bash -| assets @@ -44,24 +44,24 @@ Locate the files that have been created for you in the `your-work` sub folder. I -| package.json ``` -You start your project the `your_work` folder by typing: +타이핑해서 `your_work` 폴더에 프로젝트를 시작합니다: ```bash cd your-work npm start ``` -The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies, and as you hit your left and right arrows, the hero moves and can shoot down enemies. +위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하면, 바로 영웅과 모든 적을 렌더링해야하며, 왼쪽과 오른쪽 화살표를 누르면, 영웅이 움직이고 적을 격추할 수 있습니다. ### 코드 추가하기 -1. **Copy over the needed assets** from the `solution/assets/` folder into `your-work` folder; you will add a `life.png` asset. Add the lifeImg to the window.onload function: +1. `solution/assets/` 폴더에서 `your-work` 폴더로 **필요한 어셋을 복사합니다**; `life.png` 어셋을 추가합니다. window.onload 함수에 lifeImg를 추가합니다: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` -1. Add the `lifeImg` to the list of assets: +1. 어셋의 배열에 `lifeImg`를 추가합니다: ```javascript let heroImg, @@ -71,9 +71,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a eventEmitter = new EventEmitter(); ``` -2. **Add variables**. Add code that represents your total score (0) and lives left (3), display these scores on a screen. +2. **변수를 추가합니다**. 총 점수(0)과 남은 생명(3)을 나타내는 코드를 추가하고, 이 점수를 화면에 출력합니다. -3. **Extend `updateGameObjects()` function**. Extend the `updateGameObjects()` function to handle enemy collisions: +3. **`updateGameObjects()` 함수를 확장합니다**. `updateGameObjects()` 함수를 확장하여 적 충돌을 제어합니다: ```javascript enemies.forEach(enemy => { @@ -84,15 +84,15 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a }) ``` -4. **Add `life` and `points`**. - 1. **Initialize variables**. Under `this.cooldown = 0` in the `Hero` class, set life and points: +4. **`life`과 `points`를 추가하기**. + 1. **변수를 초기화합니다**. `Hero` 클래스의 `this.cooldown = 0` 아래에 생명과 점수를 설정합니다: ```javascript this.life = 3; this.points = 0; ``` - 1. **Draw variables on screen**. Draw these values to screen: + 1. **화면에 점수를 그립니다**. 이 값을 화면에 그립니다: ```javascript function drawLife() { @@ -119,18 +119,18 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a ``` - 1. **Add methods to Game loop**. Make sure you add these functions to your window.onload function under `updateGameObjects()`: + 1. **게임 루프에 메소드를 추가합니다**. `updateGameObjects()` 아래의 window.onload 함수에 다음 함수를 추가해야 합니다: ```javascript drawPoints(); drawLife(); ``` -1. **Implement game rules**. Implement the following game rules: +1. **게임 규칙을 구현합니다**. 다음 게임 규칙을 구현합니다: - 1. **For every hero and enemy collision**, deduct a life. + 1. **모든 영웅과 적의 충돌**에 대해 생명을 깍습니다. - Extend the `Hero` class to do this deduction: + 깍기 위해서 `Hero` 클래스를 확장합니다: ```javascript decrementLife() { @@ -141,9 +141,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a } ``` - 2. **For every laser that hits an enemy**, increase game score with a 100 points. + 2. **적을 공격하는 모든 레이저는**, 게임 점수 100점을 올립니다. - Extend the Hero class to do this increment: + 올리기 위해서 `Hero` 클래스를 확장합니다: ```javascript incrementPoints() { @@ -151,7 +151,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a } ``` - Add these functions to your Collision Event Emitters: + Collision Event Emitter에 다음 함수를 추가합니다: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -166,15 +166,15 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a }); ``` -✅ Do a little research to discover other games that are created using JavaScript/Canvas. What are their common traits? +✅ JavaScript/Canvas를 사용하여 만든 다른 게임을 찾으려면 약간 알아보세요. 공통된 특징은 무엇일까요? -By the end of this work, you should see the small 'life' ships at the bottom right, points at the bottom left, and you should see your life count decrement as you collide with enemies and your points increment when you shoot enemies. Well done! Your game is almost complete. +이 작업이 끝날 즈음, 우측 하단에 작은 '생명' 배, 좌측 하단에 점수를 보여줘야 하며, 적과 부딪칠 때마다 생명의 개수가 감소하고 적을 쏠 때마다 점수가 증가하는 것을 볼 수 있습니다. 잘 했습니다! 게임이 거의 완료되었습니다. --- ## 🚀 도전 -Your code is almost complete. Can you envision your next steps? +코드는 거의 완성되었습니다. 다음 단계를 상상할 수 있나요? ## 강의 후 퀴즈 @@ -182,7 +182,7 @@ Your code is almost complete. Can you envision your next steps? ## 리뷰 & 자기주도 학습 -Research some ways that you can increment and decrement game scores and lives. There are some interesting game engines like [PlayFab](https://playfab.com). How could using one of these would enhance your game? +게임 점수와 생명을 늘리거나 줄일 수 있는 몇 가지 방법을 조사해보세요. [PlayFab](https://playfab.com)처럼 흥미로운 게임 엔진이 있습니다. 이 중 하나를 사용하면 어떻게 게임을 향상시킬 수 있을까요? ## 과제