|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "84053695dca714e16ed064366503ebd5",
|
|
|
"translation_date": "2025-10-23T20:33:06+00:00",
|
|
|
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
|
|
|
"language_code": "el"
|
|
|
}
|
|
|
-->
|
|
|
# Δημιουργία ενός Παιχνιδιού Διαστήματος Μέρος 2: Σχεδιάστε Ήρωα και Τέρατα στον Καμβά
|
|
|
|
|
|
Το Canvas API είναι ένα από τα πιο ισχυρά χαρακτηριστικά της ανάπτυξης ιστού για τη δημιουργία δυναμικών, διαδραστικών γραφικών απευθείας στον περιηγητή σας. Σε αυτό το μάθημα, θα μετατρέψουμε το κενό HTML `<canvas>` στοιχείο σε έναν κόσμο παιχνιδιού γεμάτο ήρωες και τέρατα. Σκεφτείτε τον καμβά ως τον ψηφιακό σας πίνακα ζωγραφικής όπου ο κώδικας γίνεται οπτικός.
|
|
|
|
|
|
Χτίζουμε πάνω σε όσα μάθατε στο προηγούμενο μάθημα και τώρα θα εμβαθύνουμε στις οπτικές πτυχές. Θα μάθετε πώς να φορτώνετε και να εμφανίζετε sprites παιχνιδιού, να τοποθετείτε στοιχεία με ακρίβεια και να δημιουργείτε τη βάση για το οπτικό σας παιχνίδι διαστήματος. Αυτό γεφυρώνει το χάσμα μεταξύ στατικών ιστοσελίδων και δυναμικών, διαδραστικών εμπειριών.
|
|
|
|
|
|
Μέχρι το τέλος αυτού του μαθήματος, θα έχετε μια ολοκληρωμένη σκηνή παιχνιδιού με το πλοίο του ήρωα σας τοποθετημένο σωστά και σχηματισμούς εχθρών έτοιμους για μάχη. Θα κατανοήσετε πώς τα σύγχρονα παιχνίδια αποδίδουν γραφικά στους περιηγητές και θα αποκτήσετε δεξιότητες για να δημιουργήσετε τις δικές σας διαδραστικές οπτικές εμπειρίες. Ας εξερευνήσουμε τα γραφικά του καμβά και ας ζωντανέψουμε το παιχνίδι διαστήματος σας!
|
|
|
|
|
|
## Ερωτηματολόγιο πριν το μάθημα
|
|
|
|
|
|
[Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app/web/quiz/31)
|
|
|
|
|
|
## Ο Καμβάς
|
|
|
|
|
|
Τι ακριβώς είναι αυτό το `<canvas>` στοιχείο; Είναι η λύση του HTML5 για τη δημιουργία δυναμικών γραφικών και κινούμενων εικόνων στους περιηγητές ιστού. Σε αντίθεση με τις κανονικές εικόνες ή βίντεο που είναι στατικά, ο καμβάς σας δίνει έλεγχο σε επίπεδο pixel για ό,τι εμφανίζεται στην οθόνη. Αυτό τον καθιστά ιδανικό για παιχνίδια, οπτικοποιήσεις δεδομένων και διαδραστική τέχνη. Σκεφτείτε τον ως μια προγραμματιζόμενη επιφάνεια ζωγραφικής όπου η JavaScript γίνεται το πινέλο σας.
|
|
|
|
|
|
Από προεπιλογή, ένα στοιχείο καμβά μοιάζει με ένα κενό, διαφανές ορθογώνιο στη σελίδα σας. Αλλά εκεί βρίσκεται η δυνατότητα! Η πραγματική του δύναμη εμφανίζεται όταν χρησιμοποιείτε JavaScript για να σχεδιάσετε σχήματα, να φορτώσετε εικόνες, να δημιουργήσετε κινούμενα σχέδια και να κάνετε τα πράγματα να ανταποκρίνονται στις αλληλεπιδράσεις του χρήστη. Είναι παρόμοιο με το πώς οι πρωτοπόροι των γραφικών υπολογιστών στα Bell Labs τη δεκαετία του 1960 έπρεπε να προγραμματίσουν κάθε pixel για να δημιουργήσουν τις πρώτες ψηφιακές κινούμενες εικόνες.
|
|
|
|
|
|
✅ Διαβάστε [περισσότερα για το Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) στο MDN.
|
|
|
|
|
|
Εδώ είναι πώς δηλώνεται συνήθως, ως μέρος του σώματος της σελίδας:
|
|
|
|
|
|
```html
|
|
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
|
|
```
|
|
|
|
|
|
**Τι κάνει αυτός ο κώδικας:**
|
|
|
- **Ορίζει** το `id` attribute ώστε να μπορείτε να αναφέρεστε σε αυτό το συγκεκριμένο στοιχείο καμβά στη JavaScript
|
|
|
- **Καθορίζει** το `width` σε pixels για να ελέγξετε το οριζόντιο μέγεθος του καμβά
|
|
|
- **Καθιερώνει** το `height` σε pixels για να καθορίσετε τις κάθετες διαστάσεις του καμβά
|
|
|
|
|
|
## Σχεδίαση Απλών Γεωμετρικών Σχημάτων
|
|
|
|
|
|
Τώρα που ξέρετε τι είναι το στοιχείο καμβά, ας εξερευνήσουμε πώς να σχεδιάσουμε πραγματικά πάνω του! Ο καμβάς χρησιμοποιεί ένα σύστημα συντεταγμένων που μπορεί να σας φανεί οικείο από το μάθημα μαθηματικών, αλλά υπάρχει μια σημαντική διαφορά που είναι συγκεκριμένη για τα γραφικά υπολογιστών.
|
|
|
|
|
|
Ο καμβάς χρησιμοποιεί καρτεσιανές συντεταγμένες με έναν άξονα x (οριζόντιο) και έναν άξονα y (κάθετο) για να τοποθετήσει ό,τι σχεδιάζετε. Αλλά εδώ είναι η βασική διαφορά: σε αντίθεση με το σύστημα συντεταγμένων από το μάθημα μαθηματικών, το σημείο προέλευσης `(0,0)` ξεκινά από την πάνω αριστερή γωνία, με τις τιμές x να αυξάνονται καθώς κινείστε δεξιά και τις τιμές y να αυξάνονται καθώς κινείστε προς τα κάτω. Αυτή η προσέγγιση χρονολογείται από τις πρώτες οθόνες υπολογιστών όπου οι δέσμες ηλεκτρονίων σάρωναν από πάνω προς τα κάτω, κάνοντας την πάνω αριστερή γωνία το φυσικό σημείο εκκίνησης.
|
|
|
|
|
|
|
|
|
> Εικόνα από [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
|
|
|
|
|
Για να σχεδιάσετε στο στοιχείο καμβά, θα ακολουθήσετε την ίδια τριβή διαδικασία που αποτελεί τη βάση όλων των γραφικών του καμβά. Μόλις το κάνετε αυτό μερικές φορές, γίνεται δεύτερη φύση:
|
|
|
|
|
|
1. **Πάρτε μια αναφορά** στο στοιχείο καμβά από το DOM (όπως οποιοδήποτε άλλο στοιχείο HTML)
|
|
|
2. **Πάρτε το 2D rendering context** – αυτό παρέχει όλες τις μεθόδους σχεδίασης
|
|
|
3. **Ξεκινήστε να σχεδιάζετε!** Χρησιμοποιήστε τις ενσωματωμένες μεθόδους του context για να δημιουργήσετε τα γραφικά σας
|
|
|
|
|
|
Εδώ είναι πώς φαίνεται αυτό στον κώδικα:
|
|
|
|
|
|
```javascript
|
|
|
// Step 1: Get the canvas element
|
|
|
const canvas = document.getElementById("myCanvas");
|
|
|
|
|
|
// Step 2: Get the 2D rendering context
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
|
// Step 3: Set fill color and draw a rectangle
|
|
|
ctx.fillStyle = 'red';
|
|
|
ctx.fillRect(0, 0, 200, 200); // x, y, width, height
|
|
|
```
|
|
|
|
|
|
**Ας το αναλύσουμε βήμα προς βήμα:**
|
|
|
- **Παίρνουμε** το στοιχείο καμβά χρησιμοποιώντας το ID του και το αποθηκεύουμε σε μια μεταβλητή
|
|
|
- **Παίρνουμε** το 2D rendering context – αυτό είναι το εργαλείο μας γεμάτο με μεθόδους σχεδίασης
|
|
|
- **Λέμε** στον καμβά ότι θέλουμε να γεμίσουμε πράγματα με κόκκινο χρησιμοποιώντας την ιδιότητα `fillStyle`
|
|
|
- **Σχεδιάζουμε** ένα ορθογώνιο που ξεκινά από την πάνω αριστερή γωνία (0,0) και είναι 200 pixels πλάτος και ύψος
|
|
|
|
|
|
✅ Το Canvas API επικεντρώνεται κυρίως σε 2D σχήματα, αλλά μπορείτε επίσης να σχεδιάσετε 3D στοιχεία σε μια ιστοσελίδα. Για αυτό, μπορείτε να χρησιμοποιήσετε το [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
|
|
|
|
|
Μπορείτε να σχεδιάσετε διάφορα πράγματα με το Canvas API όπως:
|
|
|
|
|
|
- **Γεωμετρικά σχήματα**, έχουμε ήδη δείξει πώς να σχεδιάσετε ένα ορθογώνιο, αλλά υπάρχουν πολλά περισσότερα που μπορείτε να σχεδιάσετε.
|
|
|
- **Κείμενο**, μπορείτε να σχεδιάσετε κείμενο με οποιαδήποτε γραμματοσειρά και χρώμα επιθυμείτε.
|
|
|
- **Εικόνες**, μπορείτε να σχεδιάσετε μια εικόνα βασισμένη σε ένα αρχείο εικόνας όπως .jpg ή .png για παράδειγμα.
|
|
|
|
|
|
✅ Δοκιμάστε το! Ξέρετε πώς να σχεδιάσετε ένα ορθογώνιο, μπορείτε να σχεδιάσετε έναν κύκλο στη σελίδα; Ρίξτε μια ματιά σε μερικά ενδιαφέροντα σχέδια καμβά στο CodePen. Εδώ είναι ένα [ιδιαίτερα εντυπωσιακό παράδειγμα](https://codepen.io/dissimulate/pen/KrAwx).
|
|
|
|
|
|
## Φόρτωση και Σχεδίαση Εικόνας
|
|
|
|
|
|
Η σχεδίαση βασικών σχημάτων είναι χρήσιμη για να ξεκινήσετε, αλλά τα περισσότερα παιχνίδια χρειάζονται πραγματικές εικόνες! Τα sprites, τα φόντα και οι υφές είναι αυτά που δίνουν στα παιχνίδια την οπτική τους γοητεία. Η φόρτωση και η εμφάνιση εικόνων στον καμβά λειτουργεί διαφορετικά από τη σχεδίαση γεωμετρικών σχημάτων, αλλά είναι απλή μόλις κατανοήσετε τη διαδικασία.
|
|
|
|
|
|
Πρέπει να δημιουργήσουμε ένα αντικείμενο `Image`, να φορτώσουμε το αρχείο εικόνας μας (αυτό γίνεται ασύγχρονα, δηλαδή "στο παρασκήνιο") και στη συνέχεια να το σχεδιάσουμε στον καμβά μόλις είναι έτοιμο. Αυτή η προσέγγιση εξασφαλίζει ότι οι εικόνες σας εμφανίζονται σωστά χωρίς να μπλοκάρουν την εφαρμογή σας κατά τη φόρτωση.
|
|
|
|
|
|
### Βασική Φόρτωση Εικόνας
|
|
|
|
|
|
```javascript
|
|
|
const img = new Image();
|
|
|
img.src = 'path/to/my/image.png';
|
|
|
img.onload = () => {
|
|
|
// Image loaded and ready to be used
|
|
|
console.log('Image loaded successfully!');
|
|
|
};
|
|
|
```
|
|
|
|
|
|
**Τι συμβαίνει σε αυτόν τον κώδικα:**
|
|
|
- **Δημιουργούμε** ένα ολοκαίνουργιο αντικείμενο Image για να κρατήσει το sprite ή την υφή μας
|
|
|
- **Λέμε** ποιο αρχείο εικόνας να φορτώσει ορίζοντας τη διαδρομή πηγής
|
|
|
- **Ακούμε** το γεγονός φόρτωσης για να ξέρουμε ακριβώς πότε η εικόνα είναι έτοιμη για χρήση
|
|
|
|
|
|
### Ένας Καλύτερος Τρόπος για Φόρτωση Εικόνων
|
|
|
|
|
|
Εδώ είναι ένας πιο ολοκληρωμένος τρόπος για να χειριστείτε τη φόρτωση εικόνων που χρησιμοποιούν συνήθως επαγγελματίες προγραμματιστές. Θα τυλίξουμε τη λογική φόρτωσης εικόνων σε μια συνάρτηση βασισμένη σε Promise – αυτή η προσέγγιση, που έγινε δημοφιλής όταν τα JavaScript Promises έγιναν στάνταρ στο ES6, κάνει τον κώδικα σας πιο οργανωμένο και χειρίζεται τα σφάλματα με χάρη:
|
|
|
|
|
|
```javascript
|
|
|
function loadAsset(path) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const img = new Image();
|
|
|
img.src = path;
|
|
|
img.onload = () => {
|
|
|
resolve(img);
|
|
|
};
|
|
|
img.onerror = () => {
|
|
|
reject(new Error(`Failed to load image: ${path}`));
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Modern usage with async/await
|
|
|
async function initializeGame() {
|
|
|
try {
|
|
|
const heroImg = await loadAsset('hero.png');
|
|
|
const monsterImg = await loadAsset('monster.png');
|
|
|
// Images are now ready to use
|
|
|
} catch (error) {
|
|
|
console.error('Failed to load game assets:', error);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Τι κάναμε εδώ:**
|
|
|
- **Τυλίξαμε** όλη αυτή τη λογική φόρτωσης εικόνων σε ένα Promise για καλύτερο χειρισμό
|
|
|
- **Προσθέσαμε** χειρισμό σφαλμάτων που μας ενημερώνει πραγματικά όταν κάτι πάει στραβά
|
|
|
- **Χρησιμοποιήσαμε** τη σύγχρονη σύνταξη async/await επειδή είναι πολύ πιο καθαρή για ανάγνωση
|
|
|
- **Περιλάβαμε** μπλοκ try/catch για να χειριστούμε με χάρη οποιαδήποτε προβλήματα φόρτωσης
|
|
|
|
|
|
Μόλις φορτωθούν οι εικόνες σας, η σχεδίασή τους στον καμβά είναι πραγματικά αρκετά απλή:
|
|
|
|
|
|
```javascript
|
|
|
async function renderGameScreen() {
|
|
|
try {
|
|
|
// Load game assets
|
|
|
const heroImg = await loadAsset('hero.png');
|
|
|
const monsterImg = await loadAsset('monster.png');
|
|
|
|
|
|
// Get canvas and context
|
|
|
const canvas = document.getElementById("myCanvas");
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
|
// Draw images to specific positions
|
|
|
ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
|
|
|
ctx.drawImage(monsterImg, 0, 0);
|
|
|
} catch (error) {
|
|
|
console.error('Failed to render game screen:', error);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Ας το αναλύσουμε βήμα προς βήμα:**
|
|
|
- **Φορτώνουμε** τόσο τις εικόνες του ήρωα όσο και των τεράτων στο παρασκήνιο χρησιμοποιώντας await
|
|
|
- **Παίρνουμε** το στοιχείο καμβά και το 2D rendering context που χρειαζόμαστε
|
|
|
- **Τοποθετούμε** την εικόνα του ήρωα ακριβώς στο κέντρο χρησιμοποιώντας λίγη γρήγορη μαθηματική υπολογιστική
|
|
|
- **Τοποθετούμε** την εικόνα του τέρατος στην πάνω αριστερή γωνία για να ξεκινήσουμε τον σχηματισμό των εχθρών
|
|
|
- **Αντιμετωπίζουμε** τυχόν σφάλματα που μπορεί να συμβούν κατά τη φόρτωση ή την απόδοση
|
|
|
|
|
|
## Ώρα να Ξεκινήσετε να Δημιουργείτε το Παιχνίδι σας
|
|
|
|
|
|
Τώρα θα συνδυάσουμε όλα για να δημιουργήσουμε τη βάση του οπτικού σας παιχνιδιού διαστήματος. Έχετε μια σταθερή κατανόηση των βασικών του καμβά και των τεχνικών φόρτωσης εικόνων, οπότε αυτή η πρακτική ενότητα θα σας καθοδηγήσει στη δημιουργία μιας ολοκληρωμένης οθόνης παιχνιδιού με σωστά τοποθετημένα sprites.
|
|
|
|
|
|
### Τι να Δημιουργήσετε
|
|
|
|
|
|
Θα δημιουργήσετε μια ιστοσελίδα με ένα στοιχείο καμβά. Θα πρέπει να εμφανίζει μια μαύρη οθόνη `1024*768`. Σας έχουμε παρέχει δύο εικόνες:
|
|
|
|
|
|
- Πλοίο του ήρωα
|
|
|
|
|
|
|
|
|
|
|
|
- 5*5 τέρατα
|
|
|
|
|
|
|
|
|
|
|
|
### Προτεινόμενα βήματα για να ξεκινήσετε την ανάπτυξη
|
|
|
|
|
|
Βρείτε τα αρχεία εκκίνησης που έχουν δημιουργηθεί για εσάς στον υποφάκελο `your-work`. Η δομή του έργου σας πρέπει να περιέχει:
|
|
|
|
|
|
```bash
|
|
|
your-work/
|
|
|
├── assets/
|
|
|
│ ├── enemyShip.png
|
|
|
│ └── player.png
|
|
|
├── index.html
|
|
|
├── app.js
|
|
|
└── package.json
|
|
|
```
|
|
|
|
|
|
**Τι έχετε στη διάθεσή σας:**
|
|
|
- **Τα sprites του παιχνιδιού** βρίσκονται στον φάκελο `assets/` ώστε όλα να παραμένουν οργανωμένα
|
|
|
- **Το κύριο αρχείο HTML σας** ρυθμίζει το στοιχείο καμβά και προετοιμάζει τα πάντα
|
|
|
- **Ένα αρχείο JavaScript** όπου θα γράψετε όλη τη μαγεία της απόδοσης του παιχνιδιού σας
|
|
|
- **Ένα package.json** που ρυθμίζει έναν διακομιστή ανάπτυξης ώστε να μπορείτε να κάνετε τοπικές δοκιμές
|
|
|
|
|
|
Ανοίξτε αυτόν τον φάκελο στο Visual Studio Code για να ξεκινήσετε την ανάπτυξη. Θα χρειαστείτε ένα τοπικό περιβάλλον ανάπτυξης με εγκατεστημένα το Visual Studio Code, το NPM και το Node.js. Αν δεν έχετε ρυθμίσει το `npm` στον υπολογιστή σας, [δείτε πώς να το εγκαταστήσετε](https://www.npmjs.com/get-npm).
|
|
|
|
|
|
Ξεκινήστε τον διακομιστή ανάπτυξης μεταβαίνοντας στον φάκελο `your-work`:
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**Αυτή η εντολή κάνει μερικά πολύ ωραία πράγματα:**
|
|
|
- **Ξεκινά** έναν τοπικό διακομιστή στο `http://localhost:5000` ώστε να μπορείτε να δοκιμάσετε το παιχνίδι σας
|
|
|
- **Εξυπηρετεί** όλα τα αρχεία σας σωστά ώστε ο περιηγητής σας να μπορεί να τα φορτώσει σωστά
|
|
|
- **Παρακολουθεί** τις αλλαγές στα αρχεία σας ώστε να μπορείτε να αναπτύσσετε ομαλά
|
|
|
- **Σας παρέχει** ένα επαγγελματικό περιβάλλον ανάπτυξης για να δοκιμάσετε τα πάντα
|
|
|
|
|
|
> 💡 **Σημείωση**: Ο περιηγητής σας θα εμφανίσει αρχικά μια κενή σελίδα – αυτό είναι αναμενόμενο! Καθώς προσθέτετε κώδικα, ανανεώστε τον περιηγητή σας για να δείτε τις αλλαγές σας. Αυτή η προσέγγιση ανάπτυξης με επαναλήψεις είναι παρόμοια με το πώς η NASA κατασκεύασε τον υπολογιστή καθοδήγησης Apollo – δοκιμάζοντας κάθε στοιχείο πριν το ενσωματώσει στο μεγαλύτερο σύστημα.
|
|
|
|
|
|
### Προσθέστε κώδικα
|
|
|
|
|
|
Προσθέστε τον απαιτούμενο κώδικα στο `your-work/app.js` για να ολοκληρώσετε τις παρακάτω εργασίες:
|
|
|
|
|
|
1. **Σχεδιάστε έναν καμβά με μαύρο φόντο**
|
|
|
> 💡 **Πώς να το κάνετε**: Βρείτε το TODO στο `/app.js` και προσθέστε μόνο δύο γραμμές. Ορίστε το `ctx.fillStyle` σε μαύρο και στη συνέχεια χρησιμοποιήστε το `ctx.fillRect()` ξεκινώντας από (0,0) με τις διαστάσεις του καμβά σας. Εύκολο!
|
|
|
|
|
|
2. **Φορτώστε υφές παιχνιδιού**
|
|
|
> 💡 **Πώς να το κάνετε**: Χρησιμοποιήστε το `await loadAsset()` για να φορτώσετε τις εικόνες του παίκτη και του εχθρού. Αποθηκεύστε τις σε μεταβλητές ώστε να μπορείτε να τις χρησιμοποιήσετε αργότερα. Θυμηθείτε – δεν θα εμφανιστούν μέχρι να τις σχεδιάσετε πραγματικά!
|
|
|
|
|
|
3. **Σχεδιάστε το πλοίο του ήρωα στη θέση κέντρο-κάτω**
|
|
|
> 💡 **Πώς να το κάνετε**: Χρησιμοποιήστε το `ctx.drawImage()` για να τοποθετήσετε τον ήρωα σας. Για τη συντεταγμένη x, δοκιμάστε το `canvas.width / 2 - 45` για να το κεντράρετε, και για τη συντεταγμένη y χρησιμοποιήστε το `canvas.height - canvas.height / 4` για να το τοποθετήσετε στην κάτω περιοχή.
|
|
|
|
|
|
4. **Σχεδιάστε έναν σχηματισμό 5×5 πλοίων εχθρών**
|
|
|
> 💡 **Πώς να το κάνετε**
|
|
|
|
|
|
---
|
|
|
|
|
|
**Αποποίηση ευθύνης**:
|
|
|
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. |
