Πώς να φτιάξετε ένα παιχνίδι φιδιού χρησιμοποιώντας HTML, CSS και JavaScript

Το παιχνίδι με φίδια είναι μια κλασική άσκηση προγραμματισμού που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε τις δεξιότητές σας στον προγραμματισμό και στην επίλυση προβλημάτων. Μπορείτε να δημιουργήσετε το παιχνίδι σε ένα πρόγραμμα περιήγησης ιστού χρησιμοποιώντας HTML, CSS και JavaScript.

Στο παιχνίδι, ελέγχετε ένα φίδι που κινείται γύρω από έναν πίνακα. Το φίδι μεγαλώνει σε μέγεθος καθώς συλλέγετε φαγητό. Το παιχνίδι θα τελειώσει αν συγκρουσθείτε με τη δική σας ουρά ή κάποιον από τους τοίχους.

Πώς να δημιουργήσετε τη διεπαφή χρήστη για τον καμβά

Χρησιμοποιήστε HTML και CSS για να προσθέσετε τον καμβά για να μετακινηθεί το φίδι. Υπάρχουν πολλά άλλα

Μπορείτε να ανατρέξετε σε αυτό το έργο Αποθετήριο GitHub για τον πλήρη πηγαίο κώδικα.

1. Δημιουργήστε ένα νέο αρχείο με το όνομα "index.html".
2. Ανοίξτε το αρχείο χρησιμοποιώντας οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου, όπως π.χ Οπτικός κώδικας ή άτομο. Προσθέστε τη βασική δομή κώδικα HTML:

   html>
   <htmllang="en-US">
   <κεφάλι>
   <τίτλος>Παιχνίδι με φίδιατίτλος>
   κεφάλι>
   <σώμα>
   σώμα>
   html>

3. Μέσα στην ετικέτα σώματος, προσθέστε έναν καμβά για να αναπαραστήσετε τον πίνακα παιχνιδιού για το φίδι.

   <h2>Παιχνίδι με φίδιαh2>
   <divταυτότητα="παιχνίδι">
   <καμβάςταυτότητα="φίδι">καμβάς>
   div>

4. Στον ίδιο φάκελο με το αρχείο HTML, δημιουργήστε ένα νέο αρχείο που ονομάζεται "styles.css".
5. Στο εσωτερικό, προσθέστε λίγο CSS για τη συνολική ιστοσελίδα. Μπορείτε επίσης να διαμορφώσετε τον ιστότοπό σας χρησιμοποιώντας άλλα βασικές συμβουλές και κόλπα CSS.

   #παιχνίδι {
   πλάτος: 400 px;
   ύψος: 400 px;
   περιθώριο:0αυτο;
   χρώμα του φόντου:#εεε;
   }
   h2 {
   στοίχιση κειμένου:κέντρο;
   γραμματοσειρά-οικογένεια: Arial;
   μέγεθος γραμματοσειράς: 36 px;
   } 
   

6. Μέσα στο αρχείο HTML, προσθέστε έναν σύνδεσμο προς το CSS στην ετικέτα head:

   <Σύνδεσμοςσχετ="φύλλο στυλ"τύπος="κείμενο/css"href="styles.css">

7. Για να προβάλετε τον καμβά, ανοίξτε το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού.

Πώς να σχεδιάσετε το φίδι

Στο παρακάτω παράδειγμα, η μαύρη γραμμή αντιπροσωπεύει το φίδι:

Πολλαπλά τετράγωνα ή «τμήματα» συνθέτουν το φίδι. Καθώς το φίδι μεγαλώνει, αυξάνεται και ο αριθμός των τετραγώνων. Στην αρχή του παιχνιδιού, το μήκος του φιδιού είναι ένα κομμάτι.

1. Μέσα στο αρχείο HTML, συνδέστε ένα νέο αρχείο JavaScript στο κάτω μέρος της ετικέτας σώματος:

   <σώμα>
    Ο κωδικός σας εδώ 
   <γραφήsrc="script.js">γραφή>
   σώμα>

2. Δημιουργήστε script.js και ξεκινήστε λαμβάνοντας το στοιχείο DOM του καμβά:

   var καμβάς = έγγραφο.getElementById("φίδι");

3. Ορίστε το πλαίσιο για το στοιχείο HTML καμβά. Σε αυτήν την περίπτωση, θέλετε το παιχνίδι να αποδίδει έναν καμβά 2 διαστάσεων. Αυτό θα σας επιτρέψει να σχεδιάσετε πολλά σχήματα ή εικόνες στο στοιχείο HTML.

   var canvas2d = canvas.getContext("2d");

4. Ορίστε άλλες μεταβλητές εντός του παιχνιδιού, όπως αν το παιχνίδι έχει τελειώσει και το ύψος και το πλάτος του καμβά:

   var παιχνίδι Τελειώθηκε = ψευδής;
   καμβάς.πλάτος = 400;
   καμβάς.ύψος = 400;

5. Δηλώστε μια μεταβλητή που ονομάζεται "snakeSegments". Αυτό θα κρατήσει τον αριθμό των "τετράγωνων" που θα καταλάβει το φίδι. Μπορείτε επίσης να δημιουργήσετε μια μεταβλητή για να παρακολουθείτε το μήκος του φιδιού:

   var snakeSegments = [];
   var Μήκος φιδιού = 1;
   

6. Δηλώστε την αρχική θέση Χ και Υ του φιδιού:

   var φίδιΧ = 0;
   var φίδιΥ = 0;

7. Δημιουργήστε μια νέα συνάρτηση. Στο εσωτερικό, προσθέστε το αρχικό κομμάτι φιδιού στον πίνακα snakeSegments, με τις αρχικές συντεταγμένες X και Y:

   λειτουργίαmoveSnake() {
    snakeSegments.unshift({ Χ: snakeX, y: snakeY });
   }

8. Δημιουργήστε μια νέα συνάρτηση. Στο εσωτερικό, ορίστε το στυλ πλήρωσης σε μαύρο. Αυτό είναι το χρώμα που θα χρησιμοποιήσει για να σχεδιάσει το φίδι:

   λειτουργίαζωγραφίζω φιδάκι() {
    canvas2d.fillStyle = "μαύρος"; 
   }

9. Για κάθε τμήμα που αποτελεί το μέγεθος του φιδιού, σχεδιάστε ένα τετράγωνο με πλάτος και ύψος 10 pixel:

   Για (var i = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Δημιουργήστε έναν βρόχο παιχνιδιού που θα τρέχει κάθε 100 χιλιοστά του δευτερολέπτου. Αυτό θα κάνει το παιχνίδι να τραβάει συνεχώς το φίδι στη νέα του θέση, κάτι που θα είναι πολύ σημαντικό όταν το φίδι αρχίσει να κινείται:

    λειτουργίαGameLoop() {
     moveSnake();
     drawSnake();

11. Ανοίξτε το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού για να δείτε το φίδι στο μικρότερο μέγεθος στην αρχική του θέση.

Πώς να κάνετε το φίδι να κινηθεί

Προσθέστε λίγη λογική για να μετακινήσετε το φίδι σε διαφορετικές κατευθύνσεις, ανάλογα με το κουμπί που πατάει ο παίκτης στο πληκτρολόγιο.

1. Στην κορυφή του αρχείου, δηλώστε την αρχική κατεύθυνση του φιδιού:

   var κατεύθυνσηΧ = 10;
   var κατεύθυνσηY = 0;
   

2. Προσθέστε ένα πρόγραμμα χειρισμού συμβάντων που ενεργοποιείται όταν η συσκευή αναπαραγωγής πατήσει ένα πλήκτρο:

   έγγραφο.onkeydown = λειτουργία(Εκδήλωση) {
   };

3. Μέσα στο πρόγραμμα χειρισμού συμβάντων, αλλάξτε την κατεύθυνση που κινείται το φίδι, με βάση το πατημένο πλήκτρο:

   διακόπτης (event.keyCode) {
   υπόθεση37: // Αριστερό βέλος
    κατεύθυνσηΧ = -10;
    κατεύθυνσηY = 0;
   Διακοπή;
   υπόθεση38: // Επάνω βέλος
    κατεύθυνσηΧ = 0;
    κατεύθυνσηY = -10;
   Διακοπή;
   υπόθεση39: // Δεξί βέλος
    κατεύθυνσηΧ = 10;
    κατεύθυνσηY = 0;
   Διακοπή;
   υπόθεση40: // Κάτω βελάκι
    κατεύθυνσηΧ = 0;
    κατεύθυνσηY = 10;
   Διακοπή;
   }

4. Στη συνάρτηση moveSnake(), χρησιμοποιήστε την κατεύθυνση για να ενημερώσετε τις συντεταγμένες X και Y του φιδιού. Για παράδειγμα, εάν το φίδι πρέπει να μετακινηθεί αριστερά, η κατεύθυνση Χ θα είναι "-10". Αυτό θα ενημερώσει τη συντεταγμένη X για να αφαιρέσει 10 pixel για κάθε καρέ του παιχνιδιού:

   λειτουργίαmoveSnake() {
    snakeSegments.unshift({ Χ: snakeX, y: snakeY });
    φίδιΧ += κατεύθυνσηΧ;
    snakeY += κατεύθυνσηY;
   }

5. Το παιχνίδι προς το παρόν δεν αφαιρεί προηγούμενα τμήματα ενώ το φίδι κινείται. Αυτό θα κάνει το φίδι να μοιάζει με αυτό:
6. Για να το διορθώσετε, καθαρίστε τον καμβά πριν σχεδιάσετε το νέο φίδι σε κάθε πλαίσιο, στην αρχή της συνάρτησης drawSnake():

   canvas2d.clearRect(0, 0, καμβάς.πλάτος, καμβάς.ύψος);

7. Θα χρειαστεί επίσης να αφαιρέσετε το τελευταίο στοιχείο του πίνακα snakeSegments, μέσα στη συνάρτηση moveSnake():

   ενώ (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Ανοίξτε το αρχείο "index.html" και πατήστε τα πλήκτρα αριστερά, δεξιά, πάνω ή κάτω για να μετακινήσετε το φίδι.

Πώς να προσθέσετε φαγητό στον καμβά

Προσθέστε τελείες στο επιτραπέζιο παιχνίδι για να αναπαραστήσετε κομμάτια φαγητού για το φίδι.

1. Δηλώστε μια νέα μεταβλητή στην κορυφή του αρχείου για να αποθηκεύσετε μια σειρά από κομμάτια φαγητού:

   var τελείες = [];

2. Δημιουργήστε μια νέα συνάρτηση. Στο εσωτερικό, δημιουργήστε τυχαίες συντεταγμένες X και Y για τις τελείες. Μπορείτε επίσης να διασφαλίσετε ότι μόνο 10 κουκκίδες βρίσκονται στον πίνακα ανά πάσα στιγμή:

   λειτουργίαspawnDots() {
   αν(κουκκίδες.μήκος < 10) {
   var dotX = Μαθηματικά.πάτωμα(Μαθηματικά.random() * canvas.width);
   var τελεία = Μαθηματικά.πάτωμα(Μαθηματικά.random() * canvas.height);
    dots.push({ Χ: dotX, y: dotY });
    }
   }

3. Αφού δημιουργήσετε τις συντεταγμένες X και Y για το φαγητό, σχεδιάστε τις στον καμβά χρησιμοποιώντας ένα κόκκινο χρώμα:

   Για (var i = 0; i < τελείες.μήκος; i++) {
    canvas2d.fillStyle = "το κόκκινο";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Καλέστε τη νέα συνάρτηση spawnDots() μέσα στον βρόχο του παιχνιδιού:

   λειτουργίαGameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   αν(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Ανοίξτε το αρχείο "index.html" για να δείτε το φαγητό στον πίνακα παιχνιδιού.

Πώς να κάνετε το φίδι να μεγαλώσει

Μπορείτε να κάνετε το φίδι να μεγαλώσει αυξάνοντας το μήκος του όταν συγκρούεται με μια κουκκίδα τροφής.

1. Δημιουργήστε μια νέα συνάρτηση. Μέσα σε αυτό, πραγματοποιήστε κύκλο σε κάθε στοιχείο του πίνακα κουκκίδων:

   λειτουργίαcheckCollision() {
   Για (var i = 0; i < τελείες.μήκος; i++) {
   
    }
   }

2. Εάν η θέση του φιδιού ταιριάζει με τις συντεταγμένες οποιωνδήποτε κουκκίδων, αυξήστε το μήκος του φιδιού και διαγράψτε την κουκκίδα:

   αν (φίδιΧ < τελείες[i].χ + 10 && 
    φίδιΧ + 10 > τελείες[i].x && 
    snakeY < τελείες[i].y + 10 && 
    φίδιY + 10 > τελείες[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Καλέστε τη νέα συνάρτηση checkCollision() στον βρόχο του παιχνιδιού:

   λειτουργίαGameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   αν(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Ανοίξτε το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού. Μετακινήστε το φίδι χρησιμοποιώντας το πληκτρολόγιο για να συλλέξετε τα κομμάτια της τροφής και να μεγαλώσετε το φίδι.

Πώς να τερματίσετε το παιχνίδι

Για να τελειώσετε το παιχνίδι, ελέγξτε αν το φίδι συγκρούστηκε με την ουρά του ή με κάποιον από τους τοίχους.

1. Δημιουργήστε μια νέα λειτουργία για να εκτυπώσετε μια ειδοποίηση "Game Over".

   λειτουργίατέλος παιχνιδιού() {
    setTimeout(λειτουργία() {
    συναγερμός("Τέλος παιχνιδιού!");
    }, 500); 
    παιχνίδι Τελειώθηκε = αληθής
   }

2. Μέσα στη συνάρτηση checkCollision(), ελέγξτε αν το φίδι χτύπησε κάποιο από τα τοιχώματα του καμβά. Εάν ναι, καλέστε τη συνάρτηση gameOver():

   αν (φίδιΧ < -10 || 
    φίδιY < -10 || 
    φίδιΧ > καμβάς.πλάτος+10 ||
    snakeY > καμβάς.ύψος+10) {
    τέλος παιχνιδιού();
   }

3. Για να ελέγξετε εάν το κεφάλι του φιδιού συγκρούστηκε με κάποιο από τα τμήματα της ουράς, περάστε βρόχο μέσα από κάθε κομμάτι του φιδιού:

   Για (var i = 1; i < snakeSegments.length; i++) {
   }

4. Μέσα στο for-loop, ελέγξτε αν η θέση του κεφαλιού του φιδιού ταιριάζει με κάποιο από τα τμήματα της ουράς. Αν ναι, αυτό σημαίνει ότι το κεφάλι συγκρούστηκε με μια ουρά, οπότε τερματίστε το παιχνίδι:

   αν (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    τέλος παιχνιδιού();
   }

5. Ανοίξτε το αρχείο "index.html" σε ένα πρόγραμμα περιήγησης ιστού. Προσπαθήστε να χτυπήσετε έναν τοίχο ή τη δική σας ουρά για να τελειώσετε το παιχνίδι.

Εκμάθηση εννοιών JavaScript μέσω παιχνιδιών

Η δημιουργία παιχνιδιών μπορεί να είναι ένας πολύ καλός τρόπος για να κάνετε την μαθησιακή σας εμπειρία πιο ευχάριστη. Συνεχίστε να δημιουργείτε περισσότερα παιχνίδια για να συνεχίσετε να βελτιώνετε τις γνώσεις σας στο JavaScript.