जावास्क्रिप्ट पर कैप्चा "भूलभुलैया" पास करना

एक बहुत प्रसिद्ध ब्राउज़र गेम नहीं है। इसमें गेमप्ले बहुत सरल और नीरस है, जो बॉट्स की उपस्थिति में योगदान देता है। उनका मुकाबला करने के लिए, खेल में एक कैप्चा शुरू किया गया था, कभी-कभी लड़ाई के दौरान बाहर रेंगते हुए। 50 सेकंड का अनुमान लगाया गया है, यदि आप 20 के लिए अनुमान लगाते हैं, तो वे एक अतिरिक्त बोनस देंगे। कैप्चा दो प्रकार के होते हैं: "टट्टू अनुमान करें" और "पास भूलभुलैया"। मुझे आमतौर पर टट्टू का अनुमान लगाने में कोई समस्या नहीं है, लेकिन 20 सेकंड में भूलभुलैया से गुजरना हमेशा एक तुच्छ काम नहीं है। और मैं सोचता था कि क्या यूज़र्सस्क्रिप्ट लिखना संभव होगा जो अपने आप भूलभुलैया के माध्यम से जाएगा और मुझे सही उत्तर बताएगा ...

पहली चीज जिसे आपको शुरू करना चाहिए, वह जानकारी एकत्र करना है। हम भूलभुलैया की उपस्थिति का कारण बनते हैं, स्रोत कोड में चढ़ते हैं, और देखते हैं कि क्या है और कैसे है। वहां हमें सम्मिलित छवि मिलती है, और हम दो बिंदुओं का पता लगाते हैं: सबसे पहले, छवि उसी डोमेन पर है जो खिलौने के रूप में है। यह कैनवास के साथ काम करना आसान बनाता है। दूसरे, यह आईडी = "पहेली" के रूप में है जिसमें यह पहली छवि है। उसी रूप में एक और छवि है।

अस्वीकरण: स्क्रिप्ट jQuery का उपयोग करता है। जूते फेंकना वैकल्पिक है; मुझे पता है कि एक छवि को खींचने के लिए jQuery को जोड़ना इसका अच्छा उपयोग नहीं है। तथ्य यह है कि इस स्क्रिप्ट को दूसरे के हिस्से के रूप में योजनाबद्ध किया गया था जिसमें पहले से ही jQuery का उपयोग किया गया है।

कोड लिखना शुरू करें

$('#riddleform img').load(function(){// -      if (this.src == "http://ehgt.org/v/battle/answer.png") return;//  ,       var rmimg = $('#riddleform img')[0]; var canvas = document.createElement("canvas"); canvas.width = rmimg.width; canvas.height = rmimg.height; var ctx = canvas.getContext("2d"); ctx.drawImage (rmimg, 0, 0); var data = ctx.getImageData(0, 0, canvas.width, canvas.height); }); 

नतीजतन, हमें डेटा चर मिला, जिसमें छवि लोड की गई थी। हम रुक जाते हैं। हम लेबिरिंथ की छवियों को इकट्ठा करना और उन्हें सहेजना शुरू करते हैं।

सभी चित्रों में फॉर्म का एक पता है " hentaiverse.org/riddlemaster.php?uid= [यहाँ उपयोगकर्ता पहचानकर्ता सभी छवियों के लिए समान है] और v = [यहाँ, जाहिरा तौर पर, md5 हैश]।" उदाहरण के लिए, " hentaiverse.org/riddlemaster.php?uid=123456&v=834a6b57de2d4e6d777478d7c2803d664293e7ecec "।

लगभग दस चित्रों को एकत्र करके, उन्हें खोलें और उन पर विचार करना शुरू करें।



(चित्र कम किए गए)

तो, छवि शोर है, यह प्रकाश त्रिकोण को पारित नहीं कर सकता है, जो निचले बाएं कोने में है, और अंधेरे त्रिकोण, जो ऊपरी बाएं कोने में स्थित है। दोनों उपस्थित हो सकते हैं। एक भी नहीं हो सकता है। प्रवेश और निकास हमेशा एक ही स्थान पर होते हैं। सभी चित्र समान आकार (615x615) के हैं, और ये सभी jpg प्रारूप में हैं।

बड़ी छवियों का एक गुच्छा लेख को सजाने नहीं देगा, इसलिए मैं केवल लिंक डालूंगा।
habrastorage.org/storage2/bfe/dcc/6a0/bfedcc6a0dc3b80e44d372a4b6660411.jpg
habrastorage.org/storage2/5c1/b6e/7c3/5c1b6e7c3fb4db6e547b95ecf0d5d81c.jpg
habrastorage.org/storage2/e85/6bc/c1e/e856bcc1ee6542acc66ab03601901eff.jpg
habrastorage.org/storage2/48d/535/62e/48d53562e8edb7d787419a726a5fea77.jpg
habrastorage.org/storage2/001/c2e/d34/001c2ed34a22d82fd467c3fcd36993e7.jpg
habrastorage.org/storage2/eca/80a/75a/eca80a75a60b41498f3d847afc207e71.jpg

अधिक दिलचस्प है। यह देखना आसान है कि शोर सभी छवियों में समान है। इसके अलावा, हालांकि "दीवारों" के रंग छवि से छवि में भिन्न होते हैं, "पटरियों" का रंग हमेशा समान होता है। यदि आप बारीकी से देखते हैं, तो यह स्पष्ट हो जाएगा कि सभी लेबिरिंथ में अधिकांश कोशिकाएं समान हैं।



काले वर्ग कोशिकाओं को निरूपित करते हैं जो हमेशा निष्क्रिय होते हैं । लाल बिंदु केंद्रीय सेल को इंगित करता है। विकर्ण पर काले बिंदुओं के बीच स्थित कोशिकाएं हमेशा व्यस्त रहती हैं। वे हमारे लिए दिलचस्प नहीं हैं। हम खाली या व्यस्त ही horizontals और काले डॉट्स के रूप में कार्यक्षेत्र पर स्थित कोशिकाओं यह पता लगाने की जरूरत है।

पहला विचार जो मन में आता है वह है “शोर एक ही है, सेल का रंग भी। हम सेल में कोई भी पिक्सेल ले सकते हैं और उसका रंग देख सकते हैं। ” हालांकि, यह काम नहीं करता है। अधिक विस्तृत अध्ययन से पता चलता है कि शोर बिल्कुल समान नहीं है। इसके अलावा, के लिए प्रत्येक कोशिका क्या यह फूल हो सकता है यह पता लगाने की एक पिक्सेल का चयन करने के लिए होता है, त्रिकोण पर विचार करें; संक्षेप में: बहुत उपद्रव।

कोशिकाओं के भूलभुलैया में 37x37 कोशिकाएं हैं। एक सरणी बनाएं जिसमें हम इस भूलभुलैया को लोड करते हैं।

 var clear = []; for (var tmp=0; tmp<38; ++tmp) clear[tmp] = []; for (var r=1; r<38;++r){ for (var t=1; t<38; ++t){ if ((r%2 == 1) && (t%2 == 1)){clear[r][t] = true;continue;} if ((r%2 == 0) && (t%2 == 0)){clear[r][t] = false;continue;} } } टी] सच =; जारी रखने के लिए;} var clear = []; for (var tmp=0; tmp<38; ++tmp) clear[tmp] = []; for (var r=1; r<38;++r){ for (var t=1; t<38; ++t){ if ((r%2 == 1) && (t%2 == 1)){clear[r][t] = true;continue;} if ((r%2 == 0) && (t%2 == 0)){clear[r][t] = false;continue;} } } टी] झूठी =; जारी रखने के लिए;} var clear = []; for (var tmp=0; tmp<38; ++tmp) clear[tmp] = []; for (var r=1; r<38;++r){ for (var t=1; t<38; ++t){ if ((r%2 == 1) && (t%2 == 1)){clear[r][t] = true;continue;} if ((r%2 == 0) && (t%2 == 0)){clear[r][t] = false;continue;} } } 

यह पता लगाने के लिए रहता है कि खाली कोशिकाओं को कब्जे वाले लोगों से कैसे अलग किया जाए। यदि हम एक समय में एक पिक्सेल का चयन नहीं कर सकते हैं, तो हम सभी का चयन करेंगे: जोड़ें और विभाजित करें। कोशिकाओं को गलाना, सीधे शब्दों में कहें। आइए फिर से करीब से देखें। कक्ष आकार में 15x15 पिक्सेल हैं।

 var sum = [0,0,0]; var amount = 0;//      for (var j=t*15; j<t*15+15; ++j){ for (var k=r*15; k<r*15+15; ++k){ sum[0] += data.data[getrdata(j, k)];//getrdata     ,   sum[1] += data.data[getrdata(j, k)+1];//      , sum[2] += data.data[getrdata(j, k)+2];//    ,  1  2. ++amount; } } sum[0] = Math.round(sum[0]/amount); sum[1] = Math.round(sum[1]/amount); sum[2] = Math.round(sum[2]/amount); , ट) 2]; // var sum = [0,0,0]; var amount = 0;//      for (var j=t*15; j<t*15+15; ++j){ for (var k=r*15; k<r*15+15; ++k){ sum[0] += data.data[getrdata(j, k)];//getrdata     ,   sum[1] += data.data[getrdata(j, k)+1];//      , sum[2] += data.data[getrdata(j, k)+2];//    ,  1  2. ++amount; } } sum[0] = Math.round(sum[0]/amount); sum[1] = Math.round(sum[1]/amount); sum[2] = Math.round(sum[2]/amount); 

यह पता लगाने के लिए रहता है कि कौन से रंग खाली कोशिकाओं के अनुरूप हैं। स्वच्छ, प्रकाश, काले, और "प्रकाश अंधेरे", पर त्रिकोण दिखाई दिया है कि क्या है, जिनमें से मैं शुरुआत में बात की थी निर्भर करता है: वहाँ चार प्रकार के होते हैं। सौभाग्य से, ऐसी कोई कोशिकाएं नहीं हैं जो इन त्रिभुजों की सीमा पर हैं। संक्षेप में: रंगों को एक दिवा बनाकर प्राप्त किया गया था जिसमें कोशिकाओं के सभी रंगों को फेंक दिया गया था। तब आवश्यक लोगों को वहां से चुना गया था। कुछ समय के लिए, स्क्रिप्ट को तब समायोजित किया गया था जब यह एक अगम्य भूलभुलैया में आया था।

 if ( (sum[0]>190)&&(sum[0]<202) && (sum[1]>170)&&(sum[1]<183) && (sum[2]>130)&&(sum[2]<145) ){//normal clear[r][t] = true; }else if ( (sum[0]>148)&&(sum[0]<160) && (sum[1]>135)&&(sum[1]<143) && (sum[2]>103)&&(sum[2]<114) ){//dark clear[r][t] = true; }else if ( (sum[0]>203)&&(sum[0]<213) && (sum[1]>190)&&(sum[1]<197) && (sum[2]>157)&&(sum[2]<169) ){//light clear[r][t] = true; }else if ( (sum[0]>171)&&(sum[0]<180) && (sum[1]>158)&&(sum[1]<167) && (sum[2]>133)&&(sum[2]<143) ){//grey clear[r][t] = true; }else{ clear[r][t] = false; } 

एक ट्रिफ़ल बचा है: भूलभुलैया के माध्यम से जाने के लिए। यह एक पुनरावर्ती एल्गोरिदम बना देगा।

 function makeway(x,y,data){ if ((y == 11)&&(x == 37)) return 'A';//    A if ((y == 27)&&(x == 37)) return 'B';//   if ((y == 37)&&(x == 11)) return 'D'; if ((y == 37)&&(x == 27)) return 'C'; var t = ''; if (x<37 && data [x+1][y]) {data [x+1][y] = false; t = makeway (x+2, y, data);}//   ... if (t != '') return t; if (x>1 && data [x-1][y]) {data [x-1][y] = false; t = makeway (x-2, y, data);}// ... if (t != '') return t; if (y<37 && data [x][y+1]) {data [x][y+1] = false; t = makeway (x, y+2, data);} if (t != '') return t; if (y>1 && data [x][y-1]) {data [x][y-1] = false; t = makeway (x, y-2, data);} if (t != '') return t; return '';//   } x + function makeway(x,y,data){ if ((y == 11)&&(x == 37)) return 'A';//    A if ((y == 27)&&(x == 37)) return 'B';//   if ((y == 37)&&(x == 11)) return 'D'; if ((y == 37)&&(x == 27)) return 'C'; var t = ''; if (x<37 && data [x+1][y]) {data [x+1][y] = false; t = makeway (x+2, y, data);}//   ... if (t != '') return t; if (x>1 && data [x-1][y]) {data [x-1][y] = false; t = makeway (x-2, y, data);}// ... if (t != '') return t; if (y<37 && data [x][y+1]) {data [x][y+1] = false; t = makeway (x, y+2, data);} if (t != '') return t; if (y>1 && data [x][y-1]) {data [x][y-1] = false; t = makeway (x, y-2, data);} if (t != '') return t; return '';//   } x- function makeway(x,y,data){ if ((y == 11)&&(x == 37)) return 'A';//    A if ((y == 27)&&(x == 37)) return 'B';//   if ((y == 37)&&(x == 11)) return 'D'; if ((y == 37)&&(x == 27)) return 'C'; var t = ''; if (x<37 && data [x+1][y]) {data [x+1][y] = false; t = makeway (x+2, y, data);}//   ... if (t != '') return t; if (x>1 && data [x-1][y]) {data [x-1][y] = false; t = makeway (x-2, y, data);}// ... if (t != '') return t; if (y<37 && data [x][y+1]) {data [x][y+1] = false; t = makeway (x, y+2, data);} if (t != '') return t; if (y>1 && data [x][y-1]) {data [x][y-1] = false; t = makeway (x, y-2, data);} if (t != '') return t; return '';//   } y + function makeway(x,y,data){ if ((y == 11)&&(x == 37)) return 'A';//    A if ((y == 27)&&(x == 37)) return 'B';//   if ((y == 37)&&(x == 11)) return 'D'; if ((y == 37)&&(x == 27)) return 'C'; var t = ''; if (x<37 && data [x+1][y]) {data [x+1][y] = false; t = makeway (x+2, y, data);}//   ... if (t != '') return t; if (x>1 && data [x-1][y]) {data [x-1][y] = false; t = makeway (x-2, y, data);}// ... if (t != '') return t; if (y<37 && data [x][y+1]) {data [x][y+1] = false; t = makeway (x, y+2, data);} if (t != '') return t; if (y>1 && data [x][y-1]) {data [x][y-1] = false; t = makeway (x, y-2, data);} if (t != '') return t; return '';//   } y- function makeway(x,y,data){ if ((y == 11)&&(x == 37)) return 'A';//    A if ((y == 27)&&(x == 37)) return 'B';//   if ((y == 37)&&(x == 11)) return 'D'; if ((y == 37)&&(x == 27)) return 'C'; var t = ''; if (x<37 && data [x+1][y]) {data [x+1][y] = false; t = makeway (x+2, y, data);}//   ... if (t != '') return t; if (x>1 && data [x-1][y]) {data [x-1][y] = false; t = makeway (x-2, y, data);}// ... if (t != '') return t; if (y<37 && data [x][y+1]) {data [x][y+1] = false; t = makeway (x, y+2, data);} if (t != '') return t; if (y>1 && data [x][y-1]) {data [x][y-1] = false; t = makeway (x, y-2, data);} if (t != '') return t; return '';//   } 

तब यह केवल दस्तावेज़ और कॉल में एक div बनाने के लिए रहता है

 answerdiv.innerHTML = makeway (1, 1, clear); 

इस तथ्य पर ध्यान दें कि हम "पिंजरे के माध्यम से कूद रहे हैं।" एक नि: शुल्क पड़ोसी सेल, तो हम इसके माध्यम से कूद, क्योंकि मैं जानता हूँ कि वास्तव में क्या है कि सेल मुक्त है: यह काले बिन्दुओं वाले कोशिकाओं से एक है।

यह सब अद्भुत है, लेकिन इस तरह का कोड बहस के लिए बहुत सुविधाजनक नहीं है। तो वह टूट गया, एक मार्ग नहीं मिला, क्योंकि वह सेल को मुफ्त में नहीं पहचानता था। प्रश्न: वह कहाँ टूट गया था? आइए स्क्रिप्ट का विस्तार करें। माकवे फ़ंक्शन आर्गुमेंट्स के लिए ctx वैरिएबल जोड़ें, और शुरुआत में ...

 ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect (y*15,x*15,15,15); 

... और पास की गई काली को रंग दें। स्क्रिप्ट कोड में जोड़ें ...

 $('body')[0].appendChild(canvas); 

... और चक्र में, मुफ्त कोशिकाओं की जांच के तुरंत बाद ...

 ctx.fillStyle = "rgb(" + sum[0] + ',' + sum[1] + ',' + sum[2] + ")"; ctx.fillRect (t*15,r*15,15,15); 

अब यह बहुत ही कैनवास दस्तावेज़ में दिखाई देगा, जो उदाहरण के लिए, इस तरह दिखाई दे सकता है:

यह केवल पेंट में छवि को खोलने के लिए बनी हुई है, एक अगम्य सेल में एक विंदुक को पोक करें, और उसका रंग देखें।
और निष्कर्ष में, मैं कई छवियों और एक html फ़ाइल के साथ संग्रह के लिए एक लिंक छोड़ता हूं जिसमें आप वांछित छवि सम्मिलित कर सकते हैं और परिणाम को देख सकते हैं, साथ ही साथ कई कार्यशील फाइलें: dl.dropbox.com/u/42049925/rm.zip