להלן גרסה של משחק הזיכרון הקלאסי המאפשר למבקרים בדף האינטרנט שלך להתאים תמונות בתבנית רשת באמצעות JavaScript.
אספקת התמונות
יהיה עליכם לספק את התמונות, אך תוכלו להשתמש בתמונות שתרצו עם סקריפט זה כל עוד יש לכם הזכויות להשתמש בהן באינטרנט. תצטרך לשנות את גודל הגודל שלהם ל -60 פיקסלים על 60 פיקסלים לפני שתתחיל.
תזדקק לתמונה אחת בגב "הקלפים" וחמש עשרה ל"חזיתות ".
וודא שקבצי התמונות קטנים ככל האפשר או שהמשחק עשוי לקחת זמן רב מדי לטעינה. עם גרסה זו הגבלת את הסקריפט ל -30 קלפים מכיוון שכל התמונות יהפכו את העמוד לאט יותר לטעינה. ככל שיש יותר קלפים ותמונות בדף האיטיות העמוד הולך לטעון. זה אולי לא מהווה בעיה עבור בעלי קשרי פס רחב טובים, אך לבעלי קשרים איטיים יותר עשוי להיות מתוסכל מהזמן שנדרש.
מהו משחק זיכרון הריכוז?
אם לא שיחקת את המשחק הזה בעבר, הכללים פשוטים מאוד. יש 30 ריבועים, או קלפים. לכל כרטיס יש אחת מ -15 תמונות, ללא תמונה שמופיעה יותר מפעמיים - אלה הזוגות שתואמים זה לזה.
הקלפים מתחילים "עם הפנים כלפי מטה", מסתירים את התמונות על 15 הזוגות.
המטרה היא להעלות את כל הזוגות התואמים בזמן קצר ככל האפשר.
ההפעלה מתחילה בכך שבחרת כרטיס אחד ואז בחרת שנייה. אם הם שידוך, הם נשארים עם הפנים כלפי מעלה; אם הם אינם תואמים, שני הקלפים הופכים לאחור, עם הפנים כלפי מטה. כשאתה משחק, תצטרך להסתמך על הזיכרון שלך מכרטיסים קודמים והמיקומים שלהם כדי ליצור התאמות מוצלחות.
איך גרסת הריכוז הזו עובדת
בגרסת JavaScript זו של המשחק אתה בוחר כרטיסים על ידי לחיצה עליהם. אם השניים שתבחר יתאימו, הם יישארו גלויים, אם הם לא ייעלמו שוב לאחר שנייה בערך.
יש מונה זמן בתחתית העוקב אחר כמה זמן לוקח לך להתאים את כל הזוגות.
אם אתה רוצה להתחיל מחדש, פשוט לחץ על כפתור הדלפק וכל הטאבלון יוחלף מחדש ותוכל להתחיל שוב.
התמונות המשמשות במדגם זה אינן מגיעות לתסריט, כך שכאמור תצטרך לספק משלך. אם אין לך תמונות לשימוש עם סקריפט זה ואינך יכול ליצור תמונות משלך, אתה יכול לחפש קליפארט מתאים בחינם לשימוש.
הוספת המשחק לדף האינטרנט שלך
הסקריפט למשחק הזיכרון מתווסף לדף האינטרנט שלך בחמישה שלבים.
שלב 1: העתק את הקוד הבא ושמור אותו בקובץ בשם memoryh.js.
// משחק זיכרון ריכוז עם תמונות - תסריט ראש
// זכויות יוצרים סטיבן צ'פמן, 28 בפברואר 2006, 24 בדצמבר 2009
// תוכל להעתיק סקריפט זה בתנאי שתשמור על הודעת זכויות היוצרים
var back = '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) {return (Math.round (Math.random ()) - 0.5);} var im = []; ל
(var i = 0; i <15; i ++) {im [i] = תמונה חדשה (); im [i] .src = אריח [i]; אריח [i] =
''; אריח [i + 15] =
אריח [i];} displayBack (i) {document.getElementById ('t' + i) פונקציה .innerHTML =
'גובה = "60" alt = "גב" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
windows.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 + ':' + (שניות <10? '0': '') + שניות; 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; if (אריח [ch1]! = אריח [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; אם (cnt> = 15)
clearInterval (tid);}
תחליף את שמות קבצי התמונה עבור חזור ו אריח עם שמות הקבצים של התמונות שלך.
זכור לערוך את התמונות שלך בתוכנית הגרפית שלך כך שכולן יהיו 60 פיקסלים מרובעים כך שלא ייקח זמן רב לטעון (הגודל המשולב של 16 התמונות המשמשות לדוגמא שלי הוא רק 4758 בתים כך שלא אמורה להיות לך בעיה לשמור על הסכום הכולל מתחת 10k).
שלב 2: בחר את הקוד למטה והעתק אותו לקובץ שנקרא memory.css.
.blk {רוחב: 70 פיקסלים; גובה: 70 פיקסלים; הצפה: מוסתר;}
שלב 3: הכנס את הקוד הבא לחלק הראשי של מסמך ה- HTML של עמוד האינטרנט שלך כדי להתקשר לשני הקבצים שיצרת זה עתה.
שלב 4: בחר והעתק את הקוד למטה, ואז שמור אותו בקובץ שנקרא memoryb.js.
// משחק זיכרון ריכוז עם תמונות - תסריט גוף
// זכויות יוצרים סטיבן צ'פמן, 28 בפברואר 2006, 24 בדצמבר 2009
// תוכל להעתיק סקריפט זה בתנאי שתשמור על הודעת זכויות היוצרים
document.write (''); עבור (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
שלב 5: כעת נותר רק להוסיף את המשחק לדף האינטרנט שלך בו אתה רוצה שהוא יופיע על ידי הכנסת הקוד הבא למסמך ה- HTML שלך.