Ακολουθεί μια έκδοση του κλασικού παιχνιδιού μνήμης που επιτρέπει στους επισκέπτες της ιστοσελίδας σας να ταιριάζουν με εικόνες σε ένα πλέγμα χρησιμοποιώντας το JavaScript.
Προμηθεύοντας τις εικόνες
Θα πρέπει να παρέχετε τις εικόνες, αλλά μπορείτε να χρησιμοποιήσετε οποιεσδήποτε εικόνες που σας αρέσουν με αυτό το σενάριο εφ 'όσον κατέχετε τα δικαιώματα χρήσης τους στο διαδίκτυο. Θα χρειαστεί επίσης να αλλάξετε το μέγεθος τους σε 60 εικονοστοιχεία κατά 60 εικονοστοιχεία πριν ξεκινήσετε.
Θα χρειαστείτε μια εικόνα για το πίσω μέρος των "καρτών" και δεκαπέντε για τα "μέτωπα".
Βεβαιωθείτε ότι τα αρχεία εικόνας είναι όσο το δυνατόν μικρότερα ή ότι το παιχνίδι μπορεί να διαρκέσει πολύ για να φορτωθεί. Με αυτή την έκδοση έχω περιορίσει το σενάριο σε 30 κάρτες καθώς όλες οι εικόνες θα κάνουν τη σελίδα πολύ πιο αργή για φόρτωση. Όσο περισσότερες κάρτες και εικόνες η σελίδα έχει την πιο αργή σελίδα πρόκειται να φορτώσει. Αυτό μπορεί να μην είναι πρόβλημα για όσους έχουν καλές ευρυζωνικές συνδέσεις, αλλά όσοι έχουν βραδύτερες συνδέσεις ενδέχεται να απογοητευτούν από τη στιγμή που θα χρειαστούν.
Τι είναι το παιχνίδι μνήμης συγκέντρωσης;
Εάν δεν έχετε παίξει αυτό το παιχνίδι πριν, οι κανόνες είναι πολύ απλοί. Υπάρχουν 30 τετράγωνα ή κάρτες. Κάθε κάρτα έχει μία από τις 15 εικόνες, χωρίς εικόνα να εμφανίζεται περισσότερο από δύο φορές - αυτά είναι τα ζεύγη που θα αντιστοιχούν.
Οι κάρτες αρχίζουν "με την όψη προς τα κάτω", αποκρύπτοντας τις εικόνες στα 15 ζεύγη.
Ο στόχος είναι να εμφανιστούν όλα τα ζευγάρια που ταιριάζουν όσο το δυνατόν πιο σύντομα.
Η αναπαραγωγή αρχίζει επιλέγοντας μία κάρτα και στη συνέχεια επιλέγοντας ένα δευτερόλεπτο. Εάν είναι ένας αγώνας, παραμένουν μπροστά. αν δεν ταιριάζουν, οι δύο κάρτες γυρίζουν πίσω, με την όψη προς τα κάτω. Καθώς παίζετε, θα χρειαστεί να βασιστείτε στη μνήμη σας για τις προηγούμενες κάρτες και τις θέσεις τους για να κάνετε επιτυχημένους αγώνες.
Πώς λειτουργεί αυτή η έκδοση της συγκέντρωσης
Σε αυτήν την έκδοση JavaScript του παιχνιδιού, επιλέγετε κάρτες κάνοντας κλικ σε αυτά. Αν τα δύο που επιλέγετε αντιστοιχίσετε, τότε θα παραμείνουν ορατά, αν δεν το κάνουν τότε θα εξαφανιστούν ξανά μετά από ένα δευτερόλεπτο.
Υπάρχει ένας μετρητής χρόνου στο κάτω μέρος που παρακολουθεί πόσο καιρό σας χρειάζεται να ταιριάξετε όλα τα ζεύγη.
Εάν θέλετε να αρχίσετε πάλι, απλά πατήστε το κουμπί counter και ολόκληρο το tableau θα ανακατανεμηθεί και μπορείτε να ξεκινήσετε ξανά.
Οι εικόνες που χρησιμοποιούνται σε αυτό το δείγμα δεν συνοδεύονται από το σενάριο, όπως αναφέρθηκε, θα πρέπει να δώσετε το δικό σας. Εάν δεν διαθέτετε εικόνες που να χρησιμοποιείτε με αυτό το σενάριο και δεν μπορείτε να δημιουργήσετε τη δική σας, μπορείτε να αναζητήσετε κατάλληλο clipart που είναι δωρεάν.
Προσθήκη του παιχνιδιού στην ιστοσελίδα σας
Το σενάριο για το παιχνίδι μνήμης προστίθεται στην ιστοσελίδα σας σε πέντε βήματα.
Βήμα 1: Αντιγράψτε τον ακόλουθο κώδικα και αποθηκεύστε τον σε ένα αρχείο που ονομάζεται memoryh.js.
// Παιχνίδι μνήμης συγκέντρωσης με εικόνες - Head Script
// copyright Stephen Chapman, 28 Φεβρουαρίου 2006, 24 Δεκεμβρίου 2009
// μπορείτε να αντιγράψετε αυτό το σενάριο υπό την προϋπόθεση ότι διατηρείτε την ειδοποίηση πνευματικών δικαιωμάτων
var πίσω = 'back.gif';
var tile = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif',
'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif',
'img12.gif', 'img13.gif', 'img14.gif'].
συνάρτηση randOrd (a, b) {επιστροφή (Math.round (Math.random () - 0.5);} var im = []; Για
(var ι = 0; i <15; i ++) {im [i] = νέα εικόνα (); im [i] .src = πλακίδιο [i]; κεραμίδι [i] =
''; κεραμίδι [i + 15] =
[i];} εμφάνιση λειτουργίαςBack (i) {document.getElementById ('t' + i) .innerHTML =
'Ύψος = "60" alt = "πίσω" \ /> '} var ch1, ch2, tmr, tno, tid, cid, cnt?
window.onload = έναρξη; αρχική λειτουργία () {για (var i = 0; i <= 29, i ++)
displayBack (i) · clearInterval (tid) · tmr = tno = cnt = 0 · tile.sort (randOrd
), cntr (); tid = setInterval ('cntr ()', 1000);} λειτουργία cntr () {var min =
Math.floor (tmr / 60) · var sec = tmr% 60 · document.getElementById ('cnt') value =
min + ':' + (δευτ. '0': '') + sec. tmr ++ ·} συνάρτηση disp (sel) {if (tno> 1)
{clearTimeout (cid); κρύβουν ();} document.getElementById ('t' + sel) .innerHTML =
κεραμικό [sel] · αν (tno == 0) ch1 = sel; αλλιώς {ch2 = sel; cid = setTimeout ('απόκρυψη ()',
900);} tno ++;} λειτουργία κρύβεται () {tno = 0; αν (κεραμίδι [ch1]! = κεραμίδι [ch2])
{displayBack (ch1); displayBack (ch2);} άλλο cnt ++; αν (cnt> = 15)
clearInterval (tid);}
Θα αντικαταστήσετε τα ονόματα αρχείων εικόνας για πίσω και πλακάκι με τα ονόματα αρχείων των εικόνων σας.
Θυμηθείτε να επεξεργαστείτε τις εικόνες σας στο πρόγραμμα γραφικών σας έτσι ώστε να έχουν όλα 60 τετραγωνικά εικονοστοιχεία έτσι ώστε να μην χρειαστούν πολύ χρόνο για φόρτωση (το συνδυασμένο μέγεθος των 16 εικόνων που χρησιμοποιήθηκαν για το παράδειγμά μου είναι μόλις 4758 bytes, επομένως δεν θα πρέπει να έχετε κανένα πρόβλημα κρατώντας το σύνολο κάτω 10k).
Βήμα 2: Επιλέξτε τον παρακάτω κώδικα και αντιγράψτε τον σε ένα αρχείο που ονομάζεται memory.css.
.blk {width: 70px; ύψος: 70px; υπερχείλιση: κρυφή ·}
Βήμα 3: Εισαγάγετε τον ακόλουθο κώδικα στο κεφάλαιο του εγγράφου HTML της ιστοσελίδας σας για να καλέσετε τα δύο αρχεία που μόλις δημιουργήσατε.
Βήμα 4: Επιλέξτε και αντιγράψτε τον παρακάτω κώδικα και, στη συνέχεια, αποθηκεύστε τον σε ένα αρχείο που ονομάζεται memoryb.js.
// Παιχνίδι μνήμης συγκέντρωσης με εικόνες - Body Script
// copyright Stephen Chapman, 28 Φεβρουαρίου 2006, 24 Δεκεμβρίου 2009
// μπορείτε να αντιγράψετε αυτό το σενάριο υπό την προϋπόθεση ότι διατηρείτε την ειδοποίηση πνευματικών δικαιωμάτων
document.write (''), για (var b =
0; b <= 4; b ++) {document.write ('id = "t" + ((5 * α) + β) + '">');} document.write (' ');} document.write ('
Βήμα 5: Τώρα, μόνο που παραμένει είναι να προσθέσετε το παιχνίδι στην ιστοσελίδα σας όπου θέλετε να εμφανίζεται εισάγοντας τον ακόλουθο κώδικα στο έγγραφο HTML.