mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-09-03 03:32:55 +02:00
Update Translations
This commit is contained in:
Lee Stott
GitHub
@@ -1,212 +0,0 @@
|
||||
# Construye un juego espacial Parte II: Dibuja héroes y monstruos en el lienzo
|
||||
|
||||
|
||||
|
||||
## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
|
||||
|
||||
## El lienzo
|
||||
|
||||
El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle un dibujo sobre él.
|
||||
|
||||
✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) en MDN.
|
||||
|
||||
Así es como se declara normalmente, como parte del cuerpo de la página:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
Arriba estamos configurando el `id`, `width` y `alto`.
|
||||
|
||||
- `id`: establezca esto para que pueda obtener una referencia cuando necesite interactuar con él.
|
||||
- `width`: este es el ancho del elemento.
|
||||
- `height`: esta es la altura del elemento.
|
||||
|
||||
## Dibujar geometría simple
|
||||
|
||||
Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje x y un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que se mencionó que era el ANCHO y ALTO del lienzo.
|
||||
|
||||
! [cuadrícula del lienzo](canvas_grid.png)
|
||||
> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Para dibujar en el elemento de lienzo, deberá seguir los siguientes pasos:
|
||||
|
||||
1. **Obtenga una referencia** al elemento Canvas.
|
||||
1. **Obtenga una referencia** en el elemento Context que se encuentra en el elemento canvas.
|
||||
1. **Realice una operación de dibujo** utilizando el elemento de contexto.
|
||||
|
||||
El código para los pasos anteriores generalmente se ve así:
|
||||
|
||||
```javascript
|
||||
// dibuja un rectángulo rojo
|
||||
// 1. obtener la referencia del lienzo
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
// 2. establecer el contexto en 2D para dibujar formas básicas
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
// 3. rellénalo con el color rojo
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
// 4. y dibuja un rectángulo con estos parámetros, configurando la ubicación y el tamaño
|
||||
ctx.fillRect(0,0, 200, 200) // x, y, ancho, alto
|
||||
```
|
||||
|
||||
✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Puede dibujar todo tipo de cosas con la API de Canvas como:
|
||||
|
||||
- **Formas geométricas**, ya mostramos cómo dibujar un rectángulo, pero hay mucho más que puedes dibujar.
|
||||
- **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).
|
||||
|
||||
## Cargar y dibujar un recurso de imagen
|
||||
|
||||
Usted carga un activo de imagen creando un objeto `Image` y estableciendo su propiedad `src`. Luego escuchas el evento `load` para saber cuándo está listo para usarse. El código se ve así:
|
||||
|
||||
### Cargar activo
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// image loaded and ready to be used
|
||||
}
|
||||
```
|
||||
|
||||
### Cargar patrón de activos
|
||||
|
||||
Se recomienda envolver lo anterior en una construcción así, para que sea más fácil de usar y solo intente manipularlo cuando esté completamente cargado:
|
||||
|
||||
|
||||
```javascript
|
||||
async function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// imagen cargada y lista para ser utilizada
|
||||
}
|
||||
resolve(img);
|
||||
})
|
||||
}
|
||||
|
||||
// usar así
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Para dibujar activos del juego en una pantalla, su código se vería así:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
### Qué construir
|
||||
|
||||
Construirá una página web con un elemento Canvas. Debería representar una pantalla negra `1024*768`. Le proporcionamos dos imágenes:
|
||||
|
||||
- Barco héroe
|
||||
|
||||
|
||||
|
||||
- Monstruo 5*5
|
||||
|
||||
|
||||
|
||||
|
||||
### Pasos recomendados para iniciar el desarrollo
|
||||
|
||||
Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Abra la copia de esta carpeta en Visual Studio Code. Debe tener una configuración de entorno de desarrollo local, preferiblemente con Visual Studio Code con NPM y Node instalados. Si no tiene `npm` configurado en su computadora, [aquí le explicamos cómo hacerlo](https://www.npmjs.com/get-npm).
|
||||
|
||||
Inicie su proyecto navegando a la carpeta `your_work`:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 5000`. Abra un navegador e ingrese esa dirección. Es una página en blanco ahora mismo, pero eso cambiará
|
||||
|
||||
> Nota: para ver los cambios en su pantalla, actualice su navegador.
|
||||
|
||||
### Agregar código
|
||||
|
||||
Agregue el código necesario a `your-work/app.js` para resolver lo siguiente
|
||||
|
||||
1. **Dibuja** un lienzo con fondo negro
|
||||
> consejo: agregue dos líneas debajo del TODO apropiado en `/app.js`, estableciendo el elemento `ctx` en negro y las coordenadas superior / izquierda en 0,0 y la altura y el ancho para que sean iguales a los del lienzo.
|
||||
2. **Cargar** texturas
|
||||
> consejo: agregue las imágenes del jugador y del enemigo usando `await loadTexture` y pasando la ruta de la imagen. ¡Todavía no los verá en la pantalla!
|
||||
3. **Dibuja** héroe en el centro de la pantalla en la mitad inferior
|
||||
> consejo: use la API `drawImage` para dibujar heroImg en la pantalla, configurando `canvas.width / 2 - 45` y `canvas.height - canvas.height / 4)`;
|
||||
4. **Dibujar** 5 * 5 monstruos
|
||||
> consejo: ahora puedes descomentar el código para dibujar enemigos en la pantalla. A continuación, vaya a la función `createEnemies` y constrúyala.
|
||||
|
||||
Primero, configure algunas constantes:
|
||||
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
luego, crea un bucle para dibujar la matriz de monstruos en la pantalla:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Resultado
|
||||
|
||||
El resultado final debería verse así:
|
||||
|
||||
|
||||
|
||||
## Solución
|
||||
|
||||
Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una [solución](solution/app.js)
|
||||
|
||||
🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
|
||||
|
||||
|
||||
## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
**Tarea**: [Jugar con la API de Canvas](assignment.es.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# Construisez un jeu spatial, partie 2 : dessinez des héros et des monstres sur le canevas
|
||||
|
||||
## Quiz préalable
|
||||
|
||||
[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=fr)
|
||||
|
||||
## Le canevas
|
||||
|
||||
Le canevas est un élément HTML qui par défaut n'a pas de contenu ; c'est une ardoise vierge. Vous devez dessiner dessus pour y ajouter quelque chose.
|
||||
|
||||
✅ Lisez en [plus sur l'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) sur MDN.
|
||||
|
||||
Voici comment il est généralement déclaré, dans le corps de la page:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
Ci-dessus, nous définissons `id`, `width` et `height`.
|
||||
|
||||
- `id`: définissez-le pour obtenir une référence lorsque vous avez besoin d'interagir avec lui.
|
||||
- `width`: c'est la largeur de l'élément.
|
||||
- `height`: c'est la hauteur de l'élément.
|
||||
|
||||
## Dessiner une géométrie simple
|
||||
|
||||
Le Canvas utilise un système de coordonnées cartésiennes pour dessiner des choses. Ainsi, il utilise un axe x et un axe y pour exprimer où se trouve quelque chose. L'emplacement `0,0` est la position en haut à gauche et en bas à droite ce que vous appelez également la LARGEUR et la HAUTEUR du canevas.
|
||||
|
||||
|
||||
> Image de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Pour dessiner sur l'élément de canevas, vous devrez suivre les étapes suivantes:
|
||||
|
||||
1. **Obtenir une référence** à l'élément Canvas.
|
||||
1. **Obtenez une référence** sur l'élément Context qui se trouve sur l'élément canvas.
|
||||
1. **Effectuez une opération de dessin** à l'aide de l'élément de contexte.
|
||||
|
||||
Le code pour les étapes ci-dessus ressemble communément à ceci:
|
||||
|
||||
```javascript
|
||||
// dessine un rectangle rouge
|
||||
//1. obtenir la référence du canevas
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. définir le contexte en 2D pour dessiner des formes de base
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. le remplir avec la couleur rouge
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. et dessiner un rectangle avec ces paramètres, en définissant l'emplacement et la taille
|
||||
ctx.fillRect(0,0, 200, 200) // x,y, largeur, hauteur
|
||||
```
|
||||
|
||||
✅ L'API Canvas se concentre principalement sur les formes 2D, mais vous pouvez également dessiner des éléments 3D sur un site Web ; pour cela, vous pouvez utiliser l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Vous pouvez dessiner toutes sortes de choses avec l'API Canvas comme:
|
||||
|
||||
- **Des formes géométriques**, nous avons déjà montré comment dessiner un rectangle, mais il y a beaucoup plus que vous pouvez dessiner.
|
||||
- **Du texte**, vous pouvez dessiner un texte avec la police et la couleur de votre choix.
|
||||
- **Des images**, vous pouvez dessiner une image basée sur un élément d'image comme un .jpg ou .png par exemple.
|
||||
|
||||
✅ Essayez-le ! Vous savez dessiner un rectangle, pouvez-vous dessiner un cercle sur une page ? Jetez un œil à quelques dessins Canvas intéressants sur CodePen. Voici un [exemple particulièrement impressionnant](https://codepen.io/dissimulate/pen/KrAwx).
|
||||
|
||||
## Charger et dessiner un élément d'image
|
||||
|
||||
Vous chargez une ressource image en créant un objet `Image` et définissez sa propriété `src`. Ensuite, vous écoutez l'événement `load` pour savoir quand il est prêt à être utilisé. Le code ressemble à ceci:
|
||||
|
||||
### Charger l'élément
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// image chargée et prête à être utilisée
|
||||
}
|
||||
```
|
||||
|
||||
### Charger le modèle d'élément
|
||||
|
||||
Il est recommandé d'envelopper ce qui précède dans une construction comme celle-ci, il est donc plus facile à utiliser et vous n'essayez de le manipuler que lorsqu'il est complètement chargé:
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// image chargée et prête à être utilisée
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// utiliser comme celà
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Pour dessiner les ressources du jeu sur un écran, votre code ressemblerait à ceci:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## Il est maintenant temps de commencer à créer votre jeu
|
||||
|
||||
### Quoi construire
|
||||
|
||||
Vous allez créer une page Web avec un élément Canvas. Il devrait rendre un écran noir `1024*768`. Nous vous avons fourni deux images:
|
||||
|
||||
- Navire héros
|
||||
|
||||
|
||||
|
||||
- Monstre 5*5
|
||||
|
||||
|
||||
|
||||
### Étapes recommandées pour commencer le développement
|
||||
|
||||
Recherchez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Ouvrez la copie de ce dossier dans Visual Studio Code. Vous devez disposer d'une configuration d'environnement de développement local, de préférence avec Visual Studio Code ainsi que NPM et Node installés. Si `npm` n'est pas configuré sur votre ordinateur, [voici comment procéder](https://www.npmjs.com/get-npm).
|
||||
|
||||
Démarrez votre projet en accédant au dossier `your_work`:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse. C'est une page blanche actuellement, mais cela va changer
|
||||
|
||||
> Remarque : pour voir les changements sur votre écran, actualisez votre navigateur.
|
||||
|
||||
### Ajouter du code
|
||||
|
||||
Ajoutez le code nécessaire à `your-work/app.js` pour résoudre le problème ci-dessous
|
||||
|
||||
1. **Dessinez** un canevas avec un fond noir
|
||||
> astuce : ajoutez deux lignes sous le TODO approprié dans `/app.js`, en définissant l'élément `ctx` sur noir et les coordonnées haut/gauche à 0,0 et la hauteur et la largeur à égales à celles du canevas.
|
||||
2. **Charger** les textures
|
||||
> astuce : ajoutez les images du joueur et de l'ennemi en utilisant `await loadTexture` et en passant le chemin de l'image. Vous ne les verrez pas encore à l'écran!
|
||||
3. **Dessinez** le héros au centre de l'écran dans la moitié inférieure
|
||||
> astuce : utilisez l'API `drawImage` pour dessiner heroImg à l'écran, en définissant `canvas.width / 2 - 45` et `canvas.height - canvas.height / 4)`;
|
||||
4. **Dessinez** les monstres 5*5
|
||||
> astuce : vous pouvez maintenant décommenter le code pour dessiner les ennemis à l'écran. Ensuite, allez à la fonction `createEnemies` et compilez la.
|
||||
|
||||
Tout d'abord, configurez quelques constantes:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
Ensuite, créez une boucle pour dessiner le tableau de monstres sur l'écran:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Résultat
|
||||
|
||||
Le résultat final devrait ressembler à ça:
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
Veuillez d'abord essayer de le résoudre vous-même, mais si vous êtes bloqué, jetez un œil à une [solution](../solution/app.js)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Vous avez appris à dessiner avec l'API Canvas axée sur la 2D ; jetez un œil à l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API), et essayez de dessiner un objet 3D.
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
En savoir plus sur l'API Canvas en [lisant à ce sujet](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Affectation
|
||||
|
||||
[Jouer avec l'API Canvas](assignment.fr.md)
|
||||
@@ -1,218 +0,0 @@
|
||||
# एक अंतरिक्ष खेल भाग 2 बनाएँ: कैनवस के लिए नायक और राक्षस बनाएँ
|
||||
|
||||
## लेक्चर पाहिले की क्विज
|
||||
|
||||
[लेक्चर पाहिले की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=hi)
|
||||
|
||||
## कैनवास
|
||||
|
||||
कैनवास एक HTML तत्व है जो डिफ़ॉल्ट रूप से कोई सामग्री नहीं है; यह एक खाली स्लेट है. आपको उस पर ड्राइंग करके इसे जोड़ना होगा.
|
||||
|
||||
✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
यहां बताया गया है कि पेज के मुख्य भाग के रूप में यह आमतौर पर घोषित किया जाता है:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
ऊपर हम `id`,`width` और `height` सेट कर रहे हैं
|
||||
|
||||
- `id`: इसे सेट करें ताकि आप एक संदर्भ प्राप्त कर सकें जब आपको इसके साथ परस्पर करने की आवश्यकता हो.
|
||||
- `width`: यह तत्व की चौड़ाई है.
|
||||
- `height`: यह तत्व की ऊंचाई है.
|
||||
|
||||
## सरल ज्यामिति खींचना
|
||||
|
||||
कैनवस चीजों को आकर्षित करने के लिए एक कार्टेशियन समन्वय प्रणाली का उपयोग कर रहा है.
|
||||
इस प्रकार यह x- अक्ष और y- अक्ष का उपयोग करता है जहां कुछ स्थित है व्यक्त करने के लिए.स्थान `0,0` शीर्ष बाईं स्थिति है और नीचे दायाँ हिस्सा है जिसे आपने कैनवास का WIDTH और HEIGHT कहा है.
|
||||
|
||||
|
||||
|
||||
> [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि
|
||||
|
||||
कैनवास तत्व पर आकर्षित करने के लिए आपको निम्नलिखित चरणों से गुजरना होगा:
|
||||
|
||||
1. **एक संदर्भ प्राप्त करें** कैनवास तत्व के लिए.
|
||||
2. **एक संदर्भ प्राप्त करें** संदर्भ तत्व पर जो कैनवास तत्व पर बैठता है.
|
||||
3. **एक ड्राइंग ऑपरेशन** संदर्भ तत्व का उपयोग करके.
|
||||
|
||||
उपरोक्त चरणों के लिए कोड आमतौर पर ऐसा दिखता है:
|
||||
|
||||
```javascript
|
||||
// draws a red rectangle
|
||||
//1. get the canvas reference
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. set the context to 2D to draw basic shapes
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. fill it with the color red
|
||||
ctx.fillStyle = "red";
|
||||
|
||||
//4. and draw a rectangle with these parameters, setting location and size
|
||||
ctx.fillRect(0, 0, 200, 200); // x,y,width, height
|
||||
```
|
||||
|
||||
✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं.
|
||||
|
||||
आप कैनवस एपीआई के साथ सभी प्रकार की चीजें आकर्षित कर सकते हैं जैसे की :
|
||||
|
||||
- **Geometrical shapes**, हमने पहले ही दिखाया है कि एक आयत कैसे खींचना है, लेकिन बहुत कुछ है जो आप खींच सकते हैं.
|
||||
- **Text**, आप अपनी इच्छानुसार किसी भी फ़ॉन्ट और रंग के साथ एक पाठ खींच सकते हैं.
|
||||
- **Images**, आप उदाहरण के लिए .jpg या .png जैसी छवि परिसंपत्ति के आधार पर चित्र बना सकते हैं.
|
||||
|
||||
✅ कोशिश करो! आप जानते हैं कि एक आयत कैसे बनाई जाती है, क्या आप किसी पृष्ठ पर एक वृत्त खींच सकते हैं? कोडपेन पर कुछ दिलचस्प कैनवस ड्रॉइंग पर एक नज़र डालें. यहाँ एक [विशेष रूप से प्रभावशाली उदाहरण है](https://codepen.io/dissimulate/pen/KrAwx).
|
||||
|
||||
## छवि एसेट लोड और ड्रा करे
|
||||
|
||||
आप एक 'Image' ऑब्जेक्ट बनाकर एक छवि एसेट लोड करते हैं और इसकी `src` गुण सेट करते हैं.तब आप यह जानने के लिए `load` घटना सुनते हैं कि यह कब उपयोग होने के लिए तैयार है. कोड इस तरह दिखता है:
|
||||
|
||||
### लोड एसेट
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = "path/to/my/image.png";
|
||||
img.onload = () => {
|
||||
// image loaded and ready to be used
|
||||
};
|
||||
```
|
||||
|
||||
### लोड एसेट पैटर्न
|
||||
|
||||
इसे एक निर्माण में ऊपर से लपेटने की सिफारिश की गई है, इसलिए इसका उपयोग करना आसान है और आप इसे पूरी तरह से लोड होने पर केवल हेरफेर करने का प्रयास करते हैं:
|
||||
|
||||
```javascript
|
||||
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);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// use like so
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset("hero.png");
|
||||
const monsterImg = await loadAsset("monster.png");
|
||||
}
|
||||
```
|
||||
|
||||
गेम एसेट्स को स्क्रीन पर खींचने के लिए, आपका कोड इस तरह दिखेगा:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset("hero.png");
|
||||
const monsterImg = await loadAsset("monster.png");
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
|
||||
ctx.drawImage(monsterImg, 0, 0);
|
||||
}
|
||||
```
|
||||
|
||||
## अब अपने खेल का निर्माण शुरू करने का समय आ गया है
|
||||
|
||||
### क्या बनना है
|
||||
|
||||
आप कैनवास तत्व के साथ एक वेब पेज बनाएंगे। यह एक काली स्क्रीन `1024 * 768` को प्रस्तुत करना चाहिए। हमने आपको दो चित्र प्रदान किए हैं:
|
||||
|
||||
- हीरो शिप
|
||||
|
||||
|
||||
|
||||
- 5\*5 मॉन्स्टर
|
||||
|
||||
|
||||
|
||||
### विकास शुरू करने के लिए अनुशंसित कदम
|
||||
|
||||
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं. इसमें निम्नलिखित शामिल होना चाहिए:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
विजुअल स्टूडियो कोड में इस फ़ोल्डर की कॉपी खोलें। आपके पास स्थानीय विकास पर्यावरण सेटअप होना चाहिए, अधिमानतः एनपीएम और नोड के साथ विजुअल स्टूडियो कोड स्थापित किया जाना चाहिए. यदि आपके पास अपने कंप्यूटर पर `npm` सेट नहीं है, तो [यहाँ है कि कैसे करें](https://www.npmjs.com/get-npm).
|
||||
|
||||
`Your_work` फ़ोल्डर में नेविगेट करके अपनी परियोजना शुरू करें:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र और उस पते पर इनपुट खोलें। यह अभी एक रिक्त पृष्ठ है, लेकिन यह बदल जाएगा
|
||||
|
||||
> नोट: अपनी स्क्रीन पर परिवर्तन देखने के लिए, अपने ब्राउज़र को ताज़ा करें.
|
||||
|
||||
### कोड जोड़ें
|
||||
|
||||
नीचे हल करने के लिए `your-work/app.js` के लिए आवश्यक कोड जोड़ें
|
||||
|
||||
1. काली पृष्ठभूमि के साथ एक कैनवास **ड्रा** करे
|
||||
> टिप: `/app.js` में उपयुक्त TODO के तहत दो लाइनें जोड़ें,`ctx` तत्व को काला बनाने के लिए और शीर्ष/बाएँ निर्देशांक 0,0 पर हो और ऊँचाई और चौड़ाई कैनवास के बराबर हो।
|
||||
2. **भार** बनावट
|
||||
> टिप: `await loadTexture` का उपयोग करके खिलाड़ी और दुश्मन की छवियों को जोड़ें और छवि पथ में पास करें। आप उन्हें अभी तक स्क्रीन पर नहीं देखेंगे!
|
||||
3. नीचे आधे में स्क्रीन के केंद्र में नायक **ड्रा** करे
|
||||
> टिप: स्क्रीन पर HeroImg ड्रा करने के लिए `drawImage` API का उपयोग करें, `canvas.width / 2 - 45` और `canvas.height - canvas.height / 4)` की सेटिंग;
|
||||
4. 5\*5 मॉन्स्टर **ड्रा** करे
|
||||
|
||||
> टिप: अब आप स्क्रीन पर दुश्मनों को आकर्षित करने के लिए कोड की टिप्पणी हटा सकते हैं। अगला, `createEnemy` फ़ंक्शन पर जाएं और इसे बनाएं.
|
||||
|
||||
सबसे पहले, कुछ स्थिरांक स्थापित करें:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
फिर, स्क्रीन पर राक्षसों की सरणी खींचने के लिए एक लूप बनाएं:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## परिणाम
|
||||
|
||||
समाप्त परिणाम ऐसा दिखना चाहिए:
|
||||
|
||||
|
||||
|
||||
## घोल
|
||||
|
||||
कृपया पहले इसे स्वयं हल करने का प्रयास करें, लेकिन यदि आप अटक जाते हैं, तो एक [समाधान] (../solution/app.js) पर एक नज़र डालें
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें.
|
||||
|
||||
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[कैनवस एपीआई के साथ खेले](assignment.hi.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# Costruire un Gioco Spaziale Parte 2: Disegnare Eroi e Mostri sull'elemento Canvas
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=it)
|
||||
|
||||
## Canvas
|
||||
|
||||
Canvas è un elemento HTML che per impostazione predefinita non ha contenuto; è una lavagna vuota. Si può riempirla disegnandoci sopra.
|
||||
|
||||
✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) su MDN.
|
||||
|
||||
Ecco come viene tipicamente dichiarato, come parte dell'elemento body della pagina:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
Sopra si è impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (`height`).
|
||||
|
||||
- `id`: va impostato in modo da poter ottenere un riferimento quando si deve interagire con l'elemento.
|
||||
- `width`: questa è la larghezza dell'elemento.
|
||||
- `height`: questa è l'altezza dell'elemento.
|
||||
|
||||
## Disegnare una geometria semplice
|
||||
|
||||
Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas
|
||||
|
||||
|
||||
> Immagine da [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi:
|
||||
|
||||
1. **Ottenere un riferimento** all'elemento Canvas.
|
||||
1. **Ottenere un riferimento** all'elemento Context che si trova sull'elemento canvas.
|
||||
1. **Eseguire un'operazione di disegno** utilizzando l'elemento context.
|
||||
|
||||
Il codice per i passaggi precedenti di solito ha questo aspetto:
|
||||
|
||||
```javascript
|
||||
// disegna un rettangolo rosso
|
||||
//1. ottiene il riferimento per il canvas
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. ottiene l'oggetto context per disegnare forme basiche in 2D
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. lo riempie con il colore rosso
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. e disegna un rettangolo con questi parametri, impostando posizione e dimensione
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,larghezza, altezza
|
||||
```
|
||||
|
||||
✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Si può disegnare ogni sorta di cose con l'API Canvas come:
|
||||
|
||||
- **Forme geometriche**, è già stato mostrato come disegnare un rettangolo, ma c'è molto di più che si può disegnare.
|
||||
- **Testo**, si può disegnare un testo con qualsiasi carattere e colore si desideri.
|
||||
- **Immagini**, si puòdisegnare un'immagine basandosi su una risorsa immagine come .jpg o .png, ad esempio.
|
||||
|
||||
Si faccia una prova! Si sa come disegnare un rettangolo, si può disegnare un cerchio su una pagina? Si dia un'occhiata ad alcuni interessanti disegni su canvas su CodePen. Ecco un [esempio particolarmente degno di nota](https://codepen.io/dissimulate/pen/KrAwx).
|
||||
|
||||
## Caricare e disegnare una risorsa immagine
|
||||
|
||||
Si carica una risorsa immagine creando un oggetto `Image` e impostando la sua proprietà `src` . Quindi ci si mette in ascolto per l'evento di caricamento (`load`) per sapere quando è pronto per essere utilizzato. Il codice si presenta cosí:
|
||||
|
||||
### Caricamento risorsa
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// immagine caricata e pronta all'uso
|
||||
}
|
||||
```
|
||||
|
||||
### Modello di Caricamento Risorsa
|
||||
|
||||
Si consiglia di racchiudere quanto sopra in un costrutto come questo, così è più facile da usare e si tenta di manipolarlo solo quando è completamente caricato:
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// immagine caricata e pronta all'uso
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// usarlo in questo modo
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Per disegnare risorse di gioco su uno schermo, il codice sarà simile a questo:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## Ora è il momento di iniziare a costruire il gioco
|
||||
|
||||
### Cosa costruire
|
||||
|
||||
Si costruirà una pagina web con un elemento Canvas. Si dovrebbe rendere uno schermo nero `1024 * 768`. Sono state fornite due immagini:
|
||||
|
||||
- Astronave dell'eroe
|
||||
|
||||
|
||||
|
||||
- Mostro 5*5
|
||||
|
||||
|
||||
|
||||
### Passaggi consigliati per iniziare lo sviluppo
|
||||
|
||||
Individuare i file che già sono stati creati nella sottocartella `your-work` della cartella di lavoro Dovrebbe contenere le seguenti informazioni:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Aprire una copia di questa cartella in Visual Studio Code. È necessario disporre di una configurazione di ambiente di sviluppo locale, preferibilmente con Visual Studio Code con NPM e Node installati. Se non si è impostato `npm` sul proprio computer, [ecco come farlo](https://www.npmjs.com/get-npm).
|
||||
|
||||
Inizializzare il proprio progetto accedendo alla cartella `your_work` :
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Al momento è una pagina vuota, ma cambierà
|
||||
|
||||
> Nota: per vedere le modifiche sullo schermo, aggiornare il contenuto del browser.
|
||||
|
||||
### Aggiungere codice
|
||||
|
||||
Aggiungi il codice necessario al file `your-work/app.js` per risolvere quanto segue
|
||||
|
||||
1. **Disegnare** un oggetto canvas con sfondo nero
|
||||
> suggerimento: aggiungere due righe sotto il TODO appropriato in `/app.js`, impostando l'elemento `ctx` in modo che sia nero e le coordinate alto/sinistra a 0,0 e l'altezza e la larghezza uguali a quelle del canvas.
|
||||
2. **Caricare** le strutture di gioco
|
||||
> suggerimento: aggiungere le immagini del giocatore e del nemico usando `await loadTexture`, passando il percorso dell'immagine. Non saranno ancora visibili sullo schermo!
|
||||
3. **Disegnare** l'eroe al centro dello schermo nella metà inferiore
|
||||
> suggerimento: usare l'API `drawImage` per disegnare `heroImg` sullo schermo, impostando `canvas.width / 2 - 45` e `canvas.height - canvas.height / 4` come valori di coordinate x, y
|
||||
4. **Disegnare** mostri 5*5
|
||||
> suggerimento: ora si può rimuovere il commento dal codice per disegnare i nemici sullo schermo. Successivamente, passare alla funzione `createEnemies` e crearla.
|
||||
|
||||
Per prima cosa, impostare alcune costanti:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
quindi, creare un ciclo per disegnare l'array di mostri sullo schermo:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Risultato
|
||||
|
||||
Il risultato finale dovrebbe essere così:
|
||||
|
||||
|
||||
|
||||
## Soluzione
|
||||
|
||||
Per favore provare a risolverlo da soli, ma se si rimane bloccati, dare un'occhiata alla [soluzione](../solution/app.js)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata all['API WebGL API](https://developer.mozilla.org/it/docs/Web/API/WebGL_API) e provare a disegnare un oggetto 3D.
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=it)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Compito
|
||||
|
||||
[Giocare con l'API Canvas](assignment.it.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# スペースゲーム構築プロジェクト その 2: ヒーローとモンスターをキャンバスに描く
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ja)
|
||||
|
||||
## Canvas
|
||||
|
||||
Canvas は HTML 要素で、デフォルトでは何のコンテンツもありません。何もない白紙の状態です。その上に描画することで、Canvas に追加する必要があります。
|
||||
|
||||
✅ MDN の [Canvas API についての詳細](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API)はこちらをご覧ください。
|
||||
|
||||
ページの本文の一部として、一般的にどのように宣言されているかをご紹介します。
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
上では `id`, `width`, `height` を設定しています。
|
||||
|
||||
- `id`: 設定することで、これと対話する必要があるときに参照を取得できるようになります
|
||||
- `width`: これは要素の幅です
|
||||
- `height`: これは要素の高さです
|
||||
|
||||
## 簡単な幾何学図形の描画
|
||||
|
||||
キャンバスは、直交座標系を使って物を描いています。したがって、何かがどこにあるかを表現するために x 軸と y 軸を使用しています。`0,0` の位置が左上の位置で、右下の位置がキャンバスの幅と高さと言ったところです。
|
||||
|
||||
|
||||
> 画像は [MDN](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes) より
|
||||
|
||||
キャンバス要素に描画するには、以下の手順を踏む必要があります。
|
||||
|
||||
1. Canvas 要素への**参照を取得します**
|
||||
1. canvas 要素の上にある Context 要素の**参照を取得します**
|
||||
1. context 要素を使用して**描画操作を行います**
|
||||
|
||||
上記の手順のコードは、通常次のようになります。
|
||||
|
||||
```javascript
|
||||
// 赤い四角を描きます。
|
||||
//1. キャンバスの参照を取得します
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. コンテキストを 2D に設定して基本的な図形を描画します。
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. 赤で塗りつぶします。
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. そして、これらのパラメータで矩形を描画し、位置とサイズを設定します。
|
||||
ctx.fillRect(0,0, 200, 200) // x, y, width, height
|
||||
```
|
||||
|
||||
✅ Canvas API は主に 2D の図形に焦点を当てていますが、Web サイトに 3D の要素を描画することもできます。そのためには、[WebGL API](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API) を使用するとよいでしょう。
|
||||
|
||||
Canvas API を使っていろいろなものを描くことができます。
|
||||
|
||||
- **幾何学的な形状**、我々はすでに長方形を描画する方法を示しましたが、あなたが描くことができるはるかに多くのものがあります
|
||||
- **テキスト**は、任意のフォントと色でテキストを描くことができます
|
||||
- **画像**では、例えば .jpg や .png のような画像アセットに基づいて画像を描くことができます
|
||||
|
||||
✅ やってみましょう! 長方形の描き方は知っていると思いますが、ページに円を描くことはできますか? CodePen に掲載されている面白い Canvas のドローイングを見てみましょう。ここに[特に印象的な例](https://codepen.io/dissimulate/pen/KrAwx)があります。
|
||||
|
||||
## 画像アセットの読み込みと描画
|
||||
|
||||
画像アセットをロードするには、`Image` オブジェクトを作成して `src` プロパティを設定します。そして、`load` イベントを待ち受け、それがいつ使用可能になるかを知ることができます。コードは次のようになります。
|
||||
|
||||
### アセットの読み込み
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// イメージが読み込まれて使用可能な状態になっています
|
||||
}
|
||||
```
|
||||
|
||||
### アセットの読み込みパターン
|
||||
|
||||
上記のようなコンストラクトで包んだ方が使いやすいですし、フルロードした時だけ操作しようとするのでおすすめです。
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// イメージが読み込まれて使用可能な状態になっています
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 使いまわします
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
ゲームアセットを画面に描画するには、以下のようなコードになります。
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2, canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0, 0);
|
||||
}
|
||||
```
|
||||
|
||||
## さあ、あなたのゲームを作り始める時が来ました。
|
||||
|
||||
### 何を構築するか
|
||||
|
||||
Canvas 要素を使って Web ページを作成します。これは黒い画面 `1024 * 768` をレンダリングする必要があります。画像は2枚用意しました。
|
||||
|
||||
- Hero の宇宙船
|
||||
|
||||
|
||||
|
||||
- 5*5 monster
|
||||
|
||||
|
||||
|
||||
### 開発を始めるための推奨ステップ
|
||||
|
||||
あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
このフォルダのコピーを Visual Studio Code で開きます。ローカルの開発環境が設定されている必要があり、できれば Visual Studio Code に NPM と Node がインストールされている必要があります。もしあなたのコンピュータに `npm` がセットアップされていない場合は、[ここにその方法があります](https://www.npmjs.com/get-npm)。
|
||||
|
||||
`your_work` フォルダに移動してプロジェクトを開始します。
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
以上で、`http://localhost:5000` というアドレスに HTTP サーバが起動します。ブラウザを開いて、そのアドレスを入力してください。今は何も表示されていませんが、そのうち変わるでしょう。
|
||||
|
||||
> 注: 画面上の変更を確認するには、ブラウザを更新してください。
|
||||
|
||||
### コードの追加
|
||||
|
||||
以下の問題を解決するために必要なコードを `your-work/app.js` に追加します。
|
||||
|
||||
1. 黒い背景のキャンバスを**描画します**
|
||||
> tip: `/app.js` の適切な TODO の下に 2 行を追加し、`ctx` 要素を黒にして上下の座標を 0,0 にし、高さと幅をキャンバスと同じにします。
|
||||
2. テクスチャを**読み込みます**
|
||||
> tip: プレイヤーと敵の画像を追加するには `await loadTexture` を使用し、画像パスを渡してください。まだ画面には表示されていません!
|
||||
3. 下半分の画面中央にヒーローを**描画します**
|
||||
> tip: heroImg を画面に描画するには `drawImage` API を使用し、`canvas.width / 2 - 45` と `canvas.height - canvas.height / 4)` を設定します。
|
||||
4. 5*5 のモンスターを**描画します**
|
||||
> tip: これで、画面上に敵を描画するコードのコメントを解除することができるようになりました。次に、`createEnemies` 関数に移動して、それを構築する。
|
||||
|
||||
まず、いくつかの定数を設定します。
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
そして、モンスターの配列を画面上に描画するループを作成します。
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 結果
|
||||
|
||||
仕上がりはこんな感じになるはずです。
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
2D を中心とした Canvas API での描画について学んできましたが、[WebGL API](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API) を参考に、3D オブジェクトを描画してみましょう。
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ja)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
Canvas API については、[こちらを読んでいただく](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API)ことで詳しく知ることができます。
|
||||
|
||||
## 課題
|
||||
|
||||
[Canvas API で遊ぶ](assignment.ja.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# Space 게임 제작하기 파트 2: Canvas에 영웅과 몬스터 그리기
|
||||
|
||||
## 강의 전 퀴즈
|
||||
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ko)
|
||||
|
||||
## Canvas
|
||||
|
||||
canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니다. 그리는 작업으로 추가해야 합니다.
|
||||
|
||||
✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/docs/Web/API/Canvas_API) 읽어보세요.
|
||||
|
||||
보통 페이지 본문의 일부로 선언되는 방법은 다음과 같습니다:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
위에서 우리는 `id`, `width`와 `height`를 설정합니다.
|
||||
|
||||
- `id`: 상호 작용을 해야 할 순간에 참조할 수 있도록 지정하세요.
|
||||
- `width`: 요소의 너비입니다.
|
||||
- `height`: 요소의 높이입니다.
|
||||
|
||||
## 간단한 geometry 그리기
|
||||
|
||||
캔버스는 데카르트 좌표계로 사물을 그립니다. 따라서 x-축과 y-축을 이용하여 무언가의 위치를 나타냅니다. 위치 `0,0`은 죄측 상단이며 우측 하단은 캔버스의 너비와 높이라고 말한 위치입니다.
|
||||
|
||||
|
||||
> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
캔버스 요소에 그리려면 다음 단계를 거쳐야 합니다:
|
||||
|
||||
1. 캔버스 요소에 **참조를 가져옵니다**.
|
||||
1. 캔버스 요소에 있는 Context 요소로 **참조를 가져옵니다**.
|
||||
1. 컨텍스트 요소를 사용하여 **그리는 작업을 수행**합니다.
|
||||
|
||||
위 단계의 코드는 일반적으로 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
// draws a red rectangle
|
||||
//1. get the canvas reference
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. set the context to 2D to draw basic shapes
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. fill it with the color red
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. and draw a rectangle with these parameters, setting location and size
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
||||
```
|
||||
|
||||
✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다.
|
||||
|
||||
Canvas API를 사용하면 다음과 같은 모든 종류를 그릴 수 있습니다:
|
||||
|
||||
- **기하학 모양**, 직사각형을 그리는 방법은 이미 보여 주었지만, 더 많이 그릴 수 있습니다.
|
||||
- **텍스트**, 원하는 폰트와 색상으로 텍스트를 그릴 수 있습니다.
|
||||
- **이미지**, 예를 들면 .jpg 혹은 .png와 같은 이미지 어셋을 바탕으로 이미지를 그릴 수 있습니다.
|
||||
|
||||
✅ 시도 해보세요! 직사각형을 어떻게 그리는지 알고 있으면, 패이지에 원을 그릴 수 있나요? CodePen에서 흥미로운 캔버스 그림을 보세요. 여기 [particularly impressive example](https://codepen.io/dissimulate/pen/KrAwx)이 있습니다.
|
||||
|
||||
## 이미지 어셋 불러오고 그리기
|
||||
|
||||
`Image` 객체를 만들고 `src` 속성을 설정하여 이미지 어셋을 불러옵니다. 그런 다음 `load` 이벤트를 수신하여 사용할 준비가 되었는지 알 수 있습니다. 코드는 다음과 같습니다:
|
||||
|
||||
### 어셋 불러오기
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// image loaded and ready to be used
|
||||
}
|
||||
```
|
||||
|
||||
### Load asset 패턴
|
||||
|
||||
위의 내용을 이 구조로 래핑하는 것이 좋습니다, 그래서 쓰기 더 쉽고 완전히 불러올 수 있을 때만 조작하려고 시도합니다:
|
||||
|
||||
```javascript
|
||||
async 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);
|
||||
})
|
||||
}
|
||||
|
||||
// use like so
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
게임 어셋을 화면에 그리려면, 코드는 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## 이제 게임 제작을 시작할 시간입니다
|
||||
|
||||
### 무엇을 만드나요
|
||||
|
||||
Canvas 요소가 있는 웹 페이지를 만듭니다. 검은 화면 `1024 * 768`을 렌더링해야 합니다. 두 가지 이미지를 제공받았습니다:
|
||||
|
||||
- Hero ship
|
||||
|
||||
|
||||
|
||||
- 5*5 monster
|
||||
|
||||
|
||||
|
||||
### 개발 시작하기 위한 권장 단계
|
||||
|
||||
`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Visual Studio Code에서 폴더의 복사본을 엽니다. 로컬 개발 환경을 설정해야 합니다, NPM과 Node가 설치되어있는 Visual Studio Code를 사용하는 것이 좋습니다. 컴퓨터에 `npm`이 설정되어 있지 않은 경우에, [방법은 다음과 같습니다](https://www.npmjs.com/get-npm).
|
||||
|
||||
`your_work` 폴더로 이동하여 프로젝트를 시작합니다:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하세요. 지금은 비어있는 페이지지만, 곧 바뀔 것 입니다
|
||||
|
||||
> Note: 화면에서 변경점을 보고싶다면, 브라우저를 새로 고치세요.
|
||||
|
||||
### 코드 추가하기
|
||||
|
||||
필요한 코드를 `your-work/app.js`에 추가하여 아래 문제를 해결합니다
|
||||
|
||||
1. 검은 바탕으로 canvas **그리기**
|
||||
> tip: `/app.js`의 TODO 아래에 적절히 두 줄을 추가하며, `ctx` 요소를 검은 색으로 설정하고 상단/좌측 좌표를 0,0으로 설정하고 높이와 너비를 캔버스와 동일하게 설정합니다.
|
||||
2. 텍스쳐 **불러오기**
|
||||
> tip: `await loadTexture`를 사용하여 플레이어와 적 이미지를 추가하고 이미지 경로를 전달합니다. 아직 화면에서 볼 수 없습니다!
|
||||
3. 화면 중앙 하단의 중간에 영웅 **그리기**
|
||||
> tip: `drawImage` API 를 사용하여 화면에 heroImg를 그립니다, `canvas.width / 2 - 45`와 `canvas.height - canvas.height / 4)`로 설정합니다.
|
||||
4. 5*5 몬스터를 **그리기**
|
||||
> tip: 이제 주석을 풀고 화면에 적을 그립니다. 그런 다음, `createEnemies` 함수로 가서 작성합니다.
|
||||
|
||||
먼저, 약간의 constants를 설정합니다:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
그런 다음, 화면에 몬스터 배열을 그리는 반복문을 만듭니다:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 결과
|
||||
|
||||
완성된 결과는 아래와 같이 보이게 됩니다:
|
||||
|
||||
|
||||
|
||||
## 솔루션
|
||||
|
||||
먼저 직접 해결해보고 문제가 발생한다면, [solution](../solution/app.js)을 보세요
|
||||
|
||||
---
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요.
|
||||
|
||||
## 강의 후 퀴즈
|
||||
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ko)
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
[reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요.
|
||||
|
||||
## 과제
|
||||
|
||||
[Play with the Canvas API](../assignment.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# Bina Permainan Angkasa Bahagian 2: Menarik Wira dan Monster ke Kanvas
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
|
||||
|
||||
## Kanvas
|
||||
|
||||
Kanvas adalah elemen HTML yang secara lalai tidak mempunyai isi; itu batu tulis kosong. Anda perlu menambahkannya dengan melukisnya.
|
||||
|
||||
✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) di MDN.
|
||||
|
||||
Inilah cara ia dinyatakan secara umum, sebagai bahagian badan halaman:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
Di atas kita menetapkan `id`, `lebar` dan `tinggi`.
|
||||
|
||||
- `id`: tetapkan ini supaya anda dapat memperoleh rujukan apabila anda perlu berinteraksi dengannya.
|
||||
- `lebar`: ini adalah lebar elemen.
|
||||
- `tinggi`: ini adalah ketinggian elemen.
|
||||
|
||||
## Melukis geometri ringkas
|
||||
|
||||
Canvas menggunakan sistem koordinat kartesian untuk menarik sesuatu. Oleh itu ia menggunakan paksi-x dan paksi-y untuk menyatakan di mana sesuatu berada. Lokasi `0,0` adalah kedudukan kiri atas dan kanan bawah adalah yang anda katakan sebagai Luas dan TINGGI kanvas.
|
||||
|
||||
|
||||
> Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Untuk menggunakan elemen kanvas, anda perlu melalui langkah-langkah berikut:
|
||||
|
||||
1. **Dapatkan rujukan** ke elemen Kanvas.
|
||||
1. **Dapatkan rujukan** pada elemen Konteks yang terletak di elemen kanvas.
|
||||
1. **Lakukan operasi menggambar** menggunakan elemen konteks.
|
||||
|
||||
Kod untuk langkah di atas biasanya kelihatan seperti:
|
||||
|
||||
```javascript
|
||||
// melukis sebuah segi empat tepat berwarna merah
|
||||
// 1. dapatkan rujukan kanvas
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. tetapkan konteks ke 2D untuk melukis bentuk asas
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. isi dengan warna merah
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. dan lukis sebuah segi empat tepat dengan parameter ini, tetapkan lokasi dan ukuran
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,luas,tinggi
|
||||
```
|
||||
|
||||
✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Anda boleh menarik pelbagai perkara dengan Canvas API seperti:
|
||||
|
||||
- **Bentuk geometri**, kami sudah menunjukkan cara melukis segi empat tepat, tetapi masih banyak lagi yang dapat anda lukis.
|
||||
- **Teks**, anda boleh menggambar teks dengan fon dan warna yang anda inginkan.
|
||||
- **Imej**, anda boleh melukis gambar berdasarkan aset gambar seperti .jpg atau .png misalnya.
|
||||
|
||||
✅ Cubalah! Anda tahu melukis segi empat, bolehkah anda melukis bulatan ke halaman? Lihatlah beberapa lukisan Kanvas yang menarik di CodePen. Berikut adalah [contoh yang sangat mengagumkan](https://codepen.io/dissimulate/pen/KrAwx).
|
||||
|
||||
## Muat dan lukiskan aset gambar
|
||||
|
||||
Anda memuat aset gambar dengan membuat objek `Imej` dan menetapkan sifat `src`nya. Kemudian anda mendengar acara `load` untuk mengetahui kapan ia siap digunakan. Kodnya seperti ini:
|
||||
|
||||
### Muatkan aset
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// gambar dimuat dan siap digunakan
|
||||
}
|
||||
```
|
||||
|
||||
### Muatkan corak aset
|
||||
|
||||
Sebaiknya bungkus perkara di atas dengan konstruk seperti itu, jadi lebih mudah digunakan dan anda hanya mencuba memanipulasinya apabila dimuat sepenuhnya:
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// gambar dimuat dan siap digunakan
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// use like so
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Untuk menarik aset permainan ke skrin, kod anda akan kelihatan seperti ini:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## Kini tiba masanya untuk mula membina permainan anda
|
||||
|
||||
### Apa yang hendak dibina
|
||||
|
||||
Anda akan membina laman web dengan elemen Canvas. Ia harus menjadikan skrin hitam `1024*768` . Kami telah memberi anda dua gambar:
|
||||
|
||||
- Kapal wira
|
||||
|
||||
|
||||
|
||||
- 5 * 5 raksasa
|
||||
|
||||
|
||||
|
||||
### Langkah-langkah yang disarankan untuk memulakan pembangunan
|
||||
|
||||
Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Buka salinan folder ini dalam Visual Studio Code. Anda perlu membuat persediaan persekitaran pembangunan tempatan, lebih baik dengan Visual Studio Code dengan NPM dan Node dipasang. Sekiranya anda tidak memasang `npm` di komputer anda, [berikut cara melakukannya](https://www.npmjs.com/get-npm).
|
||||
|
||||
Mulakan projek anda dengan menavigasi ke folder `your_work`:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Perkara di atas akan memulakan Pelayan HTTP pada alamat `http: // localhost: 5000`. Buka penyemak imbas dan masukkan alamat itu. Ini adalah halaman kosong sekarang, tetapi itu akan berubah
|
||||
|
||||
> Catatan: untuk melihat perubahan pada layar anda, muat semula penyemak imbas anda.
|
||||
|
||||
### Tambah Kod
|
||||
|
||||
Tambahkan kod yang diperlukan ke `your-work / app.js` untuk menyelesaikan perkara di bawah
|
||||
|
||||
1. ** Lukiskan kanvas dengan latar belakang hitam
|
||||
> tip: tambahkan dua baris di bawah TODO yang sesuai di `/ app.js`, tetapkan elemen` ctx` menjadi hitam dan koordinat atas / kiri berada pada 0,0 dan tinggi dan lebarnya sama dengan kanvas .
|
||||
2. ** Muatkan tekstur **
|
||||
> tip: tambahkan gambar pemain dan musuh dengan menggunakan `menunggu loadTexture` dan melewati jalan gambar. Anda belum akan melihatnya di skrin!
|
||||
3. ** Draw ** wira di tengah skrin di bahagian bawah
|
||||
> tip: gunakan API `drawImage` untuk menarik heroImg ke skrin, tetapkan` canvas.width / 2 - 45` dan `canvas.height - canvas.height / 4)`;
|
||||
4. ** Draw ** 5 * 5 monster
|
||||
> tip: Sekarang anda boleh melepaskan kod untuk menarik musuh di layar. Seterusnya, pergi ke fungsi `createEnemies` dan bangunkan.
|
||||
|
||||
Pertama, sediakan beberapa pemalar:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
kemudian, buat gelung untuk menarik susunan monster ke skrin:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Keputusan
|
||||
|
||||
Hasil akhirnya akan kelihatan seperti:
|
||||
|
||||
|
||||
|
||||
## Penyelesaian
|
||||
|
||||
Cuba selesaikannya sendiri terlebih dahulu tetapi jika anda buntu, lihatlah [solution](../solution/app.js)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), dan cuba lukis objek 3D.
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Main dengan Canvas API](assignment.ms.md)
|
||||
@@ -1,216 +0,0 @@
|
||||
# 建立太空遊戲 Part 2：在畫布上繪製英雄與怪物
|
||||
|
||||
## 課前測驗
|
||||
|
||||
[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=zh_tw)
|
||||
|
||||
## Canvas
|
||||
|
||||
Canvas 是 HTML 中的元素，預設上不帶有任何內容，就如一塊白板。你需要自己彩繪上去。
|
||||
|
||||
✅ 在 MDN 上閱讀[更多關於 Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API)。
|
||||
|
||||
這是它典型的宣告方式，位在頁面的 body 中：
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
上面我們設定了 `id`、`width` 和 `height`。
|
||||
|
||||
- `id`：讓你在處理物件時，能快速地取得參考位置。
|
||||
- `width`：物件的寬度。
|
||||
- `height`：物件的高度。
|
||||
|
||||
## 繪製簡單幾何圖樣
|
||||
|
||||
Canvas 使用了笛卡爾座標系繪製圖案。因此有 x 軸與 y 軸來表達物件的所在地點。座標點 `0,0` 位在畫布的左上方；而右下方則是我們定義畫布的寬度與高度。
|
||||
|
||||
|
||||
> 圖片出自於 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
要在 Canvas 物件上繪製圖案，你需要執行下列步驟：
|
||||
|
||||
1. **取得 Canvas 物件的參考位置**。
|
||||
1. **取得 Context 物件的參考位置**，定義在 Canvas 元素中。
|
||||
1. 使用 context 元素**進行繪製動作**。
|
||||
|
||||
以程式碼表達上述步驟會呈現成：
|
||||
|
||||
```javascript
|
||||
// 繪製紅色矩形
|
||||
//1. 取得 canvas 參考點
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. 設定 context 為 2D 以繪製基本圖形
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. 填入色彩紅色
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. 利用這些參數決定位置與大小，繪製矩形
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
||||
```
|
||||
|
||||
✅ Canvas API 主要是處理 2D 圖形，但你也可以在網頁中繪製 3D 圖形。要完成這個需求，你可以使用 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)。
|
||||
|
||||
你可以使用 Canvas API 繪製出這些物件：
|
||||
|
||||
- **幾何圖形**，我們已經展示繪製矩形的流程，還有許多種形狀可以使用。
|
||||
- **文字**，你可以繪製文字，決定你想要的字型及顏色。
|
||||
- **圖片**，你可以依據圖片檔繪製圖案，舉例來說像是 .jpg 或是 .png 檔。
|
||||
|
||||
✅ 試試看！你知道如何繪製矩形，你能在頁面中繪製圓形嗎？看看在 CodePen 上有趣的 Canvas 塗鴉。這邊有一樣[特別令人驚豔的例子](https://codepen.io/dissimulate/pen/KrAwx)。
|
||||
|
||||
## 讀取並繪製圖片檔
|
||||
|
||||
建立 `Image` 物件並設定其 `src` 屬性，你可以讀取圖片檔。接著監聽 `load` 事件，了解圖片何時已經可以被使用。程式碼如下：
|
||||
|
||||
### 讀取檔案
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// 圖片載入完成，準備使用
|
||||
}
|
||||
```
|
||||
|
||||
### 讀取檔案之模式
|
||||
|
||||
建議上可以將上述程式打包起來，建立成完整的結構，判斷圖片是否載入完成，也方便未來的使用：
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// 圖片載入完成，準備使用
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 實際用法
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
要在畫面上繪製遊戲物件，你的程式碼會如下所示：
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## 是時候來建立你的遊戲了
|
||||
|
||||
### 建立目標
|
||||
|
||||
你需要建立包含 Canvas 元素的網頁。它會是 `1024*768` 的黑色畫面。我們提供了兩張圖片：
|
||||
|
||||
- 英雄艦艇
|
||||
|
||||
|
||||
|
||||
- 5*5 隻怪物
|
||||
|
||||
|
||||
|
||||
### 開始開發的建議步驟
|
||||
|
||||
在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
在 Visual Studio Code 中開啟這個資料夾的副本。你需要建立本地端的開發環境，建議為 Visual Studio Code 與安裝好的 NPM 與 Node。如果你的電腦中還沒設定好 `npm`，[這是它的設定流程](https://www.npmjs.com/get-npm)。
|
||||
|
||||
前往 `your_work` 資料夾，開始你的專案：
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
這會啟動 HTTP 伺服器，網址為 `http://localhost:5000`。開啟瀏覽器並輸入該網址。目前會是空白的頁面，但不久後就會不一樣了。
|
||||
|
||||
> 筆記：想觀察畫面的改變，請重新整理你的頁面。
|
||||
|
||||
### 加入程式碼
|
||||
|
||||
在 `your-work/app.js` 中加入程式碼以解決下列目標：
|
||||
|
||||
1. 在 Canvas **繪製**黑色背景
|
||||
> 要點：在 `/app.js` 中，加入兩行程式在 TODO 下方：設定 `ctx` 元素為黑色，左上方座標點為 0,0 且大小與 Canvas 相等。
|
||||
2. **讀取**材質
|
||||
> 要點：使用 `await loadTexture` 導入圖片位置以新增玩家與敵軍圖片。你還沒辦法在畫面上看到它們！
|
||||
3. 在畫面的正下方**繪製**英雄
|
||||
> 要點：使用 `drawImage` API 來繪製 heroImg 到畫面上，設定位置為 `canvas.width / 2 - 45` 與 `canvas.height - canvas.height / 4)`。
|
||||
4. **繪製** 5*5 隻怪物
|
||||
> 要點：現在移除註解，在畫面上繪製敵人。接著編輯函式 `createEnemies`。
|
||||
|
||||
首先，設定幾個常數：
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
接著，利用迴圈在畫面上繪製矩陣型態的怪物：
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 結果
|
||||
|
||||
完成後的成果應該如下所示：
|
||||
|
||||
|
||||
|
||||
## 解答
|
||||
|
||||
試著自己先完成程式碼，但如果你遭遇到困難，請參考[解答](../solution/app.js)。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
你已經學會繪製 2D 圖形的 Canvas API。看看 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)，試著繪製 3D 物件。
|
||||
|
||||
## 課後測驗
|
||||
|
||||
[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
[閱讀更多資料](https://developer.mozilla.org/docs/Web/API/Canvas_API)，學習更多有關 Canvas API 的用法。
|
||||
|
||||
## 作業
|
||||
|
||||
[把玩 Canvas API](assignment.zh-tw.md)
|
||||
@@ -1,11 +0,0 @@
|
||||
Juega con la API Canvas
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Elija un elemento de la API de Canvas y cree algo interesante a su alrededor. ¿Puedes crear una pequeña galaxia de estrellas repetidas? ¿Puedes crear una textura interesante de líneas de colores? Puede buscar inspiración en CodePen (pero no copiar)
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | -------------------------------------------------- ------- | ----------------------------------- | --------------------- |
|
||||
| | El código se envía mostrando una textura o forma interesante | Se envía el código, pero no se ejecuta | No se envía el código |
|
||||
@@ -1,11 +0,0 @@
|
||||
# Jouer avec l'API Canvas
|
||||
|
||||
## Instructions
|
||||
|
||||
Choisissez un élément de l'API Canvas et créez quelque chose d'intéressant autour de lui. Pouvez-vous créer une petite galaxie d'étoiles répétées ? Pouvez-vous créer une texture intéressante de lignes colorées ? Vous pouvez vous inspirer de CodePen (mais ne copiez pas).
|
||||
|
||||
## Rubrique
|
||||
|
||||
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | Le code est soumis montrant une texture ou une forme intéressante | Le code est soumis, mais ne s'exécute pas | Le code n'est pas soumis |
|
||||
@@ -1,11 +0,0 @@
|
||||
# कैनवस एपीआई के साथ खेले
|
||||
|
||||
## अनुदेश
|
||||
|
||||
कैनवास एपीआई का एक तत्व चुनें और इसके चारों ओर कुछ दिलचस्प बनाएं. क्या आप बार-बार तारों की एक छोटी आकाशगंगा बना सकते हैं? क्या आप रंगीन लाइनों की एक दिलचस्प बनावट बना सकते हैं? आप प्रेरणा के लिए कोडपेन को देख सकते हैं (लेकिन कॉपी न करें)
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | ------------------------------------------------------------- | ----------------------------------------- | ----------------------------- |
|
||||
| | एक दिलचस्प बनावट या आकार दिखाते हुए कोड प्रस्तुत किया जाता है | कोड सबमिट किया गया है, लेकिन नहीं चलता है | कोड प्रस्तुत नहीं किया गया है |
|
||||
@@ -1,11 +0,0 @@
|
||||
# Giocare con l'API Canvas
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Sceglire un elemento dell'API Canvas e creare qualcosa di interessante attorno ad esso. Si è in grado di creare una piccola galassia di stelle ripetute? Si riesce a creare una interessante struttura di linee colorate? Si puoi guardare CodePen per l'ispirazione (ma non copiare)
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | Il codice viene inviato mostrando una struttura o una forma interessante | Il codice viene inviato, ma non viene eseguito | Il codice non è stato inviato |
|
||||
@@ -1,11 +0,0 @@
|
||||
# Canvas API で遊ぶ
|
||||
|
||||
## 説明書
|
||||
|
||||
Canvas API の要素を 1 つ選んで、その周りに何か面白いものを作りましょう。星が繰り返される小さな銀河を作ることができますか? 色のついた線で面白いテクスチャを作ることができますか? インスピレーションを得るために CodePen を見ることができます (ただし、コピーはしないでください)。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | 興味深い質感や形状を示すコードが提出されている | コードは送信されたが実行されない | コードが提出されていない |
|
||||
@@ -1,11 +0,0 @@
|
||||
# Canvas API 사용하기
|
||||
|
||||
## 설명
|
||||
|
||||
Canvas API에서 한 요소를 선택하고 그 주위에 재미있는 요소를 추가해 봅시다. 수많은 별이 모인 은하수를 만들수 있나요? 색깔이 있는 선으로 특별한 질감을 만들 수 있나요? 영감이 필요한다면 CodePen을 참고해보세요. (복사하지는 마세요.)
|
||||
|
||||
## 평가 기준
|
||||
|
||||
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||
--- | --- | --- | ---
|
||||
| 특별한 질감 또는 모양을 보여주는 코드를 제출한 경우 | 코드가 제출되었지만 실행되지 않는 경우 | 코드가 제출되지 않은 경우
|
||||
@@ -1,11 +0,0 @@
|
||||
# Main dengan Canvas API
|
||||
|
||||
## Arahan
|
||||
|
||||
Pilih satu elemen API Canvas dan buat sesuatu yang menarik di sekitarnya. Bolehkah anda membuat galaksi kecil bintang berulang? Bolehkah anda membuat tekstur garis berwarna yang menarik? Anda boleh melihat CodePen untuk mendapatkan inspirasi (tetapi jangan menyalin)
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | Kod dihantar menunjukkan tekstur atau bentuk yang menarik | Kod dihantar, tetapi tidak dijalankan | Kod tidak dihantar |
|
||||
@@ -1,11 +0,0 @@
|
||||
# Speel met de Canvas API
|
||||
|
||||
## Instructies
|
||||
|
||||
Kies een element van de Canvas API en maak er iets interessants omheen. Kunt u een kleine melkweg van herhaalde sterren creëren? Kunt u een interessante textuur van gekleurde lijnen maken? U kunt CodePen bekijken voor inspiratie (maar kopieer niet)
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | Code wordt ingediend met een interessante textuur of vorm| Code is ingediend, maar wordt niet uitgevoerd | Code is niet verzonden |
|
||||
@@ -1,11 +0,0 @@
|
||||
# 把玩 Canvas API
|
||||
|
||||
## 簡介
|
||||
|
||||
挑選一款 Canvas API 上的元素，為它建立一些有趣的設定。你能利用重複的星星建立銀河嗎？你能建立有特殊材質的線條嗎？你可以觀察 CodePen 上的範本激發想法，但請不要抄襲。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | -------------------------- | ---------------------------- | ------------ |
|
||||
| | 程式碼呈現有趣的材質與圖案 | 有提交程式碼，但無法正常執行 | 未提交程式碼 |
|
||||
Reference in New Issue
Block a user