info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-30 18:10:10 +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

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)