💤 🗳️ 🍟 एक टैंक की सवारी - भाग 1 - युद्धक्षेत्र 👓 🙎 🦅

इस खूबसूरत दिन पर, जो बाकियों से अलग नहीं है (यदि आप इस तथ्य को ध्यान में नहीं रखते हैं कि ठंड के मौसम ने इस साल कम से कम कुछ गर्म दिनों में एक बाइक की सवारी करने के लिए सभी सपने चकनाचूर कर दिए थे), मैं एक अच्छे मूड में था। और यह तब भी अच्छा है जब मैंने अपने लैपटॉप पर हैकिन्टोश डालने की निराशा की, और निराशाजनक विचार आया कि अगर मैं iOS के लिए कम से कम कुछ लिखना चाहता हूं, तो मुझे Apple उत्पादों के लिए बचत करने की आवश्यकता है। लेकिन वास्तविक पोस्ट उस बारे में नहीं है, बल्कि एक छोटे खिलौने के छोटे जीवन के बारे में है जिसे हम बनाने की कोशिश करेंगे। ईमानदारी से, अच्छे समय में, मैंने हमारी रचना के पूर्वजों (जो अभी तक अस्तित्व में नहीं है) में बहुत कुछ नहीं खेला है, लेकिन कुछ गर्म यादें अभी भी मेरे दिल में बनी हुई हैं। तो ... टैंक! टैंक्स! BatlTanks! बैटल सिटी!
हम कैनवास में आउटपुट के साथ कैनवास पर लिखेंगे।

0. शुरू करने के बजाय

ठीक है, आपने लिंक पर क्लिक किया और उस बिंदु पर पहुंच गया जिसके बाद कोई वापसी नहीं है, और इसका मतलब है कि आपके पास कम से कम एक बार है, और जो हम बनाते हैं उसका परिणाम देखें। एक नियम के रूप में, जो लोग इस तरह के पदों को पढ़ते हैं वे दो श्रेणियों में आते हैं: पहला वे हैं जो पोस्ट पढ़ते हैं और क्रमिक रूप से कोड स्निपेट (उनके लिए स्वयं पोस्ट) का प्रयास करते हैं, और जो लोग पोस्ट को धाराप्रवाह पढ़ते हैं और अंततः परिणाम को देखना पसंद करते हैं - मैं पोस्ट करूंगा अलग से। जैसा कि आप जानते हैं, HTML फ़ाइलें और जावास्क्रिप्ट नियमित पाठ फ़ाइलों से ज्यादा कुछ नहीं हैं, अगर आपने कभी पहली या दूसरी नहीं लिखी है (जो कि मुझे हैबर के दर्शकों को देखते हुए थोड़ा संदेह है, लेकिन आप कभी नहीं जानते हैं) तो, सिद्धांत रूप में, आप किसी भी ब्लॉक-जैसे प्रोग्राम को भरने के लिए उपयोग कर सकते हैं। इन फ़ाइलों, उदाहरण के लिए, मैं गीन आईडीई में लिखता हूं और यह लगभग हर चीज में मुझे बाहर कर रहा है, परीक्षण के लिए ब्राउज़र या तो विशेष रूप से महत्वपूर्ण नहीं है, इसके लिए केवल एक आवश्यकता है - कि यह अपेक्षाकृत आधुनिक होगा, और अधिमानतः नवीनतम संस्करण। खेल का लेखन चार पदों में विभाजित है:

भाग एक:
0. परिचय के बजाय;
1. हम जो देखना चाहते हैं;
2. खेल फ़ोल्डर संरचना और HTML फ़ाइल;
3. एक नक्शा बनाएँ।
भाग दो:
4. हम टैंक को आबाद करते हैं;
5. हम बच्चे को ~~ट्रे~~ पर्यावरण के लिए सिखाते हैं;
6. हम दीवारों पर गोली मारते हैं।
भाग तीन:
7. दूसरा खिलाड़ी (या कंप्यूटर प्रतिद्वंद्वी);
8. एक मोबाइल डिवाइस चलाने से प्रबंधन (Android, iOS)।

1. हम जो देखना चाहते हैं

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

2. खेल फ़ोल्डर संरचना और HTML फ़ाइल

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

<html> <head> <meta charset = "utf-8"> <title>HTML5Tank</title> <!--      ,        init.js --> <script src="data/init.js"></script> </head> <body> <!--   --> <canvas id="game">?!</canvas> <!--   init,   ,       --> <script>init();</script> </body> </html>

3. एक नक्शा बनाएँ

एक छोटा शैक्षिक कार्यक्रम: एक टाइल एक छोटा टुकड़ा है जिसे खींचा जा सकता है, उदाहरण के लिए, हमारे नक्शे पर, उदाहरण के लिए, एक ईंट की दीवार का टुकड़ा, घास का एक टुकड़ा, आदि। एक टाइलसेट एक छवि है जिस पर सभी आवश्यक टुकड़े क्रमिक रूप से लागू होते हैं।
हम छवि फ़ाइलों का उपयोग नहीं करेंगे, लेकिन एक प्रकार की टाइल होगी, जो कैनवास-बफर पर खींची गई है, जिसमें से हम टुकड़े लेंगे, और उन्हें एक युद्धक्षेत्र बनाते हुए कैनवास पर खींचेंगे। हम आयतों के साथ टाइल के सभी तत्वों को आकर्षित करते हैं ताकि यदि आप चाहें, तो आप उन्हें किसी भी आकार में सेट कर सकते हैं।
सबसे पहले, डेटा फ़ोल्डर में init.js फ़ाइल बनाएं और उसमें init फ़ंक्शन का वर्णन करें, जो कैनवास के आकार को बदलता है और इसे काले रंग में पेंट करता है। यह भी ध्यान देने योग्य है कि हम तुरंत चर सेलसाइज़ का वर्णन करेंगे, जिसमें एक बड़े सेल की चौड़ाई का मूल्य होगा (यह टैंक की चौड़ाई भी है)। डेटा फ़ोल्डर में init.js फ़ाइल बनाएँ और इसमें init फ़ंक्शन का वर्णन करें, जो कैनवास के आकार को बदलता है।

 var size = 32; //    function init () { var canvas = document.getElementById("game"); canvas.width = 16 * size; //    canvas.height = 14 * size; //    var context = canvas.getContext("2d"); //   context.fillStyle = "#000"; //   context.fillRect(0, 0, canvas.width, canvas.height); }

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

 <script src="data/tiles.js"></script>

दरअसल हम टाईल्स.जेएस फाइल बनाएंगे और हमें इसमें ड्राटाइल्स फंक्शन लिखना होगा। Init फ़ंक्शन में, एक नया कैनवास बफर बनाएं, और इसमें टाइलसेट की सामग्री को ड्रा करें। तो, चलो निम्नलिखित init को जोड़ते हैं:

 //  - var tileSetBuffer = document.createElement("canvas"); //     drawTiles(tileSetBuffer); //    ,   ,   ,    //        context.drawImage (tileSetBuffer, canvas.width/2-tileSetBuffer.width/2, canvas.height/2-tileSetBuffer.height/2);

और कुछ प्रकार के प्रभाव के लिए, हमें टाइलें खींचने की जरूरत है:

 //   "" function drawTiles (canvas) { var context = canvas.getContext('2d'); context.globalAlpha = 1; //   var empty = function () { context.fillStyle = '#000'; context.fillRect(0, 0, size/2, size/2); } //   var brick = function () { //     context.fillStyle = "#ffff00"; context.fillRect(0, 0, size/2, size/2); //   context.fillStyle = "#808080"; context.fillRect(0 , 0 , size/2 , size/16); context.fillRect(0 , 0+size/4 , size/2 , size/16); context.fillRect(size/4 , 0 , size/16, size/4 ); context.fillRect(size/16, size/4 , size/16, size/4 ); //     context.fillStyle = "#c0c0c0"; context.fillRect(0 , 3*size/16, size/2 , size/16); context.fillRect(0 , 7*size/16, size/2 , size/16); context.fillRect(3*size/16, 0 , size/16, size/4 ); context.fillRect(0 , 3*size/16, size/16, size/4 ); } //   var hbrick = function () { //    context.fillStyle = "#c0c0c0"; context.fillRect(0, 0, size/2, size/2); //   context.fillStyle = "#808080"; context.beginPath(); context.moveTo(0 , size/2); context.lineTo(size/2, size/2); context.lineTo(size/2, 0 ); context.fill(); //     context.fillStyle = "#fff"; context.fillRect(size/8, size/8, size/4, size/4); } //  - canvas.width = 3 * size/2; //   canvas.height = size/2; //   //   context.save(); empty(0, 0); context.translate(size/2, 0); brick(size/2, 0); context.translate(size/2, 0); hbrick(size, 0); context.restore(); }

यदि आप अभी index.htm फ़ाइल खोलते हैं, तो आप पहला परिणाम देख सकते हैं। कैनवास के केंद्र में ये आयतें हमारे बड़े मानचित्र के छोटे हिस्से हैं, जिन्हें हम अब प्रारूपित करेंगे।
तो, युद्ध के मैदान में 13 टुकड़े 13 मापते हैं। आइए इसे दो-आयामी सरणी के रूप में सेट करें (या बल्कि, जावास्क्रिप्ट की कुछ विशेषताओं के कारण, सरणी का एक सरणी), जो कुछ मूल्यों से भरा होगा। हम सहमत हैं कि 0 यह एक खाली पिंजरा होगा, 1 - एक ईंट ब्लॉक, 2 - एक कंक्रीट ब्लॉक।
मुझे इस तरह की एक सरणी मिली:

 [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1], [2, 2, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 2, 2], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ];

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

 <script src="data/map.js"></script>

Map.js फ़ाइल में, एक नया मानचित्र वर्ग बनाएँ:

 function map () { var arr; //       //   this.setArr = function (a) { arr = a; } //      this.draw = function (canvas, tileSet) { var ctx = canvas.getContext('2d'); canvas.height = 13 * size; canvas.width = 13 * size; ctx.globalAlpha = 1; //          //   1     //  2,    for (var j = 0; j < 26; j++) { for (var i = 0; i < 26; i++) { switch (arr[j][i]) { case 0: ctx.drawImage(tileSet, 0, 0, size/2, size/2, i*size/2, j*size/2, size/2, size/2); break; case 1: ctx.drawImage(tileSet, size/2, 0, size/2, size/2, i*size/2, j*size/2, size/2, size/2); break; case 2: ctx.drawImage(tileSet, size, 0, size/2, size/2, i*size/2, j*size/2, size/2, size/2); break; } } } } }

अब हम init फंक्शन में बदलाव करेंगे, सब कुछ जोड़ने के लिए हमें कैनवास पर एक नक्शा बनाना होगा:

 //  -   var mapBuffer = document.createElement("canvas"); //   field var field = new map(); //  - field.setArr([ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 2, 2, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1], [2, 2, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 2, 2], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]); //     field.draw(mapBuffer, tileSetBuffer); context.save(); context.translate(size/2, size/2); //     context.drawImage (mapBuffer, 0, 0); context.restore();

परिणाम

खैर, मुझे लगता है कि पहली पोस्ट के लिए पर्याप्त है, कोड लगभग उसी समय लिखा गया था जब पोस्ट लिखा गया था, और इसलिए यह कुछ स्थानों पर लंगड़ा कर सकता है। अगली पोस्ट में, हम मानचित्र पर एक टैंक रखेंगे और इसे मानचित्र पर सवारी करने, दीवारों को शूट करने और फाड़ने और कुछ और गंदे चालें करने के लिए सिखाएँगे। खैर, अभी के लिए बस इतना ही। और चूंकि लेखक मैकमिनी के लिए बचत कर रहा है (अपने ग्राफिक हैलोवेयर के साथ ऐपस्टोर को बाढ़ने के लिए), उसे कभी-कभी कुछ पैसे कमाने की आवश्यकता होती है। आप सभी को धन्यवाद।

एक टैंक की सवारी - भाग 1 - युद्धक्षेत्र

0. शुरू करने के बजाय

1. हम जो देखना चाहते हैं

2. खेल फ़ोल्डर संरचना और HTML फ़ाइल

3. एक नक्शा बनाएँ

परिणाम

More articles: