Το Tic-tac-toe είναι ένα δημοφιλές παιχνίδι που χρησιμοποιεί ένα πλέγμα 3×3. Ο στόχος του παιχνιδιού είναι να είστε ο πρώτος παίκτης που θα τοποθετήσει τρία σύμβολα σε μια ευθεία οριζόντια, κάθετη ή διαγώνια σειρά.
Μπορείτε να δημιουργήσετε ένα παιχνίδι Tic-tac-toe που εκτελείται σε πρόγραμμα περιήγησης ιστού χρησιμοποιώντας HTML, CSS και JavaScript. Μπορείτε να χρησιμοποιήσετε HTML για να προσθέσετε το περιεχόμενο που περιέχει το πλέγμα 3×3 και CSS για να προσθέσετε κάποιο στυλ στο σχεδιασμό του παιχνιδιού.
Στη συνέχεια, μπορείτε να χρησιμοποιήσετε JavaScript για τη λειτουργικότητα του παιχνιδιού. Αυτό περιλαμβάνει την τοποθέτηση συμβόλων, την εναλλαγή μεταξύ των παικτών και την απόφαση ποιος κερδίζει.
Πώς να δημιουργήσετε τη διεπαφή χρήστη για το παιχνίδι Tic-Tac-Toe
Μπορείτε να διαβάσετε και να κατεβάσετε τον πλήρη πηγαίο κώδικα για αυτό το παιχνίδι από το Αποθετήριο GitHub.
Το Tic-tac-toe είναι ένα από τα πολλά παιχνίδια που μπορείτε να κάνετε όταν μαθαίνετε πώς να προγραμματίζετε. Είναι καλό να εξασκείτε μια νέα γλώσσα ή περιβάλλον, όπως π.χ η μηχανή ανάπτυξης παιχνιδιών PICO-8.
Για να δημιουργήσετε ένα παιχνίδι Tic-tac-toe που εκτελείται σε πρόγραμμα περιήγησης ιστού, θα χρειαστεί να προσθέσετε HTML για το περιεχόμενο της σελίδας. Στη συνέχεια, μπορείτε να το διαμορφώσετε χρησιμοποιώντας CSS.
- Δημιουργήστε ένα νέο αρχείο με το όνομα "index.html".
- Μέσα στο "index.html", προσθέστε τη βασική δομή ενός αρχείου HTML:
html>
<htmllang="en-US">
<κεφάλι>
<τίτλος>Παιχνίδι Tic Tac Toeτίτλος>
κεφάλι>
<σώμα>
σώμα>
html> - Μέσα στην ετικέτα σώματος HTML, προσθέστε έναν πίνακα που περιέχει τρεις σειρές, με τρία κελιά σε κάθε σειρά:
<divτάξη="δοχείο">
<τραπέζι>
<tr>
<tdταυτότητα="1">td>
<tdταυτότητα="2">td>
<tdταυτότητα="3">td>
tr>
<tr>
<tdταυτότητα="4">td>
<tdταυτότητα="5">td>
<tdταυτότητα="6">td>
tr>
<tr>
<tdταυτότητα="7">td>
<tdταυτότητα="8">td>
<tdταυτότητα="9">td>
tr>
τραπέζι>
div> - Στον ίδιο φάκελο με το αρχείο HTML, δημιουργήστε ένα νέο αρχείο που ονομάζεται "styles.css".
- Μέσα στο αρχείο CSS, προσθέστε λίγο στυλ στο πλέγμα 3 επί 3:
τραπέζι {
σύνορα-κατάρρευση: κατάρρευση;
περιθώριο: 0 αυτο;
}td {
πλάτος: 100px;
ύψος: 100px;
στοίχιση κειμένου: κέντρο;
κατακόρυφη ευθυγράμμιση: Μέσης;
σύνορο: 1pxστερεόςμαύρος;
} - Συνδέστε το αρχείο CSS με το αρχείο HTML προσθέτοντάς το στην ετικέτα κεφαλής:
<Σύνδεσμοςσχετ="φύλλο στυλ"τύπος="κείμενο/css"href="styles.css">
Πώς να κάνετε εναλλαγή προσθέτοντας σύμβολα στον πίνακα παιχνιδιού
Στο παιχνίδι, θα υπάρχουν δύο παίκτες, ο καθένας με ένα σύμβολο "Χ" ή "Ο". Μπορείτε να προσθέσετε ένα σύμβολο "X" ή "O" κάνοντας κλικ σε ένα από τα κελιά του πλέγματος. Αυτό θα συνεχιστεί έως ότου ένας από εσάς δημιουργήσει μια ευθεία οριζόντια, κάθετη ή διαγώνια σειρά.
Μπορείτε να προσθέσετε αυτήν τη λειτουργία χρησιμοποιώντας JavaScript.
- Στον ίδιο φάκελο με τα αρχεία HTML και CSS, δημιουργήστε ένα αρχείο JavaScript που ονομάζεται "script.js".
- Συνδέστε το αρχείο JavaScript με το αρχείο HTML προσθέτοντας το σενάριο στο κάτω μέρος της ετικέτας σώματος:
<σώμα>
Ο κωδικός σας εδώ
<γραφήsrc="script.js">γραφή>
σώμα> - Μέσα στο αρχείο JavaScript, προσθέστε μια συμβολοσειρά που αντιπροσωπεύει το σύμβολο του προγράμματος αναπαραγωγής. Αυτό μπορεί να είναι είτε "Χ" ή "Ο". Από προεπιλογή, ο πρώτος παίκτης θα τοποθετήσει ένα "Χ":
αφήνω παίκτηΣύμβολο = "Χ"; - Προσθέστε μια άλλη μεταβλητή για να παρακολουθείτε εάν το παιχνίδι έχει τελειώσει:
αφήνω παιχνίδι Τελειώθηκε = ψευδής - Κάθε κελί στον πίνακα HTML έχει ένα αναγνωριστικό μεταξύ 1 και 9. Για κάθε κελί του πίνακα, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων που θα εκτελείται κάθε φορά που ένας χρήστης κάνει κλικ στο κελί:
Για (αφήνω i = 1; i <= 9; i++) {
έγγραφο.getElementById (i.toString()).addEventListener(
"Κάντε κλικ",
λειτουργία() {
}
);
} - Μέσα στο πρόγραμμα ακρόασης συμβάντων, αλλάξτε το εσωτερικό HTML για να εμφανιστεί το τρέχον σύμβολο. Φροντίστε να χρησιμοποιήσετε μια δήλωση υπό όρους JavaScript για να βεβαιωθείτε πρώτα ότι το κελί είναι άδειο και ότι το παιχνίδι δεν έχει ακόμη τελειώσει:
αν (Αυτό.innerHTML "" && !gameEnded) {
Αυτό.innerHTML = playerSymbol;
} - Προσθέστε μια κλάση στο στοιχείο HTML για το στυλ του συμβόλου που θα εμφανίζεται στο πλέγμα. Το όνομα των κλάσεων CSS θα είναι είτε "X" ή "O", ανάλογα με το σύμβολο:
Αυτό.classList.add (playerSymbol.toLowerCase()); - Μέσα στο αρχείο "styles.css", προσθέστε αυτές τις δύο νέες κλάσεις για τα σύμβολα "X" και "O". Τα σύμβολα "X" και "O" θα εμφανίζονται με διαφορετικά χρώματα:
.Χ {
χρώμα: μπλε;
μέγεθος γραμματοσειράς: 80px;
}.ο {
χρώμα: το κόκκινο;
μέγεθος γραμματοσειράς: 80px;
} - Στο αρχείο JavaScript, αφού αλλάξετε το innerHTML για να εμφανιστεί το σύμβολο, αλλάξτε το σύμβολο. Για παράδειγμα, εάν ο παίκτης μόλις τοποθέτησε ένα "X", αλλάξτε το επόμενο σύμβολο σε "O":
αν (Σύμβολο παίκτη "Χ")
παίκτηΣύμβολο = "Ο"
αλλού
παίκτηΣύμβολο = "Χ" - Για να εκτελέσετε το παιχνίδι, ανοίξτε το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού για να εμφανίσετε το πλέγμα 3 επί 3:
- Ξεκινήστε να τοποθετείτε σύμβολα στο πλέγμα κάνοντας κλικ στα κελιά. Το παιχνίδι θα εναλλάσσεται μεταξύ των συμβόλων "Χ" και "Ο":
Πώς να καθορίσετε τον νικητή
Προς το παρόν, το παιχνίδι θα συνεχίσει ακόμα και αν ένας παίκτης έχει τοποθετήσει τρία διαδοχικά σύμβολα. Θα χρειαστεί να προσθέσετε μια συνθήκη λήξης για να το ελέγχετε μετά από κάθε στροφή.
- Μέσα στο αρχείο JavaScript, προσθέστε μια νέα μεταβλητή για να αποθηκεύσετε όλες τις πιθανές "νικητήριες" θέσεις για το πλέγμα 3 επί 3. Για παράδειγμα, το "[1,2,3]" είναι η επάνω σειρά ή το "[1,4,7]" είναι μια διαγώνια σειρά.
αφήνω winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Προσθέστε μια νέα συνάρτηση που ονομάζεται checkWin():
λειτουργίαcheckWin() {
} - Μέσα στη συνάρτηση, πραγματοποιήστε κύκλο σε καθεμία από τις πιθανές θέσεις που κερδίζουν:
Για (αφήνω i = 0; i < winPos.length; i++) {} - Μέσα στο βρόχο for, ελέγξτε αν όλα τα κελιά περιέχουν το σύμβολο του προγράμματος αναπαραγωγής:
αν (
έγγραφο.getElementById (winPos[i][0]).innerHTML playerΣύμβολο &&
έγγραφο.getElementById (winPos[i][1]).innerHTML playerΣύμβολο &&
έγγραφο.getElementById (winPos[i][2]).innerHTML playerΣύμβολο
) {} - Εάν η συνθήκη αξιολογηθεί ως αληθής, τότε όλα τα σύμβολα είναι σε ευθεία γραμμή. Μέσα στη δήλωση if, εμφανίστε ένα μήνυμα στον χρήστη. Μπορείτε επίσης να αλλάξετε το στυλ του στοιχείου HTML προσθέτοντας μια κλάση CSS που ονομάζεται "win":
έγγραφο.getElementById (winPos[i][0]).classList.add("νίκη");
έγγραφο.getElementById (winPos[i][1]).classList.add("νίκη");
έγγραφο.getElementById (winPos[i][2]).classList.add("νίκη");
παιχνίδι Τελειώθηκε = αληθής;setTimeout(λειτουργία() {
ειδοποίηση (playerSymbol + "κερδίζει!");
}, 500); - Προσθέστε αυτήν την κλάση CSS "win" στο αρχείο "styles.css". Όταν ο παίκτης κερδίσει, θα αλλάξει το χρώμα φόντου των κελιών που κερδίζουν σε κίτρινο:
.νίκη {
χρώμα του φόντου: κίτρινος;
} - Καλέστε τη συνάρτηση checkWin() κάθε φορά που ένας παίκτης έχει μια σειρά, μέσα στο πρόγραμμα χειρισμού συμβάντων που προστέθηκε στα προηγούμενα βήματα:
Για (αφήνω i = 1; i <= 9; i++) {
// Κάθε φορά που ένας παίκτης κάνει κλικ σε ένα κελί
έγγραφο.getElementById (i.toString()).addEventListener(
"Κάντε κλικ",
λειτουργία() {
αν (Αυτό.innerHTML "" && !gameEnded) {
// Εμφανίστε είτε "X" ή "O" στο κελί και στυλ
Αυτό.innerHTML = playerSymbol;
Αυτό.classList.add (playerSymbol.toLowerCase());
// Ελέγξτε εάν ένας παίκτης έχει κερδίσει
checkWin();
// Αλλάξτε το σύμβολο με το άλλο για την επόμενη στροφή
αν (Σύμβολο παίκτη "Χ")
παίκτηΣύμβολο = "Ο"
αλλού
παίκτηΣύμβολο = "Χ"
}
}
);
}
Πώς να επαναφέρετε τον πίνακα παιχνιδιού
Μόλις ένας παίκτης κερδίσει το παιχνίδι, μπορείτε να επαναφέρετε τον πίνακα παιχνιδιού. Μπορείτε επίσης να επαναφέρετε τον πίνακα παιχνιδιού σε περίπτωση ισοπαλίας.
- Στο αρχείο HTML, μετά τον πίνακα, προσθέστε ένα κουμπί επαναφοράς:
<κουμπίταυτότητα="επαναφορά">Επαναφοράκουμπί> - Προσθέστε κάποιο στυλ στο κουμπί επαναφοράς:
.δοχείο {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
}#επαναφορά {
περιθώριο: 48px 40%;
υλικό παραγεμίσματος: 20px;
} - Στο αρχείο JavaScript, προσθέστε ένα πρόγραμμα χειρισμού συμβάντων που θα εκτελείται κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί επαναφοράς:
έγγραφο.getElementById("επαναφορά").addEventListener(
"Κάντε κλικ",
λειτουργία() {}
); - Για κάθε κελί στο πλέγμα, λάβετε το στοιχείο HTML χρησιμοποιώντας τη συνάρτηση getElementById(). Επαναφέρετε το innerHTML για να αφαιρέσετε τα σύμβολα "O" και "X" και να αφαιρέσετε όλα τα άλλα στυλ CSS:
Για (αφήνω i = 1; i <= 9; i++) {
έγγραφο.getElementById (i.toString()).innerHTML = "";
έγγραφο.getElementById (i.toString()).classList.remove("Χ");
έγγραφο.getElementById (i.toString()).classList.remove("ο");
έγγραφο.getElementById (i.toString()).classList.remove("νίκη");
παιχνίδι Τελειώθηκε = ψευδής;
} - Εκτελέστε το παιχνίδι ανοίγοντας το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού.
- Ξεκινήστε να τοποθετείτε τα σύμβολα "X" και "O" στο πλέγμα. Προσπαθήστε να κάνετε ένα από τα σύμβολα να κερδίσει.
- Πατήστε το κουμπί επαναφοράς για να επαναφέρετε τον πίνακα παιχνιδιού.
Εκμάθηση JavaScript με τη δημιουργία παιχνιδιών
Μπορείτε να συνεχίσετε να βελτιώνετε τις προγραμματιστικές σας δεξιότητες δημιουργώντας περισσότερα έργα σε JavaScript. Είναι εύκολο να δημιουργήσετε απλά παιχνίδια και εργαλεία σε ένα περιβάλλον ιστού, χρησιμοποιώντας πολλαπλές πλατφόρμες, ανοιχτές τεχνολογίες όπως JavaScript και HTML.
Δεν υπάρχει καλύτερος τρόπος για να βελτιώσετε τον προγραμματισμό σας από το να εξασκηθείτε στη συγγραφή προγραμμάτων!
