Games aren't much fun until you have aliens running around on screen! In this game, we will make use of two types of movements:
외계인이 화면을 돌아다니기 전까지는 게임이 재미 없습니다! 이 게임에서는, 두 가지 타입의 동작을 씁니다:
- **Keyboard/Mouse movement**: when the user interacts with the keyboard or mouse to move an object on the screen.
- **키보드/마우스 동작**: 사용자가 키보드 또는 마우스와 상호작용하여 화면에서 개체를 움질일 때.
- **Game induced movement**: when the game moves an object with a certain time interval.
- **게임으로 움직이는 동작**: 게임이 일정 시간 간격으로 객체를 움직일 때.
So how do we move things on a screen? It's all about cartesian coordinates: we change the location (x,y) of the object and then redraw the screen.
그러면 화면에서 물건을 어떻게 움직일까요? 그것은 모두 직교 좌표에 관한 것입니다: 객체의 위치 (x, y)를 변경 한 뒤에 화면을 다시 그립니다.
Typically you need the following steps to accomplish *movement* on a screen:
일반적으로 화면에서 *이동*을 하려면 다음 단계가 필요합니다:
1. **Set a new location** for an object; this is needed to perceive the object as having moved.
1. 객체의 **새로운 위치 설정하기**; 이는 객체가 움직인 것으로 인식하는 데 필요합니다.
2. **Clear the screen**, the screen needs to be cleared in between draws. We can clear it by drawing a rectangle that we fill with a background color.
2. **화면 비우기**, 화면은 그려지는 사이에 비워져야 합니다. 배경색으로 채운 사각형을 그려서 지울 수 있습니다.
3. **Redraw object** at new location. By doing this we finally accomplish moving the object from one location to the other.
3. 새로운 위치에서 **개체를 다시 그리기**. 최종적으로 한 위치에서 다른 위치로 객체를 이동합니다.
Here's what it can look like in code:
코드에서 다음과 같이 보일 수 있습니다:
```javascript
```javascript
//set the hero's location
//set the hero's location
@ -30,15 +30,16 @@ ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);
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/).
✅ 영웅을 초당 수 많은 프레임으로 다시 그리게 될 때 성능 비용이 발생하는 이유를 알 수 있나요? [alternatives to this pattern](https://www.html5rocks.com/en/tutorials/canvas/performance/)에 대하여 읽어보세요.
## 키보드 이벤트 제어하기
## 키보드 이벤트 제어하기
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.
특정 이벤트를 코드에 연결하여 이벤트를 처리합니다. 키보드 이벤트는 전체 윈도우에서 연결되는 반면에 `click`과 같은 마우스 이벤트는 클릭하는 특정 요소에 연결할 수 있습니다. 이 프로젝트에서는 키보드 이벤트를 사용합니다.
To handle an event you need to use the window's `addEventListener()` method and provide it with two input parameters. The first parameter is the name of the event, for example `keyup`. The second parameter is the function that should be invoked as a result of the event taking place.
이벤트를 처리하려면 윈도우의 `addEventListener ()` 메소드를 사용하고 두 개의 입력 파라미터를 제공해야 합니다. 첫 번째 파라미터는 이벤트의 이름입니다, 예시를 들자면 `keyup`과 같습니다. 두 번째 파라미터는 이벤트가 발생함에 따라 호출될 함수입니다.
For key events there are two properties on the event you can use to see what key was pressed:
키 이벤트의 경우에는 어떤 키를 눌렀는지 확인할 때 쓸 수 있는 이벤트로 두 가지 속성이 있습니다:
- `key`, this is a string representation of the pressed key, for example `ArrowUp`
- `key`, 눌린 키의 문자열 표현입니다, 예를 들어 `ArrowUp` 입니다.
- `keyCode`, this is a number representation, for example `37`, corresponds to `ArrowLeft`.
- `keyCode`, 숫자 표현입니다. 예를 들어 `37`은 `ArrowLeft`에 해당합니다.
✅ Key event manipulation is useful outside of game development. What other uses can you think of for this technique?
✅ 키 이벤트 조작은 게임 개발 외부에서 유용합니다. 이 기술의 다른 사용법은 무엇일까요?
### 특별한 키: 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:
윈도우에 영향을 주는 몇 가지 *특별한* 키가 있습니다. 즉 `keyup` 이벤트를 듣고 이 특별한 키를 사용하면 영웅을 이동하여 가로 스크롤도 할 수 있다는 것을 의미합니다. 따라서 게임을 제작할 때는 이 내장 브라우저 동작을 *차단* 할 수 있습니다. 다음과 같은 코드가 필요합니다:
```javascript
```javascript
let onKeyDown = function (e) {
let onKeyDown = function (e) {
@ -79,11 +80,11 @@ let onKeyDown = function (e) {
window.addEventListener('keydown', onKeyDown);
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()`.
위 코드는 화살표-키와 스페이스 키의 *기본* 동작을 막습니다. *차단* 메커니즘은 `e.preventDefault()`를 호출할 때 발생합니다.
## 게임의 움직임
## 게임의 움직임
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:
각 틱 또는 시간 간격에서 객체의 위치를 업데이트하는 `setTimeout()` 또는 `setInterval()` 함수 같은 타이머를 사용하여 스스로 움직일 수 있습니다. 다음과 같이 보입니다:
```javascript
```javascript
let id = setInterval(() => {
let id = setInterval(() => {
@ -94,9 +95,9 @@ let id = setInterval(() => {
## 게임 루프
## 게임 루프
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).
게임 루프는 기본적으로 일정한 간격마다 호출되는 함수인 개념입니다. 사용자에게 보여줄 모든 것이 루프에 그려지므로 이것을 게임 루프라고 합니다. 게임 루프는 게임의 일부인 모든 게임 객체를 사용하여, 모종의 이유로 더 이상 게임의 일부가 아니지 않는 이상 다 그립니다. 예를 들면 객체가 레이저에 맞아 폭발한 적이 있다면 더 이상 현재 게임 루프의 일부가 아닙니다 (다음 단원에서 자세히 알아 볼 것입니다).
Here's what a game loop can typically look like, expressed in code:
다음은 일반적으로 코드로 표현된 게임 루프의 모습입니다:
```javascript
```javascript
let gameLoopId = setInterval(() =>
let gameLoopId = setInterval(() =>
@ -110,18 +111,18 @@ let gameLoopId = setInterval(() =>
}, 200);
}, 200);
```
```
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.
캔버스를 다시 그리기 위해 위의 루프가 `200` milliseconds 마다 호출됩니다. 게임에 가장 적합한 간격을 고를 수 있습니다.
## Space 게임 계속하기
## 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).
기존 코드를 가져와 확장합니다. 파트 I 에서 작성한 코드로 시작하거나 [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.
- **적을 움직이기**: 적들이 주어진 속도로 상단에서 하단으로 이동할 수 있도록 코드를 추가합니다.
## 권장 단계
## 권장 단계
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
`your-work` 하위 폴더에 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
```bash
```bash
-| assets
-| assets
@ -132,22 +133,22 @@ Locate the files that have been created for you in the `your-work` sub folder. I
-| package.json
-| package.json
```
```
You start your project the `your_work` folder by typing:
타이핑하여 `your_work` 폴더에서 프로젝트를 시작합니다:
```bash
```bash
cd your-work
cd your-work
npm start
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!
위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하면 영웅과 모든 적을 렌더링 해야하지만; 아무것도 움직이지 않습니다 - 아직!
### 코드 추가하기
### 코드 추가하기
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) ).
1. `영웅`과 `적` 그리고 `게임 객체`에 대한 **전용 객체를 추가합니다**. `x` 혹은 `y` 속성이 필요합니다. ([Inheritance or composition](../README.md) 파트를 기억하세요).
*HINT* `game object` should be the one with `x` and `y` and the ability to draw itself to a canvas.
*힌트* `game object`는 `x`와 `y`가 있으면서 canvas에 그릴 수 있는 능력이 되어야 합니다.
>tip: start by adding a new GameObject class with its constructor delineated as below, and then draw it to the canvas:
>tip: 생성자가 아래와 같이 이루어진 새로운 GameObject 클래스를 추가하여, 시작한 뒤에 canvas로 그립니다:
```javascript
```javascript
@ -168,7 +169,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
Now, extend this GameObject to create the Hero and Enemy.
이제, GameObject를 확장하여 영웅과 적을 생성합니다.
```javascript
```javascript
class Hero extends GameObject {
class Hero extends GameObject {
@ -196,11 +197,11 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
*REMEMBER* it's a cartesian system, top-left is `0,0`. Also remember to add code to stop *default behavior*
*기억합시다* 데카르트 시스템이고, 좌측 상단은 `0,0`입니다. 또한 *기본 동작*을 중지하는 코드를 추가해야 합니다
>tip: create your onKeyDown function and attach it to the window:
>tip: onKeyDown 함수를 만들고 윈도우에 붙입니다.
```javascript
```javascript
let onKeyDown = function (e) {
let onKeyDown = function (e) {
@ -212,13 +213,13 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keydown", onKeyDown);
```
```
Check your browser console at this point, and watch the keystrokes being logged.
이 지점에서 브라우저 콘솔을 확인해봅니다, 그리고 로깅되는 키 입력을 봅니다.
3. **Implement** the [Pub sub pattern](../README.md), this will keep your code clean as you follow the remaining parts.
3. [Pub sub pattern](../README.md)으로 **구현합니다**, 이는 남은 파트를 따라가면서 코드를 깨끗하게 유지할 수 있습니다.
To do this last part, you can:
이 마지막 파트를 진행하면, 다음을 할 수 있습니다:
1. **Add an event listener** on the window:
1. 윈도우에 **Add an 이벤트 리스너를 추가합니다**:
```javascript
```javascript
window.addEventListener("keyup", (evt) => {
window.addEventListener("keyup", (evt) => {
@ -234,7 +235,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
});
});
```
```
1. **Create an EventEmitter class** to publish and subscribe to messages:
1. publish하고 메시지를 subscribe할 **EventEmitter 클래스를 생성합니다**:
```javascript
```javascript
class EventEmitter {
class EventEmitter {
@ -257,7 +258,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
1. **Add constants** and set up the EventEmitter:
1. EventEmitter를 설정하고 **constants를 추가합니다**:
```javascript
```javascript
const Messages = {
const Messages = {
@ -276,7 +277,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
eventEmitter = new EventEmitter();
eventEmitter = new EventEmitter();
```
```
1. **Initialize the game**
1. **게임을 초기화합니다**
```javascript
```javascript
function initGame() {
function initGame() {
@ -302,9 +303,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
1. **Setup the game loop**
1. **게임 루프를 설정합니다**
Refactor the window.onload function to initialize the game and set up a game loop on a good interval. You'll also add a laser beam:
window.onload 함수를 리팩터링하여 게임을 초기화하고 적절한 간격으로 게임 루프를 설정합니다. 레이저 빔도 추가합니다:
```javascript
```javascript
window.onload = async () => {
window.onload = async () => {
@ -325,9 +326,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
};
};
```
```
5. **Add code** to move enemies at a certain interval
5. 일정 간격으로 움직이는 적에 대한 **코드를 작성합니다**
Refactor the `createEnemies()` function to create the enemies and push them into the new gameObjects class:
`createEnemies()`함수를 리팩터링하여 적을 생성하고 새로운 gameObjects 클래스로 푸시합니다:
```javascript
```javascript
function createEnemies() {
function createEnemies() {
@ -346,7 +347,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
and add a `createHero()` function to do a similar process for the hero.
그리고 비슷한 과정으로 영웅에 대한 `createHero()` 함수를 추가합니다.
```javascript
```javascript
function createHero() {
function createHero() {
@ -359,7 +360,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
and finally, add a `drawGameObjects()` function to start the drawing:
그리고 마지막으로, 그리기를 시작할 `drawGameObjects()` 함수를 추가합니다:
```javascript
```javascript
function drawGameObjects(ctx) {
function drawGameObjects(ctx) {
@ -367,13 +368,13 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
}
}
```
```
Your enemies should start advancing on your hero spaceship!
적들이 영웅 spaceship의 앞으로 나아가려고 합니다!
---
---
## 🚀 도전
## 🚀 도전
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.
보다가, 함수와 변수 및 클래스를 추가하기 시작하면 코드가 '스파게티 코드'로 변할 수 있습니다. 코드를 더 읽기 쉽게 구성하려면 어떻게 해야 될까요? 코드가 여전히 하나의 파일에 있어도, 어울리는 시스템을 기획하시기 바랍니다.
## 강의 후 퀴즈
## 강의 후 퀴즈
@ -381,7 +382,7 @@ As you can see, your code can turn into 'spaghetti code' when you start adding f
## 리뷰 & 자기주도 학습
## 리뷰 & 자기주도 학습
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).
프레임워크를 사용하지 않고 게임을 작성하는 동안, 게임 개발을 위한 JavaScript-기반 canvas 프레임워크가 많이 존재하고 있습니다. 시간을 내어 [about these](https://github.com/collections/javascript-game-engines)를 보시기 바랍니다.
minwook-shin
4 years ago