कैनवस पर सांप

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

तो अपने खुद के खेल, परिचित साँप लिखने के लिए विचार पैदा हुआ था।

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

चलो चलते हैं!
कोड jQuery लाइब्रेरी का उपयोग करके लिखा गया है, क्योंकि यह अधिक सुविधाजनक है। पृष्ठ लोड घटना के बाद सभी चर और फ़ंक्शन घोषित किए जाते हैं। हम चर की गणना करते हैं और कुछ डिफ़ॉल्ट सेटिंग्स सेट करते हैं, कैनवास का आकार भी निर्धारित करते हैं और सांप के "शरीर" का निर्धारण करते हैं। जो एक बहुआयामी सरणी होगी। यह विचार है कि सांप का शरीर 9px तक 9px के क्षेत्र के साथ सेक्टरों का एक समूह है, और प्रत्येक सेक्टर का मूल दृश्य के पृथक्करण के लिए 10. 1px "के एकाधिक" सेक्टर के दाईं ओर खींचा नहीं जाएगा।

//  ,     var canvas, context, first_x, first_y, rabbit_pos = new Array(), rabbit_on_field = false, start = true, state = false, g_over = false, direction = 'right'; //      canvas = document.getElementById('mycanvas'); canvas.width = 310; canvas.height = 310; context = canvas.getContext('2d'); //    context.fillStyle = "#CE3429"; //     var snake_sectors = [[10, 50], [20, 50], [30, 50], [40, 50]]; 

खेल मैदान की सीमाओं को प्रदर्शित करने का कार्य, जिसे हम डिफ़ॉल्ट सेटिंग्स की घोषणा के तुरंत बाद कॉल करेंगे।

 //    function field(context){ context.strokeStyle = "#546DEA"; context.lineWidth = 1; context.strokeRect(7, 7, 295, 295); } 

स्नेक आउटपुट फ़ंक्शन, जिसमें अन्य आवश्यक कार्य कहा जाता है।

 //   function snake(){ if(state){ //  ""   //      undefined context.clearRect(first_x, first_y, 9, 9); //  "" :  , / if(start){ //     ,       //   ,   9px  10 for(var i in snake_sectors){ context.fillRect(snake_sectors[i][0], snake_sectors[i][1], 9, 9); } start = false; } else{ //     - "" context.fillRect(snake_sectors.slice(-1)[0][0], snake_sectors.slice(-1)[0][1], 9, 9); } //         if(!rabbit_on_field){ rabbit(); } //     ""  "" var last_x = snake_sectors.slice(-1)[0][0]; var last_y = snake_sectors.slice(-1)[0][1]; first_x = snake_sectors[0][0]; first_y = snake_sectors[0][1]; //        if(direction == 'right'){ var next_x = last_x + 10; if(next_x > 290){ //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([next_x, last_y]); } if(direction == 'down'){ var next_y = last_y + 10; if(next_y > 290){ //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([last_x, next_y]); //     ("" ) } if(direction == 'up'){ var next_y = last_y - 10; if(next_y < 10) { //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([last_x, next_y]); } if(direction == 'left'){ var next_x = last_x - 10; if(next_x < 10) { //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([next_x, last_y]); } //          // .. ""    for(var i = 0; i < snake_sectors.length - 1; i++){ if(snake_sectors.slice(-1)[0][0] == snake_sectors[i][0] && snake_sectors.slice(-1)[0][1] == snake_sectors[i][1]){ //   window.setTimeout(game_over, 700); return false; } } //     //     "" if(!is_catching()) snake_sectors.splice(0, 1); else rabbit(); //   ,   -   setTimeout(snake, 200); // 200 ms } } 

क्रम में। यदि राज्य == सच (खेल की सही / गलत स्थिति शुरू / विराम देता है), तो फ़ंक्शन क्रियाओं की एक श्रृंखला करता है, जिसका वर्णन टिप्पणियों में दिया गया है।
नीचे अन्य सभी कार्य हैं जिन्हें साँप () में कहा जाता है।
संक्षेप में संक्षेप में: खरगोश का निष्कर्ष (इसके निर्देशांक के यादृच्छिक मूल्यों की पीढ़ी के साथ और साँप के "शरीर" में इस तरह के अस्तित्व के लिए जाँच);

 //      function rabbit(){ //    rabbit_pos[0] = math_rand(); rabbit_pos[1] = math_rand(); //       ""  for(var i in snake_sectors){ if(rabbit_pos[0] == snake_sectors[i][0]){ rabbit_pos[0] = math_rand(); } if(rabbit_pos[1] == snake_sectors[i][1]){ rabbit_pos[1] = math_rand(); } } //  ,        context.fillRect(rabbit_pos[0], rabbit_pos[1], 9, 9); rabbit_on_field = true; } 

किसी श्रेणी में यादृच्छिक मानों का फ़ंक्शन-जनरेटर;

 //       //     function math_rand(){ return Math.ceil((Math.random() * 2.9) * 10) * 10; } 

खरगोश के "खाने" के लिए जाँच (खरगोश के निर्देशांक के साथ "सिर" के निर्देशांक);

 //   ""  // ..   ""     function is_catching(){ if(rabbit_pos[0] == snake_sectors.slice(-1)[0][0] && rabbit_pos[1] == snake_sectors.slice(-1)[0][1]) return true; else return false; } 

खेल के अंत की घोषणा और डिफ़ॉल्ट सेटिंग्स पर लौटना (एक नई शुरुआत के लिए);

 // " ",      - //         function game_over(){ //   ,     , //          "Game Over" g_over = true; //     context.clearRect(8, 8, 293, 293); //      context.font='35px Verdana'; context.strokeStyle="#DB733B"; context.strokeText('Game Over!',47,160); //     -   "Game Over!" setTimeout(function(){context.clearRect(8, 8, 293, 293); g_over = false}, 1500); //    -    snake_sectors = [[10, 50], [20, 50], [30, 50], [40, 50]]; state = false; direction = 'right'; start = true; rabbit_on_field = false; } 

"गेमिंग" कुंजी और संबंधित परिणामों को दबाने की घटनाओं को पकड़ना;

 //     ""  document.onkeydown = function(event){ var keyCode; if(event == null){ keyCode = window.event.keyCode; } else{ keyCode = event.keyCode; } switch(keyCode){ // space/ case 32: //     if(!g_over){ //    (continue) state = (!state) ? true : false; //   snake(); } break; // left/  case 37: //    "" if(direction == 'right') return; direction = 'left'; break; // up/  case 38: //    "" if(direction == 'down') return; direction = 'up'; break; // right/  case 39: //    "" if(direction == 'left') return; direction = 'right'; break; // down/  case 40: //    "" if(direction == 'up') return; direction = 'down'; break; default: break; } } 

आप यहां खेल सकते हैं ।

मुझे टिप्पणियों में स्वस्थ आलोचना सुनने में खुशी होगी। आपका ध्यान के लिए धन्यवाद!