info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-29 01:20:56 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into ko_translation

Browse Source
This commit is contained in:
minwook
2020-11-30 19:09:24 +09:00
committed by GitHub
parent 97de424e91 ef61ca00d8
commit 2abe2b7457
56 changed files with 757 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
6-space-game/1-introduction/translations/README.es.md
View File

@@ -2,7 +2,7 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
### Herencia y composición en el desarrollo de juegos
@@ -207,10 +207,10 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec
🚀Desafío: Piense en cómo el patrón pub-sub puede mejorar un juego. ¿Qué partes deberían emitir eventos y cómo debería reaccionar el juego ante ellos? Ahora tienes la oportunidad de ser creativo, pensar en un nuevo juego y en cómo podrían comportarse sus partes.
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber).
**Tarea**: [Mock up a game](assignment.md)
**Tarea**: [Mock up a game](assignment.es.md)

4
6-space-game/2-drawing-to-canvas/README.md
View File

@@ -81,14 +81,14 @@ img.onload = () => {
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:
```javascript
async function loadAsset(path) {
function loadAsset(path) {
return new Promise((resolve) => {
const img = new Image();
img.src = path;
img.onload = () => {
// image loaded and ready to be used
resolve(img);
}
resolve(img);
})
}

14
6-space-game/2-drawing-to-canvas/translations/README.es.md
View File

@@ -2,7 +2,7 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
## El lienzo
@@ -60,7 +60,7 @@ Puede dibujar todo tipo de cosas con la API de Canvas como:
- **Texto**, puede dibujar un texto con cualquier fuente y color que desee.
- **Imágenes**, puede dibujar una imagen basada en un activo de imagen como .jpg o .png, por ejemplo.
✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante] (https://codepen.io/dissimulate/pen/KrAwx).
✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante](https://codepen.io/dissimulate/pen/KrAwx).
## Cargar y dibujar un recurso de imagen
@@ -122,11 +122,11 @@ Construirá una página web con un elemento Canvas. Debería representar una pan
- Barco héroe
![Barco héroe](solution/assets/player.png)
![Barco héroe](../solution/assets/player.png)
- Monstruo 5*5
![Monster ship](solution/assets/enemyShip.png)
![Monster ship](../solution/assets/enemyShip.png)
### Pasos recomendados para iniciar el desarrollo
@@ -194,7 +194,7 @@ Agregue el código necesario a `your-work/app.js` para resolver lo siguiente
El resultado final debería verse así:
![Pantalla negra con un héroe y monstruos 5*5](partI-solution.png)
![Pantalla negra con un héroe y monstruos 5*5](../partI-solution.png)
## Solución
@@ -203,10 +203,10 @@ Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una
🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
**Tarea**: [Jugar con la API de Canvas](assignment.md)
**Tarea**: [Jugar con la API de Canvas](assignment.es.md)

10
6-space-game/3-moving-elements-around/translations/README.es.md
View File

@@ -2,7 +2,7 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos:
@@ -145,7 +145,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`.
### Agregar código
1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e` y`. (Recuerde la parte sobre [Herencia o composición](../README.md)).
1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e `y`. (Recuerde la parte sobre [Herencia o composición](../README.md)).
* SUGERENCIA* `game object` debe ser el que tenga `x` e `y` y la capacidad de dibujarse a sí mismo en un lienzo.
@@ -217,7 +217,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`.
Compruebe la consola de su navegador en este punto y observe cómo se registran las pulsaciones de teclas.
3. **Implemente** el [subpatrón Pub] (../ README.md), esto mantendrá su código limpio mientras sigue las partes restantes.
3. **Implemente** el [subpatrón Pub](../README.md), esto mantendrá su código limpio mientras sigue las partes restantes.
Para hacer esta última parte, puede:
@@ -376,10 +376,10 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`.
🚀 Desafío: como puede ver, su código puede convertirse en 'código espagueti' cuando comienza a agregar funciones, variables y clases. ¿Cómo puede organizar mejor su código para que sea más legible? Esboce un sistema para organizar su código, incluso si todavía reside en un archivo.
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Mientras escribimos nuestro juego sin usar marcos, existen muchos marcos de lienzo basados en JavaScript para el desarrollo de juegos. Tómate un tiempo para hacer algo [leer sobre estos](https://github.com/collections/javascript-game-engines).
**Tarea**: [Comenta tu código](assignment.md)
**Tarea**: [Comenta tu código](assignment.es.md)

8
6-space-game/4-collision-detection/translations/README.es.md
View File

@@ -2,12 +2,12 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego:
- **Un láser**: este láser se dispara desde la nave de tu héroe y verticalmente hacia arriba
- **Detección de colisiones**, como parte de la implementación de la capacidad de * disparar *, también agregaremos algunas reglas de juego interesantes:
- **Detección de colisiones**, como parte de la implementación de la capacidad de *disparar*, también agregaremos algunas reglas de juego interesantes:
- **El láser golpea al enemigo**: El enemigo muere si es golpeado por un láser
- **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de la pantalla
- **Colisión de héroe y enemigo**: Un enemigo y el héroe son destruidos si se golpean entre sí.
@@ -284,10 +284,10 @@ En este punto, ¡tu juego tiene algunas funciones! Puedes navegar con tus flecha
🚀 Desafío: ¡Agrega una explosión! Echa un vistazo a los recursos del juego en [el repositorio de Space Art](../solution/spaceArt/readme.txt) e intenta agregar una explosión cuando el láser golpea a un extraterrestre.
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Experimente con los intervalos de su juego hasta ahora. ¿Qué pasa cuando los cambias? Más información sobre [eventos de tiempo de JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
**Asignación**: [Explorar colisiones](assignment.md)
**Asignación**: [Explorar colisiones](assignment.es.md)

6
6-space-game/5-keeping-score/translations/README.es.md
View File

@@ -2,7 +2,7 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
En esta lección, aprenderá cómo agregar puntos a un juego y calcular vidas.
@@ -173,10 +173,10 @@ Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la part
🚀Challenge: Tu código está casi completo. ¿Puedes imaginar tus próximos pasos?
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Investigue algunas formas en las que puede incrementar y disminuir las puntuaciones y vidas del juego. Hay algunos motores de juegos interesantes como [PlayFab](https://playfab.com). ¿Cómo podría mejorar tu juego el uso de uno de estos?
**Tarea**: [Crear un juego de puntuación](assignment.md)
**Tarea**: [Crear un juego de puntuación](assignment.es.md)

2
6-space-game/5-keeping-score/translations/assignment.es.md
View File

@@ -2,7 +2,7 @@
## Instrucciones
Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos] (https://www.kenney.nl/)
Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos](https://www.kenney.nl/)
# Rúbrica

8
6-space-game/6-end-condition/translations/README.es.md
View File

@@ -2,11 +2,11 @@
![video](video-url)
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora:
- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves` N` Enemy para completar un nivel
- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves `N` Enemy para completar un nivel
- **Tu nave ha sido destruida**: Definitivamente hay juegos en los que pierdes el juego si tu nave es destruida. Otro enfoque común es que tienes el concepto de vidas. Cada vez que un barco es destruido, se descuenta una vida. Una vez que se hayan perdido todas las vidas, perderá el juego.
- **Has acumulado `N` puntos**: Otra condición final común es que acumules puntos. La forma de obtener puntos depende de usted, pero es bastante común asignar puntos a diversas actividades, como destruir una nave enemiga o tal vez recolectar elementos que los elementos *sueltan* cuando son destruidos.
- **Completa un nivel**: Esto puede implicar varias condiciones como "X" barcos enemigos destruidos, puntos "Y" acumulados o tal vez que se haya recogido un objeto específico.
@@ -205,10 +205,10 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`.
🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript.
## [Post-lecture prueba](.github/post-lecture-quiz.md)
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
## Revisión y autoestudio
Tu tarea es crear un juego de muestra nuevo, así que explora algunos de los juegos interesantes que existen para ver qué tipo de juego podrías construir.
**Tarea**: [Crear un juego de muestra](assignment.md)
**Tarea**: [Crear un juego de muestra](assignment.es.md)