👨🏻‍⚕️ 🧑🏽 👩🏾‍🔧 कैनवास का उपयोग करते हुए नाइट 🙋 👨‍👧‍👦 ❓

देखें ।

एक कंपनी में काम करना जहां वे प्रोग्रामिंग और वेबसाइट निर्माण के बारे में बहुत कम समझते हैं, और कार्यों की मुख्य सूची कॉर्पोरेट वेबसाइट पर समाचार को भरना है, कभी-कभी मुझे अधिकारियों से दिलचस्प कार्यों की सूची मिलती है। प्रभावशीलता और उन्हें साइट पर लाने की आवश्यकता के बारे में बहस करना बेकार है, एक उच्च घोंसले की ऊंचाई से, अधिकारियों ने मन की दलीलें नहीं सुनीं, उन्हें उन परियोजनाओं को लेना होगा जो किसी के लिए अनावश्यक हैं और उन्हें बाहर ले जाना है।

इन कार्यों में से एक बन गया है - हॉर्सबैक राइडिंग। इसका सार यह है कि एक बार सभी बोर्ड क्षेत्रों से गुजरने वाले शतरंज के घोड़े का मार्ग खोजना आवश्यक है। मैंने भविष्य में एक प्लगइन बनाने पर विचार करते हुए, कैनवास का उपयोग करके, jQuery के एक बिट को लागू करने का फैसला किया।

मैं अपने कार्यों के सभी तर्क का वर्णन करने की कोशिश करूंगा। सबसे पहले, मेरे सिर में बहुत सारे विचार थे, मैंने खोज इंजनों में थोड़ा सा घूम लिया, और एक बार फिर यह सुनिश्चित कर लिया कि इसे स्वयं लिखना बेहतर है, और सामान्य तौर पर यह ज्ञान को विकसित करने और समेकित करने के लिए उपयोगी होगा, मैंने इस सोच के साथ काम करना शुरू कर दिया कि मुख्य चीज शुरू करना है, और वहां जाना होगा। ।

सामान्य तौर पर, html मार्कअप स्वयं काफी सरल होता है।

<!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="chess"> <canvas id="chess">Updet!</canvas> </div> <div class="info"> <p> : 1<p> <p> : 0<p> </div> </body> <script src="js/jQuery.js"></script> <script src="js/script.js"></script> </html>

शैलियों भी सरल हैं, ध्यान देने योग्य एकमात्र चीज पृष्ठभूमि के माध्यम से भरने के लिए तय की गई एक शतरंज की तस्वीर है।

 * { margin: 0px; padding: 0px; } body, html { height: 100%; } .chess { margin: auto; position: relative; width: 600px; height: 600px; } .chess canvas { margin: 28px 0 0 58px; background: url(../images/chess-block.png) no-repeat; } .kon { position: absolute; width: 52px; height: 98px; background: url(../images/kon.png) no-repeat; }

आगे कोड के साथ, केवल javaScript, हम init इनिशियलाइज़ेशन फंक्शन बनाते हैं, जो एक कैनवास ऑब्जेक्ट बनाएगा। हम 3 वैश्विक तत्व बनाते हैं (जिनमें से 2 सरणियाँ हैं), जो आम तौर पर बहुत अच्छा नहीं है, लेकिन फिर भी कार्यान्वयन परीक्षण है और मुख्य एक काम करता है। मान जो init फ़ंक्शन लेता है, वह क्रमशः शतरंज शूरवीर, x और y के प्रारंभिक और बाद के समन्वय बिंदुओं का होता है, जो x अक्ष और x अक्ष के साथ निर्देशांक के अनुरूप होता है। पहली कॉल पर, वे अपरिभाषित नहीं हैं, इसलिए हम उन्हें प्रारंभिक मानों के साथ समान करते हैं, हमारे मामले में यह 60 (x) और 480 (y) है, जो शतरंज के निचले कोने (A1) के बराबर है।

अगला, हम घोड़े की वर्तमान स्थिति के निर्देशांक को गिरफ्तार सरणी में जोड़ते हैं, यह हमें घोड़े की सभी चालों को याद रखने की अनुमति देगा, ताकि भविष्य में उन पर चलना असंभव हो जाए।

अगला, हम स्वयं कैनवास बनाते हैं, फिर हम संभावित चालें निर्धारित करते हैं, हम यह शतरंज की चौकी पर नाइट की स्थिति के आधार पर करते हैं। सेल अपने आप में ठीक 60px है, इसलिए भाव जैसे [x + 60 * 2, y + 60], यानी शीर्ष पर दो सेल और दाईं ओर एक सेल, जैसा कि हम जानते हैं, घोड़ा "G" अक्षर के साथ जाता है। सभी विकल्पों को v1 सरणी में लिखा जाता है, फिर हम संभावित चालों के माध्यम से सॉर्ट करते हैं और हमारी प्रत्येक संभावित कोशिकाओं में हम एक फ़ंक्शन का उपयोग करते हुए आयत बनाते हैं।

रेक्ट फ़ंक्शन के लिए धन्यवाद, हम उन कक्षों में एक ऑब्जेक्ट भी बनाते हैं जहां घोड़े पहले से ही दौरा कर चुके हैं।

 var ctx; var arr=[];var v1=[]; var error=0; function rect(color, x, y, width, height,opecity) { this.color = color; //   this.x = x; //   this.y = y; //   this.width = width; //  this.height = height; //  this.draw = function() //    { ctx.beginPath(); ctx.globalAlpha = opecity; ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.clear = function(){ ctx.clearRect(this.x, this.y, this.width, this.height); } } function init(p,h){ (p===undefined) ? x=60 : x=p; (h===undefined) ? y=480 : y=h; // 1 - . if (x < 60 ) x = 60;if (x > 480 ) x = 480; if (y < 60 ) y = 60;if (y > 480 ) y = 480; //    arr.push([x,y]); //,   var chess = document.getElementById("chess"); var width = chess.width = 600; var height = chess.height = 600; ctx = chess.getContext('2d'); ctx.clearRect(0,0,width,height); //   (  )  8  v1 = [ [x+60*2, y+60], [x+60*2, y-60], [x+60, y+60*2], [x-60, y+60*2], [x+60, y-60*2], [x-60, y-60*2], [x-60*2, y-60], [x-60*2, y+60] ]; //   for(var v=0;v<v1.length;v++){ if(v1[v][0]>59 && v1[v][0]<481 && v1[v][1]>59 && v1[v][1]<481) { var f = new rect('#ffe800',v1[v][0],v1[v][1],60,60,0.4); f.draw(); } } // ,    for (var i=0;i<arr.length;i++) { var f = new rect('#f00',arr[i][0],arr[i][1],60,60,1); f.draw(); } //  imkago(x,y); } init();

बहुत अंत में, हम फ़ंक्शन इमकोगो (एक्स, वाई) कहते हैं, जो एक शतरंज की बिसात पर एक नाइट बनाता है। यह काफी सरल है, एक चित्र बनाएं और इसे कैनवास में पेस्ट करें। घोड़े की स्थिति init आरंभीकरण कार्यों से ली गई है।

 function imkago(x,y) { var kon = new Image(); kon.src = 'images/kon.png'; kon.onload = function() { ctx.beginPath(); ctx.globalAlpha = 1; ctx.drawImage(kon, x+3, y-45); } }

आखिरी चीज जो करने की आवश्यकता थी, वह घोड़े को स्थानांतरित करने का मौका देना था, और केवल शतरंज के नियमों के अनुसार, अर्थात्, अक्षर "जी", उन कोशिकाओं पर चलने की क्षमता को रोकते हुए, जो घोड़े ने पहले ही दौरा किया था।

सबसे पहले हमें क्लिक की स्थिति मिलती है। सरल गणितीय कार्यों का उपयोग करते हुए, हम शतरंज के पटल पर सटीक निर्देशांक प्राप्त करते हैं। (x = (Math.floor (x / 60)) * 60 और y = (Math.floor (y / 60)) * 60)।

फिर हम लूप के लिए उपयोग करते हुए तुलना करते हैं (var j = 0; j <arr.length; j ++) कोशिकाओं के साथ सरणी में उपस्थिति जहां घोड़े ने उस सेल के निर्देशांक के साथ दौरा किया जो हमें क्लिक करने पर मिला। अगर वे बराबर झूठे हैं।

अंतिम, हम संभावित चालों की एक सरणी के साथ क्लिक करने पर प्राप्त निर्देशांक की तुलना करते हैं, यदि वे मेल खाते हैं, तो हम नाइट के लिए नए निर्देशांक के साथ इनिट फ़ंक्शन को कहते हैं।

  $('#chess').click(function(event){ var x = event.pageX - this.offsetLeft-$('.chess').offset().left; var y = event.pageY - this.offsetTop; x = (Math.floor(x/60))*60; y = (Math.floor(y/60))*60; //,   .   ,   for (var j=0;j<arr.length;j++) { if (arr[j][0]==x && arr[j][1]==y){ error++; $(".info").html("<p> : "+arr.length+"<p><p> : "+error+"<p>"); return false; } } for(var v=0;v<v1.length;v++){ if(v1[v][0]==x && v1[v][1]==y) { init(x,y); } } $(".info").html("<p> : "+arr.length+"<p><p> : "+error+"<p>"); })

जावास्क्रिप्ट कोड पूरी तरह से

javaScript

 var ctx; var arr=[];var v1=[]; var error=0; function rect(color, x, y, width, height,opecity) { this.color = color; //   this.x = x; //   this.y = y; //   this.width = width; //  this.height = height; //  this.draw = function() //    { ctx.beginPath(); ctx.globalAlpha = opecity; ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.clear = function(){ ctx.clearRect(this.x, this.y, this.width, this.height); } } function init(p,h){ (p===undefined) ? x=60 : x=p; (h===undefined) ? y=480 : y=h; // 1 - . if (x < 60 ) x = 60;if (x > 480 ) x = 480; if (y < 60 ) y = 60;if (y > 480 ) y = 480; //    arr.push([x,y]); //,   var chess = document.getElementById("chess"); var width = chess.width = 600; var height = chess.height = 600; ctx = chess.getContext('2d'); ctx.clearRect(0,0,width,height); //   (  )  8  v1 = [ [x+60*2, y+60], [x+60*2, y-60], [x+60, y+60*2], [x-60, y+60*2], [x+60, y-60*2], [x-60, y-60*2], [x-60*2, y-60], [x-60*2, y+60] ]; //   for(var v=0;v<v1.length;v++){ if(v1[v][0]>59 && v1[v][0]<481 && v1[v][1]>59 && v1[v][1]<481) { var f = new rect('#ffe800',v1[v][0],v1[v][1],60,60,0.4); f.draw(); } } // ,   for (var i=0;i<arr.length;i++) { var f = new rect('#f00',arr[i][0],arr[i][1],60,60,1); f.draw(); } //  imkago(x,y); } init(); function imkago(x,y) { var kon = new Image(); kon.src = 'images/kon.png'; kon.onload = function() { ctx.beginPath(); ctx.globalAlpha = 1; ctx.drawImage(kon, x+3, y-45); } } $('#chess').click(function(event){ var x = event.pageX - this.offsetLeft-$('.chess').offset().left; var y = event.pageY - this.offsetTop; x = (Math.floor(x/60))*60; y = (Math.floor(y/60))*60; //,   .   ,   for (var j=0;j<arr.length;j++) { if (arr[j][0]==x && arr[j][1]==y){ error++; $(".info").html("<p> : "+arr.length+"<p><p> : "+error+"<p>"); return false; } } for(var v=0;v<v1.length;v++){ if(v1[v][0]==x && v1[v][1]==y) { init(x,y); } } $(".info").html("<p> : "+arr.length+"<p><p> : "+error+"<p>"); })

सामान्य तौर पर, यह बहुत बोझिल नहीं निकला, लेकिन कोड आदर्श से दूर है और सार्वभौमिक नहीं है। JavaScript में लॉजिक और बेसिक प्रोग्रामिंग की अवधारणा के लिए अधिक उपयुक्त है। मुझे उम्मीद है कि यह लेख किसी के लिए उपयोगी होगा, धन्यवाद।

कैनवास का उपयोग करते हुए नाइट

More articles: