add 6-1 ~ 6-6 readme ko translation (WIP)

pull/39/head
minwook-shin 4 years ago
parent 29f01dfe96
commit b05a69f920

@ -1,12 +1,12 @@
# Build a Space Game Part 1: Introduction
# Space 게임 제작하기 파트 1: 소개
![video](../images/pewpew.gif)
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
### Inheritance and Composition in game development
### 게임 개발의 상속과 구성
In earlier lessons, there was not much need to worry about the design architecture of the apps you built, as the projects were very small in scope. However, when your applications grow in size and scope, architectural decisions become a larger concern. There are two major approaches to creating larger applications in JavaScript: *composition* or *inheritance*. There are pros and cons to both but let's explain them from within the context of a game.
@ -21,7 +21,7 @@ In a game you have `game objects` which are objects that exist on a screen. This
✅ Think about a game like Pac-Man. Can you identify the four object types listed above in this game?
### Expressing behavior
### 행동 표현
All we described above are behavior that game objects can have. So how do we encode those? We can express this behavior as methods associated to either classes or objects.
@ -136,7 +136,7 @@ It's up to you which pattern you choose. JavaScript supports both these paradigm
Another pattern common in game development addresses the problem of handling the game's user experience and performance.
## Pub/sub pattern
## Pub/sub 패턴
✅ Pub/Sub stands for 'publish-subscribe'
@ -207,18 +207,18 @@ As things gets more complicated when your game grows, this pattern stays the sam
---
## 🚀 Challenge
## 🚀 도전
Think about how the pub-sub pattern can enhance a game. Which parts should emit events, and how should the game react to them? Now's your chance to get creative, thinking of a new game and how its parts might behave.
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber).
## Assignment
## 과제
[Mock up a game](assignment.md)

@ -1,10 +1,10 @@
# Build a Space Game Part 2: Draw Hero and Monsters to Canvas
# Space 게임 제작하기 파트 2: Canvas에 영웅과 몬스터 그리기
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
## The Canvas
## Canvas
The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it.
@ -22,7 +22,7 @@ Above we are setting the `id`, `width` and `height`.
- `width`: this is the width of the element.
- `height`: this is the height of the element.
## Drawing simple geometry
## 간단한 geometry 그리기
The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location `0,0` is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.
@ -62,11 +62,11 @@ You can draw all sorts of things with the Canvas API like:
✅ Try it! You know how to draw a rectangle, can you draw a circle to a page? Take a look at some interesting Canvas drawings on CodePen. Here's a [particularly impressive example](https://codepen.io/dissimulate/pen/KrAwx).
## Load and draw an image asset
## 이미지 어셋 불러오고 그리기
You load an image asset by creating an `Image` object and set its `src` property. Then you listen to the `load` event to know when it's ready to be used. The code looks like this:
### Load asset
### 어셋 불러오기
```javascript
const img = new Image();
@ -76,7 +76,7 @@ img.onload = () => {
}
```
### Load asset pattern
### Load asset 패턴
It's recommended to wrap the above in a construct like so, so it's easier to use and you only try to manipulate it when it's fully loaded:
@ -115,9 +115,9 @@ async function run() {
}
```
## Now it's time to start building your game
## 이제 게임 제작을 시작할 시간입니다
### What to build
### 무엇을 만드나요
You will build a web page with a Canvas element. It should render a black screen `1024*768`. We've provided you with two images:
@ -129,7 +129,7 @@ You will build a web page with a Canvas element. It should render a black screen
![Monster ship](solution/assets/enemyShip.png)
### Recommended steps to start development
### 개발 시작하기 위한 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
@ -155,7 +155,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
> Note: to see changes on your screen, refresh your browser.
### Add code
### 코드 추가하기
Add the needed code to `your-work/app.js` to solve the below
@ -187,30 +187,30 @@ Add the needed code to `your-work/app.js` to solve the below
}
```
## Result
## 결과
The finished result should look like so:
![Black screen with a hero and 5*5 monsters](partI-solution.png)
## Solution
## 솔루션
Please try solving it yourself first but if you get stuck, have a look at a [solution](solution/app.js)
---
## 🚀 Challenge
## 🚀 도전
You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and try to draw a 3D object.
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
## Assignment
## 과제
[Play with the Canvas API](assignment.md)

@ -1,6 +1,6 @@
# Build a Space Game Part 3: Adding Motion
# Space 게임 제작하기 파트 3: 모션 추가하기
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
@ -32,7 +32,7 @@ ctx.drawImage(heroImg, hero.x, hero.y);
✅ Can you think of a reason why redrawing your hero many frames per second might accrue performance costs? Read about [alternatives to this pattern](https://www.html5rocks.com/en/tutorials/canvas/performance/).
## Handle keyboard events
## 키보드 이벤트 제어하기
You handle events by attaching specific events to code. Keyboard events are triggered on the whole window whereas mouse events like a `click` can be connected to clicking a specific element. We will use keyboard events throughout this project.
@ -56,7 +56,7 @@ For key events there are two properties on the event you can use to see what key
✅ Key event manipulation is useful outside of game development. What other uses can you think of for this technique?
### Special keys: a caveat
### 특별한 키: a caveat
There are some *special* keys that affect the window. That means that if you are listening to a `keyup` event and you use these special keys to move your hero it will also perform horizontal scrolling. For that reason you might want to *shut-off* this built-in browser behavior as you build out your game. You need code like this:
@ -81,7 +81,7 @@ window.addEventListener('keydown', onKeyDown);
The above code will ensure that arrow-keys and the space key have their *default* behavior shut off. The *shut-off* mechanism happens when we call `e.preventDefault()`.
## Game induced movement
## 게임의 움직임
We can make things move by themselves by using timers such as the `setTimeout()` or `setInterval()` function that update the location of the object on each tick, or time interval. Here's what that can look like:
@ -92,7 +92,7 @@ let id = setInterval(() => {
})
```
## The game loop
## 게임 루프
The game loop is a concept that is essentially a function that is invoked at regular intervals. It's called the game loop as everything that should be visible to the user is drawn into the loop. The game loop makes use of all the game objects that are part of the game, drawing all of them unless for some reason shouldn't be part of the game any more. For example if an object is an enemy that was hit by a laser and blows up, it's no longer part of the current game loop (you'll learn more on this in subsequent lessons).
@ -112,14 +112,14 @@ let gameLoopId = setInterval(() =>
The above loop is invoked every `200` milliseconds to redraw the canvas. You have the ability to choose the best interval that makes sense for your game.
## Continuing the Space Game
## Space 게임 계속하기
You will take the existing code and extend it. Either start with the code that you completed during part I or use the code in [Part II- starter](your-work).
- **Moving the hero**: you will add code to ensure you can move the hero using the arrow keys.
- **Move enemies**: you will also need to add code to ensure the enemies move from top to bottom at a given rate.
## Recommended steps
## 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
@ -141,7 +141,7 @@ 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; nothing is moving - yet!
### Add code
### 코드 추가하기
1. **Add dedicated objects** for `hero` and `enemy` and `game object`, they should have `x` and `y` properties. (Remember the portion on [Inheritance or composition](../README.md) ).
@ -371,18 +371,18 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
---
## 🚀 Challenge
## 🚀 도전
As you can see, your code can turn into 'spaghetti code' when you start adding functions and variables and classes. How can you better organize your code so that it is more readable? Sketch out a system to organize your code, even if it still resides in one file.
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
While we're writing our game without using frameworks, there are many JavaScript-based canvas frameworks for game development. Take some time to do some [reading about these](https://github.com/collections/javascript-game-engines).
## Assignment
## 과제
[Comment your code](assignment.md)

@ -1,6 +1,6 @@
# Build a Space Game Part 4: Adding A Laser and Detect Collisions
# Space 게임 제작하기 파트 4: 레이저 추가하고 충돌 감지하기
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
@ -19,7 +19,7 @@ In short, you -- *the hero* -- need to hit all enemies with a laser before they
Let's be heroic together!
## Collision detection
## 충돌 감지하기
How do we do collision detection? We need to think of our game objects as rectangles moving about. Why is that you might ask? Well, the image used to draw a game object is a rectangle: it has an `x`, `y`, `width` and `height`.
@ -49,7 +49,7 @@ If two rectangles, i.e a hero and enemy *intersect*, you have a collision. What
}
```
## How do we destroy things
## 어떻게 파괴할까요
To destroy things in a game you need to let the game know it should no longer paint this item in the game loop that triggers on a certain interval. A way to do this is to mark a game object as *dead* when something happens, like so:
@ -64,7 +64,7 @@ Then you an proceed to sort out *dead* objects before repainting the screen, lik
gameObjects = gameObject.filter(go => !go.dead);
```
## How do we fire a laser
## 어떻게 레이저를 발사할까요
Firing a laser translates to responding to a key-event and creating an object that moves in a certain direction. We therefore need to carry out the following steps:
@ -72,7 +72,7 @@ Firing a laser translates to responding to a key-event and creating an object th
2. **Attach code to a key event**: we need to choose a key on the keyboard that represents the player shooting the laser.
3. **Create a game object that looks like a laser** when the key is pressed.
## Cooldown on our laser
## 레이저 쿨다운
The laser needs to fire every time you press a key, like *space* for example. To prevent the game producing way too many lasers in a short time we need to fix this. The fix is by implementing a so called *cooldown*, a timer, that ensures that a laser can only be fired so often. You can implement that in the following way:
@ -102,7 +102,7 @@ class Weapon {
✅ Refer to lesson 1 in the space game series to remind yourself about *cooldowns*.
## What to build
## 무엇을 만드나요
You will take the existing code (which you should have cleaned up and refactored) from the previous lesson, and extend it. Either start with the code from part II or use the code at [Part III- starter](/your-work).
@ -114,7 +114,7 @@ You will take the existing code (which you should have cleaned up and refactored
3. **Enemy and hero collision**: an enemy and the hero is destroyed if hitting each other
4. **Enemy hits bottom of the screen**: An enemy and a hero is destroyed if the enemy hits the bottom of the screen
## Recommended steps
## 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
@ -137,7 +137,7 @@ 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, nothing is moving - yet :).
### Add code
### 코드 추가하기
1. **Setup a rectangle representation of your game object, to handle collision** The below code allows you to get a rectangle representation of a `GameObject`. Edit your GameObject class to extend it:
@ -280,18 +280,18 @@ At this point, your game has some functionality! You can navigate with your arro
---
## 🚀 Challenge
## 🚀 도전
Add an explosion! Take a look at the game assets in [the Space Art repo](../solution/spaceArt/readme.txt) and try to add an explosion when the laser hits an alien
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
Experiment with the intervals in your game thus far. What happens when you change them? Read more about [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
## Assignment
## 과제
[Explore collisions](assignment.md)

@ -1,12 +1,12 @@
# Build a Space Game Part 5: Scoring and Lives
# Space 게임 제작하기 파트 5: 점수내고 살기
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
In this lesson, you'll learn how to add scoring to a game and calculate lives.
## Draw text on the screen
## 화면에 텍스트 그리기
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.
@ -19,18 +19,18 @@ 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!
## Life, as a game concept
## 게임 컨셉에서 생명
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.
## What to build
## 무엇을 만드나요
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).
## Recommended steps
## 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
@ -53,7 +53,7 @@ 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.
### Add code
### 코드 추가하기
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:
@ -172,18 +172,18 @@ By the end of this work, you should see the small 'life' ships at the bottom rig
---
## 🚀 Challenge
## 🚀 도전
Your code is almost complete. Can you envision your next steps?
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
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?
## Assignment
## 과제
[Build a Scoring Game](assignment.md)

@ -1,6 +1,6 @@
# Build a Space Game Part 6: End and Restart
# Space 게임 제작하기 파트 6: 끝과 재시작
## Pre-Lecture Quiz
## 강의 전 퀴즈
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
@ -11,20 +11,20 @@ There are different ways to express and *end condition* in a game. It's up to yo
- **You've collected `N` points**: Another common end condition is for you to collect points. How you get points is up to you but it's quite common to assign points to various activities like destroying an enemy ship or maybe collect items that items *drop* when they are destroyed.
- **Complete a level**: This might involve several conditions such as `X` enemy ships destroyed, `Y` points collected or maybe that a specific item has been collected.
## Restarting
## 다시 시작하기
If people enjoy your game they are likely to want to replay it. Once the game ends for whatever reason you should offer an alternative to restart.
✅ Think a bit about under what conditions you find a game ends, and then how you are prompted to restart
## What to build
## 무엇을 만드나요
You will be adding these rules to your game:
1. **Winning the game**. Once all enemy ships have been destroyed, you win the game. Additionally display some kind of victory message.
1. **Restart**. Once all your lives are lost or the game is won, you should offer a way to restart the game. Remember! You will need to reinitialize the game and the previous game state should be cleared.
## Recommended steps
## 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
@ -50,7 +50,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
> tip: to avoid warnings in Visual Studio Code, edit the `window.onload` function to call `gameLoopId` as is (without `let`), and declare the gameLoopId at the top of the file, independently: `let gameLoopId;`
### Add code
### 코드 추가하기
1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions:
@ -205,18 +205,18 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
---
## 🚀 Challenge
## 🚀 도전
Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
## Post-Lecture Quiz
## 강의 후 퀴즈
[Post-lecture quiz](.github/post-lecture-quiz.md)
## Review & Self Study
## 리뷰 & 자기주도 학습
Your assignment is to create a fresh sample game, so explore some of the interesting games out there to see what type of game you might build.
## Assignment
## 과제
[Build a Sample Game](assignment.md)

Loading…
Cancel
Save