जावास्क्रिप्ट के साथ एक वेब पेज के लिए खेल एकाग्रता जोड़ें

यहां क्लासिक मेमोरी गेम का एक संस्करण है जो आगंतुकों को आपके वेब पेज को जावास्क्रिप्ट का उपयोग करके ग्रिड पैटर्न में छवियों से मेल खाने की अनुमति देता है।

छवियों की आपूर्ति

आपको छवियों की आपूर्ति करनी होगी, लेकिन जब तक आप इस स्क्रिप्ट के साथ वेब पर उनका उपयोग करने के अधिकार के रूप में पसंद करते हैं, तब तक आप उन छवियों का उपयोग कर सकते हैं। आपको शुरू करने से पहले उन्हें 60 पिक्सेल तक 60 पिक्सेल का आकार बदलना होगा।

आपको "कार्ड" के पीछे एक छवि की आवश्यकता होगी और पंद्रह "मोर्चों" के लिए।

सुनिश्चित करें कि छवि फ़ाइलें यथासंभव छोटी हैं या गेम को लोड करने में बहुत लंबा समय लग सकता है। इस संस्करण के साथ मैंने स्क्रिप्ट को 30 कार्ड तक सीमित कर दिया है क्योंकि सभी चित्र पृष्ठ को लोड करने के लिए बहुत धीमा कर देंगे। पेज पर जितने अधिक कार्ड और चित्र हैं उतने ही धीमे पृष्ठ लोड करने जा रहे हैं। यह अच्छे ब्रॉडबैंड कनेक्शन वालों के लिए समस्या नहीं हो सकती है, लेकिन धीमी कनेक्शन वाले लोग इससे लगने वाले समय से निराश हो सकते हैं।

एकाग्रता मेमोरी गेम क्या है?

यदि आपने पहले यह गेम नहीं खेला है, तो नियम बहुत सरल हैं। 30 वर्ग, या कार्ड हैं। प्रत्येक कार्ड में 15 चित्र हैं, जिसमें कोई भी छवि दो बार से अधिक नहीं दिखाई देती है - ये ऐसे जोड़े हैं जो मिलान किए जाएंगे।

instagram viewer

15 जोड़े पर छवियों को छिपाते हुए कार्ड "फेस डाउन" शुरू होते हैं।

ऑब्जेक्ट सभी मिलान जोड़े को यथासंभव कम समय में चालू करना है।

आपके द्वारा एक कार्ड का चयन करके प्ले शुरू होता है, और फिर एक दूसरे को चुनना। यदि वे एक मैच हैं, तो वे आमने-सामने रहते हैं; यदि वे मेल नहीं खाते हैं, तो दो कार्ड वापस हो जाते हैं, नीचे का सामना करते हैं। जैसा कि आप खेलते हैं, आपको सफल मैच बनाने के लिए अपनी पिछली कार्ड की मेमोरी और उनके स्थानों पर भरोसा करना होगा।

कैसे काम करता है एकाग्रता का यह संस्करण

खेल के इस जावास्क्रिप्ट संस्करण में, आप उन पर क्लिक करके कार्ड का चयन करते हैं। यदि आप दोनों का चयन करते हैं तो वे दृश्यमान रहेंगे, यदि वे ऐसा नहीं करते हैं तो वे एक-दूसरे के बाद फिर से गायब हो जाएंगे।

नीचे एक समय काउंटर है जो यह ट्रैक करता है कि आपको सभी जोड़े से मेल खाने में कितना समय लगता है।

यदि आप शुरू करना चाहते हैं, तो बस काउंटर बटन दबाएं और पूरी झांकी को फेरबदल किया जाएगा और आप फिर से शुरू कर सकते हैं।

इस नमूने में उपयोग की गई छवियां स्क्रिप्ट के साथ नहीं आती हैं, इसलिए जैसा कि उल्लेख किया गया है, आपको अपना स्वयं प्रदान करना होगा। यदि आपके पास इस स्क्रिप्ट के साथ उपयोग करने के लिए छवियां नहीं हैं और आप अपना स्वयं का निर्माण करने में असमर्थ हैं, तो आप उपयुक्त क्लिपआर्ट की खोज कर सकते हैं जो उपयोग करने के लिए स्वतंत्र है।

गेम को अपने वेब पेज पर जोड़ना

मेमोरी गेम की स्क्रिप्ट पांच चरणों में आपके वेब पेज पर जुड़ जाती है।

चरण 1: निम्नलिखित कोड की प्रतिलिपि बनाएँ और नाम की फ़ाइल में सहेजें memoryh.js।

// एकाग्रता मेमोरी गेम इमेजेस के साथ - हेड स्क्रिप्ट // कॉपीराइट स्टीफन चैपमैन, 28 फरवरी 2006, 24 दिसंबर 2009 // आप इस स्क्रिप्ट को कॉपी कर सकते हैं बशर्ते कि आप कॉपीराइट नोटिस को बरकरार रखें

var back = 'back.gif'; var टाइल = ['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'];

फ़ंक्शन रैंडऑर्ड (ए, बी) {रिटर्न (मैथ.राउंड (गणित.क्रमांक) () - 0.5);} var im = []; के लिये (var i = 0; मैं <15; i ++) {im [i] = नई छवि (); im [i]। src = टाइल [i]; टाइल [i] = ''; टाइल [i + 15] = टाइल [i];} फंक्शन डिस्प्लेबैक (i) {document.getElementById ('t' + i) .innerHTML =। '


height = "60" alt = "back" \ />  ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = प्रारंभ करें; फ़ंक्शन प्रारंभ () {के लिए (var i = 0; i <= 29; i ++)
डिस्प्लेबैक (i); क्लीयरइंटरवल (tid); tmr = tno = cnt = =? टाइल.सोर्ट (रैंडऑर्ड)
); CNTR (); tid = setInterval ('cntr ()', 1000);} फ़ंक्शन cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt')। Value =
मिनट + ':' + (सेक <10? '0': '') + सेकंड; tmr ++;} फ़ंक्शन डिस (sel) {if (tno> 1)
{क्लियरटाइम (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
टाइल [sel]; अगर (tno == 0) ch1 = sel; और {ch2 = sel; cid = setTimeout ('कंसीलर) ()
900);} तनो ++;} फंक्शन कन्सिल () {तन्नो = 0; अगर (टाइल [ch1]! = टाइल [ch2])
{displayBack (ch1); displayBack (ch2);} और cnt ++; अगर (cnt> = 15)
ClearInterval (tid) ;;

आप के लिए छवि फ़ाइल नाम बदल देंगे वापस तथा टाइल आपकी छवियों के फ़ाइल नाम के साथ।

अपने ग्राफिक्स प्रोग्राम में अपनी छवियों को संपादित करने के लिए याद रखें ताकि वे सभी 60 पिक्सेल वर्ग हों ताकि उन्हें लोड करने में बहुत समय न लगे (मेरे उदाहरण के लिए उपयोग की जाने वाली 16 छवियों का संयुक्त आकार सिर्फ 4758 बाइट्स है, इसलिए आपको कुल मिलाकर रखने में कोई समस्या नहीं होनी चाहिए 10k)।

चरण 2: नीचे दिए गए कोड का चयन करें और इसे एक फ़ाइल में कॉपी करें जिसे कहा जाता है memory.css।

.blk {चौड़ाई: 70px; ऊंचाई: 70 पीएक्स; छिपा हुआ सैलाब;}

चरण 3: आपके द्वारा बनाई गई दो फ़ाइलों को कॉल करने के लिए अपने वेब पेज के HTML दस्तावेज़ के मुख्य भाग में निम्न कोड डालें।

चरण 4: नीचे दिए गए कोड का चयन करें और कॉपी करें, और फिर इसे एक फ़ाइल में सहेजें memoryb.js।

// एकाग्रता स्मृति खेल छवियों के साथ - शारीरिक स्क्रिप्ट // कॉपीराइट स्टीफन चैपमैन, 28 फरवरी 2006, 24 दिसंबर 2009 // आप इस स्क्रिप्ट को कॉपी कर सकते हैं बशर्ते कि आप कॉपीराइट नोटिस को बरकरार रखें

document.write ( '

सीमा = "0"> '); के लिए (var a = 0; ए <= 5; a ++) {document.write (''), (var b =) के लिए
0; बी <= 4; b ++) {document.write ('id = "टी '+ ((5 * एक) + ख) +'">');} Document.write ('  ');} document.write (' 
onclick = "window.start ()" \ />   ');

चरण 5: अब वह सब कुछ आपके वेब पेज पर गेम को जोड़ना है जहां आप चाहते हैं कि यह आपके HTML दस्तावेज़ में निम्न कोड डालकर दिखाई दे।