إليك نسخة من لعبة الذاكرة الكلاسيكية التي تسمح لزوار صفحة الويب الخاصة بك بمطابقة الصور في نمط الشبكة باستخدام JavaScript.
تجهيز الصور
سيكون عليك توفير الصور ، ولكن يمكنك استخدام أي صور تفضلها مع هذا النص البرمجي طالما أنك تمتلك حقوق استخدامها على الويب. سيكون عليك أيضًا تغيير حجمها إلى 60 بكسل × 60 بكسل قبل البدء.
ستحتاج إلى صورة واحدة للجزء الخلفي من "البطاقات" وخمسة عشر للجبهات.
تأكد من أن ملفات الصور صغيرة قدر الإمكان أو قد تستغرق اللعبة وقتًا طويلاً للتحميل. باستخدام هذا الإصدار ، قمت بقصر النص على 30 بطاقة لأن جميع الصور ستجعل الصفحة أبطأ كثيرًا في التحميل. كلما زاد عدد البطاقات والصور التي تحتوي عليها الصفحة ، كلما كانت الصفحة أبطأ في التحميل. قد لا يمثل هذا مشكلة لأولئك الذين لديهم اتصالات جيدة النطاق العريض ، ولكن أولئك الذين لديهم اتصالات أبطأ قد يصبحون محبطين بالوقت الذي يستغرقه.
ما هي لعبة ذاكرة التركيز؟
إذا لم تكن قد لعبت هذه اللعبة من قبل ، فالقواعد بسيطة للغاية. هناك 30 مربعاً أو بطاقة. تحتوي كل بطاقة على صورة واحدة من 15 صورة ، مع عدم ظهور صورة أكثر من مرتين - هذه هي الأزواج التي سيتم مطابقتها.
تبدأ البطاقات "مقلوبة" ، مخفية الصور على الأزواج الخمسة عشر.
الهدف هو إظهار كل الأزواج المطابقة في أقصر وقت ممكن.
يبدأ اللعب بتحديد بطاقة واحدة ، ثم تحديد بطاقة ثانية. إذا كانا متطابقين ، فسيبقى مقلوبًا. إذا لم يتطابقوا ، يتم إرجاع البطاقتين مرة أخرى ووجههما لأسفل. أثناء اللعب ، ستحتاج إلى الاعتماد على ذاكرتك من البطاقات السابقة ومواقعها من أجل إجراء مباريات ناجحة.
كيف يعمل هذا الإصدار من التركيز
في نسخة جافا سكريبت من اللعبة ، تقوم بتحديد البطاقات بالنقر فوقها. إذا تطابق الاثنان اللذين اخترتهما ، فسيظلان مرئيين ، وإذا لم يفعلوا ذلك ، فسيختفون مرة أخرى بعد ثانية أو نحو ذلك.
يوجد عداد وقت في الأسفل يتتبع الوقت الذي تستغرقه لمطابقة جميع الأزواج.
إذا كنت ترغب في البدء من جديد ، فما عليك سوى الضغط على زر العداد وسيتم تعديل اللوح بالكامل ويمكنك البدء مرة أخرى.
الصور المستخدمة في هذه العينة لا تأتي مع البرنامج النصي ، لذلك كما ذكرنا ، يجب عليك تقديم صورتك الخاصة. إذا لم يكن لديك صور لاستخدامها مع هذا النص البرمجي ولم تتمكن من إنشاء صورتك الخاصة ، فيمكنك البحث عن قصاصات فنية مناسبة للاستخدام المجاني.
إضافة اللعبة إلى صفحة الويب الخاصة بك
تمت إضافة البرنامج النصي للعبة الذاكرة إلى صفحة الويب الخاصة بك في خمس خطوات.
الخطوة 1: انسخ الكود التالي واحفظه في ملف مسمى ذاكرة. js.
// لعبة تركيز الذاكرة بالصور - Head Script
// حقوق الطبع والنشر ستيفن تشابمان ، 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']؛
function randOrd (a، b) {return (Math.round (Math.random ()) - 0.5)؛} var im = []؛ إلى عن على
(var i = 0 ؛ ط <15 ؛ i ++) {im [i] = new Image ()؛ im [i] .src = بلاط [i] ؛ بلاط [i] =
''; البلاط [i + 15] =
تجانب [i]؛} وظيفة displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> '؛} var ch1، ch2، tmr، tno، tid، cid، cnt؛
window.onload = البداية ؛ بدء الدالة () {لـ (var i = 0؛ ط <= 29 ؛ ط ++)
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 + ':' + (sec <10؟ '0': '') + ثانية ؛ tmr ++؛} وظيفة disp (sel) {if (tno> 1)
{clearTimeout (cid) ؛ إخفاء () ؛} document.getElementById ('t' + sel) .innerHTML =
البلاط [sel] ؛ إذا (tno == 0) ch1 = sel ؛ آخر {ch2 = sel؛ cid = setTimeout ('conceal ()'،
900)؛} tno ++؛} إخفاء الدالة () {tno = 0؛ if (البلاط [ch1]! = البلاط [ch2])
{displayBack (ch1) ؛ displayBack (ch2) ؛} آخر cnt ++ ؛ إذا (cnt> = 15)
clearInterval (tid) ؛}
سيتم استبدال أسماء ملفات الصور لـ عودة و بلاط مع أسماء ملفات صورك.
تذكر أن تقوم بتحرير صورك في برنامج الرسومات الخاص بك بحيث تكون كلها 60 بكسل مربعة بحيث لا تستغرق وقتًا طويلاً للتحميل (الحجم المجمع للصور الـ 16 المستخدمة في المثال الخاص بي هو 4758 بايت فقط ، لذا لن تواجه مشكلة في الاحتفاظ بالإجمالي تحت 10 كيلو).
الخطوة 2: حدد الرمز أدناه وانسخه إلى ملف يسمى memory.css.
.blk {عرض: 70 بكسل ؛ الارتفاع: 70 بكسل ؛ إخفاء الفائض؛}
الخطوه 3: أدخل الكود التالي في قسم العنوان في مستند HTML لصفحة الويب الخاصة بك لاستدعاء الملفين اللذين قمت بإنشائهما للتو.
الخطوة الرابعة: حدد ونسخ الرمز أدناه ، ثم احفظه في ملف يسمى memoryb.js.
// لعبة الذاكرة المركزة مع الصور - نص البرنامج
// حقوق الطبع والنشر ستيفن تشابمان ، 28 فبراير 2006 ، 24 ديسمبر 2009
// يمكنك نسخ هذا النص البرمجي شريطة أن تحتفظ بإشعار حقوق النشر
document.write ("') ؛ ل (var b =
0; ب <= 4 ؛ b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">')؛} document.write (' ')؛} document.write ('
الخطوة الخامسة: كل ما تبقى الآن هو إضافة اللعبة إلى صفحة الويب الخاصة بك حيث تريد أن تظهر عن طريق إدراج الكود التالي في مستند HTML الخاص بك.