Skip to content

Commit

Permalink
resolve conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
@hochan222
hochan222 committed Jul 30, 2023
2 parents d25de65 + 32452a7 commit 11d8069
Show file tree
Hide file tree
Showing 98 changed files with 489 additions and 1,610 deletions.
4 changes: 0 additions & 4 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,6 @@ build/

# ko
/files/ko/learn/**/*.md
/files/ko/mozilla/**/*.md
/files/ko/mozilla/add-ons/**/*.md
/files/ko/mozilla/add-ons/webextensions/api/**/*.md
/files/ko/mozilla/firefox**/*.md
/files/ko/web/api/**/*.md
/files/ko/web/css/**/*.md
/files/ko/web/html/**/*.md
Expand Down
2 changes: 1 addition & 1 deletion docs/ko/guides/glossary-guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
**사전 순으로 용어집을 편집해주세요.**

| 용어 | 번역 | 기타 |
| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------ |
| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------ | --- |
| Application | 애플리케이션 | |
| Assertion | 어설션 | |
| Attribute | 특성 | |
Expand Down
4 changes: 0 additions & 4 deletions files/ko/_redirects.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
/ko/docs/About_the_Document_Object_Model /ko/docs/Web/API/Document_Object_Model
/ko/docs/Accessibility /ko/docs/Web/Accessibility
/ko/docs/Accessibility/ARIA /ko/docs/Web/Accessibility/ARIA
/ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets /ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
/ko/docs/Alternative_style_sheets /ko/docs/Web/CSS/Alternative_style_sheets
/ko/docs/Apps/Progressive /ko/docs/Web/Progressive_web_apps
/ko/docs/Apps/Progressive/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
/ko/docs/Apps/Progressive/App_structure /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
/ko/docs/Apps/Progressive/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
/ko/docs/Apps/Progressive/Offline_Service_workers /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers
Expand Down Expand Up @@ -333,7 +331,6 @@
/ko/docs/Learn/접근성 /ko/docs/Learn/Accessibility
/ko/docs/Learn/접근성/HTML /ko/docs/Learn/Accessibility/HTML
/ko/docs/Learn/접근성/What_is_accessibility /ko/docs/Learn/Accessibility/What_is_accessibility
/ko/docs/Learn/접근성/모바일 /ko/docs/Learn/Accessibility/Mobile
/ko/docs/Localization /ko/docs/Glossary/Localization
/ko/docs/MDN/About /ko/docs/MDN/Writing_guidelines
/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete
Expand Down Expand Up @@ -818,7 +815,6 @@
/ko/docs/Web/Media/Formats/코덱파라미터 /ko/docs/Web/Media/Formats/codecs_parameter
/ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work
/ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path
/ko/docs/Web/Progressive_web_apps/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
/ko/docs/Web/Progressive_web_apps/App_structure /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
/ko/docs/Web/Progressive_web_apps/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
/ko/docs/Web/Progressive_web_apps/Introduction /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames
Expand Down
36 changes: 0 additions & 36 deletions files/ko/_wikihistory.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -735,10 +735,6 @@
"modified": "2020-07-16T22:40:12.947Z",
"contributors": ["dev-dongwon"]
},
"Learn/Accessibility/Mobile": {
"modified": "2020-07-16T22:40:31.872Z",
"contributors": ["seunghun"]
},
"Learn/Accessibility/What_is_accessibility": {
"modified": "2020-07-16T22:40:05.805Z",
"contributors": ["seunghun"]
Expand Down Expand Up @@ -4688,26 +4684,10 @@
"modified": "2020-01-12T10:16:30.044Z",
"contributors": ["alattalatta", "young-gratia", "teoli", "Cho.Eun"]
},
"Web/Accessibility/ARIA/ARIA_Live_Regions": {
"modified": "2020-12-05T03:30:43.763Z",
"contributors": ["movegun1027"]
},
"Web/Accessibility/ARIA/ARIA_Techniques": {
"modified": "2020-01-12T02:25:07.876Z",
"contributors": ["alattalatta", "dcondrey"]
},
"Web/Accessibility/ARIA/Roles": {
"modified": "2019-03-18T21:24:18.888Z",
"contributors": ["estelle"]
},
"Web/Accessibility/ARIA/Roles/dialog_role": {
"modified": "2019-03-18T21:24:31.941Z",
"contributors": ["seokju-na"]
},
"Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": {
"modified": "2019-03-23T23:21:28.496Z",
"contributors": ["dotorify", "teoli", "Cho.Eun"]
},
"Web/Accessibility/Mobile_accessibility_checklist": {
"modified": "2019-09-08T04:58:59.841Z",
"contributors": ["seunghun"]
Expand Down Expand Up @@ -6102,22 +6082,10 @@
"Web/Guide/Audio_and_video_delivery": {
"modified": "2019-04-17T05:03:01.108Z"
},
"Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
"modified": "2019-05-13T05:46:53.607Z",
"contributors": ["hoony"]
},
"Web/Guide/CSS/Block_formatting_context": {
"modified": "2020-08-05T00:58:44.120Z",
"contributors": ["alattalatta", "moolow", "corps99"]
},
"Web/Guide/Graphics": {
"modified": "2020-02-15T07:39:57.101Z",
"contributors": ["Netaras", "hyeonseok", "narae_lee"]
},
"Web/Guide/Mobile": {
"modified": "2019-05-30T06:59:50.297Z",
"contributors": ["SDSkyKlouD", "Seia-Soto", "xfq"]
},
"Web/Guide/Parsing_and_serializing_XML": {
"modified": "2019-03-23T22:16:47.020Z",
"contributors": ["young-gratia"]
Expand Down Expand Up @@ -10196,10 +10164,6 @@
"modified": "2019-03-23T22:00:19.382Z",
"contributors": ["chrisdavidmills", "cs09g"]
},
"Web/Progressive_web_apps/Guides/Making_PWAs_installable": {
"modified": "2020-01-26T15:58:32.379Z",
"contributors": ["alattalatta", "chrisdavidmills", "cs09g"]
},
"Web/Progressive_web_apps/Tutorials/js13kGames": {
"modified": "2019-03-18T20:52:13.104Z",
"contributors": ["chrisdavidmills", "cs09g"]
Expand Down
34 changes: 17 additions & 17 deletions files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation

{{GamesSidebar}}

In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.
In this tutorial we'll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.

## Example game

Expand All @@ -15,7 +15,7 @@ By the end of the tutorial you will have a fully functional demo game: [Cyber Or

## Phaser framework

[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it’s open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.
[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It's quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it's open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.

## Starting with the project

Expand All @@ -31,7 +31,7 @@ You can open the index file in your favourite browser to launch the game and try

## Setting up the Canvas

We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along:
We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let's set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along:

```html
<!doctype html>
Expand Down Expand Up @@ -94,7 +94,7 @@ The first value is the name of the state and the second one is the object we wan

## Managing game states

The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states.
The states in Phaser are separate parts of the game logic; in our case we're loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states.

### Boot.js

Expand Down Expand Up @@ -260,7 +260,7 @@ The `create` and `update` functions are framework-specific, while others will be

#### Adding the ball and its motion mechanics

First, let’s go to the `create()` function, initialize the ball object itself and assign a few properties to it:
First, let's go to the `create()` function, initialize the ball object itself and assign a few properties to it:

```js
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, "ball");
Expand All @@ -270,17 +270,17 @@ this.ball.body.setSize(18, 18);
this.ball.body.bounce.set(0.3, 0.3);
```

Here we’re adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles.
Here we're adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We're also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles.

#### Controlling the ball

It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the `create()` function :
It's cool to have the ball ready to be thrown around in the play area, but it's also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let's focus on the keyboard first by adding the following to the `create()` function :

```js
this.keys = this.game.input.keyboard.createCursorKeys();
```

As you can see there’s a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
As you can see there's a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.

Next we will add the following code to the `update()` function, so it will be fired on every frame. The `this.keys` object will be checked against player input, so the ball can react accordingly with the predefined force:

Expand All @@ -301,13 +301,13 @@ That way we can check which key is pressed at the given frame and apply the defi

#### Implementing the Device Orientation API

Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the `create()` function responsible for this:
Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here's the code from the `create()` function responsible for this:

```js
window.addEventListener("deviceorientation", this.handleOrientation, true);
```

We’re adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this:
We're adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this:

```js
handleOrientation: function(e) {
Expand Down Expand Up @@ -335,7 +335,7 @@ this.hole.anchor.set(0.5);
this.hole.body.setSize(2, 2);
```

The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).
The difference is that our hole's body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).

#### Building the block labyrinth

Expand Down Expand Up @@ -390,7 +390,7 @@ Thanks to that the game gives the player a challenge - now he have to roll the b

#### Collision detection

At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function:
At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There's a problem though — our game doesn't have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let's fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function:

```js
this.physics.arcade.collide(
Expand Down Expand Up @@ -447,7 +447,7 @@ If the `vibrate` method is supported by the browser and available in the `window

#### Adding the elapsed time

To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the `create` function first:
To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let's define the variables in the `create` function first:

```js
this.timer = 0; // time elapsed in the current level
Expand All @@ -471,7 +471,7 @@ this.totalTimeText = this.game.add.text(
);
```

We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:
We're defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:

```js
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
Expand All @@ -487,11 +487,11 @@ updateCounter: function() {
},
```

As you can see we’re incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.
As you can see we're incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.

#### Finishing the level and the game

The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole.
The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let's set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole.

```js
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
Expand Down Expand Up @@ -529,7 +529,7 @@ If the current level is lower than 5, all the neccesary variables are reset and

## Ideas for new features

This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.
This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There's also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.

## Summary

Expand Down
Loading

0 comments on commit 11d8069

Please sign in to comment.