🙁 👩🏿‍💻 💑 कैनवास: पंद्रह मिनट पंद्रह 🚤 ⚙️ 🦊

CANVAS कदम से कदम:

एक बच्चे के रूप में, मेरे पास स्पॉट थे, मुझे लगता है कि हर कोई इस पहेली को जानता है। टैग को प्लास्टिक के बक्से में तब तक घुमाना जब तक कि संख्याओं का पोषित क्रम एक बहुत ही रोचक गतिविधि नहीं थी। और अभी हाल ही में, खेल रुचि के क्रम में, मैंने अपने लिए टैग लिखे जो न केवल ब्राउज़र विंडो से खेला जा सकता है, बल्कि एंड्रॉइड या आईओएस चलाने वाले स्मार्टफोन से भी।
हमारे खेल में एक डैडी में पड़ी दो फाइलें शामिल होंगी, पहले हम index.htm का नाम लेंगे, और दूसरा Puzzle15.js
HTML फ़ाइल की सामग्री पूरे पोस्ट में नहीं बदलेगी, और वास्तव में इसे कुछ इस तरह दिखना चाहिए:

<html> <head> <meta charset="utf-8"> <title></title> <script src="puzzle15.js"></script> </head> <body> <canvas id="puzzle15">     - </canvas> <script>init();</script> </body> </html>

हम दूसरी फाइल लिखने में व्यस्त होंगे। इसलिए, शुरू में हम इनिट फ़ंक्शन लिखेंगे, जो हमारे कैनवास को आकार देगा और इसे एक समान रंग के साथ पेंट करेगा, अर्थात। Puzzle15.js की सामग्री होनी चाहिए:

 function init() { var canvas = document.getElementById("puzzle15"); canvas.width = 320; //    canvas.height = 320; var context = canvas.getContext("2d"); context.fillStyle = "#222"; //  "" context.fillRect(0, 0, canvas.width, canvas.height); //   }

यदि आप अपने ब्राउज़र के साथ index.htm फ़ाइल खोलते हैं, तो आप एक गहरे ग्रे आयत देख सकते हैं। टैग के लिए, मैंने एक वर्ग तैयार किया जिसमें सभी खेल तर्क निकाले गए, इस वर्ग को वास्तव में एक फ़ाइल में रखने की आवश्यकता है:

 function game15() { var cellView = null; var numView = null; var arr = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,0]]; var clicks = 0; function getNull() { //      for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (arr[j][i] === 0) { return{"x":i,"y":j}; } } } }; //      function getRandomBool() { if (Math.floor(Math.random() * 2) === 0) { return true; } } //     this.getClicks = function() { return clicks; }; //   ""    this.move = function(x, y) { var nullX = getNull().x; var nullY = getNull().y; if (((x - 1 == nullX || x + 1 == nullX) && y == nullY) || ((y - 1 == nullY || y + 1 == nullY) && x == nullX)) { arr[nullY][nullX] = arr[y][x]; arr[y][x] = 0; clicks++; } }; //    this.victory = function() { var e = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,0]]; var res = true; for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (e[i][j] != arr[i][j]) { res = false; } } } return res; }; //  ""  this.mix = function(stepCount) { var x,y; for (var i = 0; i < stepCount; i++) { var nullX = getNull().x; var nullY = getNull().y; var hMove = getRandomBool(); var upLeft = getRandomBool(); if (!hMove && !upLeft) { y = nullY; x = nullX - 1;} if (hMove && !upLeft) { x = nullX; y = nullY + 1;} if (!hMove && upLeft) { y = nullY; x = nullX + 1;} if (hMove && upLeft) { x = nullX; y = nullY - 1;} if (0 <= x && x <= 3 && 0 <= y && y <= 3) { this.move(x, y); } } clicks = 0; }; //    this.setCellView = function(func) { cellView = func; }; //    this.setNumView = function(func) { numView = func; }; //       this.draw = function(context, size) { for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (arr[i][j] > 0) { if (cellView !== null) { cellView(j * size, i * size); } if (numView !== null) { numView(); context.fillText(arr[i][j], j * size + size / 2, i * size + size / 2); } } } } }; }

अब हमारे खेल को स्थैतिक आयत से व्यावहारिक रूप से काम करने वाले स्थानों में आसानी से बदल दिया जा सकता है

 function init() { var canvas = document.getElementById("puzzle15"); canvas.width = 320; canvas.height = 320; var cellSize = canvas.width / 4; var context = canvas.getContext("2d"); var field = new game15(); //    field.mix(350); //     field.setCellView(function(x, y) { //     context.fillStyle = "#FFB93B"; context.fillRect(x+1, y+1, cellSize-2, cellSize-2); }); field.setNumView(function() { //     context.font = "bold "+(cellSize/2)+"px Sans"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#222"; }); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); }

खैर, यह केवल माउस और स्पर्श घटनाओं के प्रसंस्करण को जोड़ने के लिए रहता है, और हमें टैग का पूरी तरह से काम करने वाला संस्करण मिलता है, इसके लिए, init फ़ंक्शन में, फ़ील्ड की अंतिम पंक्ति (संदर्भ, सेलसाइज़) के बाद, थोड़ा कोड जोड़ें:

  function event(x, y) { //      () field.move(x, y); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); if (field.victory()) { //   ,     alert("  "+field.getClicks()+" !"); //    !! field.mix(300); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); } } canvas.onclick = function(e) { //    var x = (e.pageX - canvas.offsetLeft) / cellSize | 0; var y = (e.pageY - canvas.offsetTop) / cellSize | 0; event(x, y); //    }; canvas.ontouchend = function(e) { //    var x = (e.touches[0].pageX - canvas.offsetLeft) / cellSize | 0; var y = (e.touches[0].pageY - canvas.offsetTop) / cellSize | 0; event(x, y); };

जो उस लिंक के लिए तुरंत खेलना चाहता है।
कोड में कुछ भी जटिल नहीं है, और सब कुछ बहुत जल्दी लिखा जाता है। आइपॉड पर स्पॉट के विचार और फोटो के लिए हॉबीबीट का धन्यवाद।

कैनवास: पंद्रह मिनट पंद्रह

More articles: