💷 😑 🔓 भौतिकी सांप। खरोंच से। एक भाग 🧜🏿 🚚 📀

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

Index.html से शुरू करते हैं

कोड को देखो

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="css/main.css" type="text/css" /> </head> <body> <div id="container"> <div id="bg"></div> <canvas id="canvas" width="900" height="600"></canvas> </div> <script src="js/LAB.min.js" type="text/javascript"></script> <script type="text/javascript"> $LAB .script("js/engine/CustomEvent.js").wait() .script("js/engine/Body.js").wait() .script("js/engine/World.js") .script("js/Bonus.js") .script("js/EnemyCloud.js") .script("js/Hero.js") .script("js/mainApp.js"); </script> </body> </html>

हम समापन बॉडी टैग से पहले स्क्रिप्ट शामिल करते हैं।

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

हमारे पास बहुत सारी फाइलें हैं। आदर्श रूप में, सब कुछ को एक फाइल में छोड़ दिया जाना चाहिए। या फ़ाइलों की एक जोड़ी के अधिकतम समूह। हम बाकी स्क्रिप्ट फ़ाइलों को लोड करने के लिए LAB.js लाइब्रेरी का उपयोग करेंगे।
हम समानांतर में फाइलें अपलोड करते हैं।

हम LAB.js का उपयोग करते हैं (या उदाहरण के लिए आप LazyLoad.js, आदि का उपयोग कर सकते हैं)। यह हमें स्क्रिप्ट फ़ाइलों को समानांतर में लोड करने की अनुमति देता है (जैसा कि आपको याद है, यह ऊपर कहा गया था कि प्रत्येक स्क्रिप्ट प्रविष्टि टैग, निर्माण स्टॉप पर, अर्थात् सभी स्क्रिप्ट उत्तराधिकार में लोड किए जाते हैं) प्लस हम लोडिंग को नियंत्रित कर सकते हैं (उदाहरण के लिए, प्रतीक्षा फ़ंक्शन)। उदाहरण के लिए, हम उपयोग नहीं कर सकते, कहते हैं, jQuery प्लगइन, जब jQuery ने अभी तक लोड नहीं किया है, तो निश्चित रूप से, हम jQuery को रोकते हैं, और जैसे ही यह लोड होता है, सब कुछ आगे बढ़ जाएगा।

MainApp.js फ़ाइल पर जाएँ

कोड को देखो

 (function() { var game = { images: [ { url: 'images/en_blue.png' }, { url: 'images/en_white.png' }, { url: 'images/en_red.png' } ], loadCount: 0, load: function() { var self = this, max = this.images.length; for (var i = max; i--;) { this.images[i].img = new Image(); this.images[i].img.onload = function () { self.loadCount++; if (self.loadCount == max) { self.loadComplete(); } } this.images[i].img.src = this.images[i].url; } }, loadComplete: function() { this.initControll().initGame().startLoop(); }, canvas: document.getElementById('canvas'), config: { fps: 1000/30, stageW: 900, stageH: 600 }, bodies: [], enemies: [], bonuses: [], initControll: function() { var handlers = this.controllHandlers(); if (document.documentElement.addEventListener) { document.body.addEventListener('keydown', handlers.keyDown); document.body.addEventListener('keyup', handlers.keyUp); } else { document.body.attachEvent('keydown', handlers.keyDown); document.body.attachEvent('keyup', handlers.keyUp); } return this; }, controllHandlers: function() { var self = this; return { keyDown: function(e) { self.keyDownControll(e.keyCode); }, keyUp: function(e) { self.keyUpControll(e.keyCode); } } }, initGame: function() { //-- world this.world = new World(this.canvas, this.config.stageW, this.config.stageH); //-- bonuses this.initBonuses(); //-- enemies this.initEnemies(); //-- Hero this.hero = new Hero(); this.world.addChild(this.hero.body); this.hero.initTales(this.world); return this; }, initBonuses: function() { var self = this, all = 20, good = 10, offset = 20; for (var i = 0; i < all; i++) { if (i < good) { this.bonuses.push(new Bonus({ x: offset + Math.random()*(self.config.stageW - 2*offset) , y: Math.random()*self.config.stageH, bonuseType: true, radius: Math.random()*1+2 })); } else { this.bonuses.push(new Bonus({ x: offset + Math.random()*(self.config.stageW - 2*offset) , y: Math.random()*self.config.stageH, bonuseType: false, radius: Math.random()*1+2 })); } this.world.addChild(this.bonuses[i].body); } }, initEnemies: function() { var enemiesData = [ { x: 10, y: 470, speed: 3 }, { x: 10, y: 300, speed: 2 }, { x: 10, y: 130, speed: 1 } ]; for (var i=0, max = enemiesData.length; i < max; i++) { this.enemies.push(new EnemyCloud({ x: enemiesData[i].x, y: enemiesData[i].y })); this.enemies[i].body.speed.default_x = enemiesData[i].speed; this.world.addChild(this.enemies[i].body); //--bonuses this.enemies[i].bonuses = this.bonuses; this.enemies[i].world = this.world; } }, keyDownControll: function(_keyCode) { switch (_keyCode) { case 37: this.hero.controll.left = true; break; case 39: this.hero.controll.right = true; break; default: break; } }, keyUpControll: function(_keyCode) { switch (_keyCode) { case 37: this.hero.controll.left = false; break; case 39: this.hero.controll.right = false; break; default: break; } }, startLoop: function() { var self = this; this.enterFrame = setInterval(function() { self.loop(); }, this.config.fps); }, loop: function() { var hero = this.hero, enemies = this.enemies, bonuses = this.bonuses; this.world.update(); //-- controll hero if (hero.controll.left) { hero.speed.angle -= hero.speed.rotation; } if (hero.controll.right) { hero.speed.angle += hero.speed.rotation; } hero.body.speed.x = hero.speed.x*Math.cos(Math.PI*hero.speed.angle/180); hero.body.speed.y = hero.speed.y*Math.sin(Math.PI*hero.speed.angle/180); for (var i = 0, maxI = enemies.length; i<maxI; i++) { enemies[i].body.position.x += enemies[i].body.speed.default_x; if (enemies[i].body.position.x > this.config.stageW - enemies[i].body.config.width) { enemies[i].body.speed.default_x = -enemies[i].body.speed.default_x; } if (enemies[i].body.position.x < 0) { enemies[i].body.speed.default_x = -enemies[i].body.speed.default_x; } } for (var j = 0, maxJ = bonuses.length; j<maxJ; j++) { if (bonuses[j].body.userData.bonuseType) { bonuses[j].body.position.y += bonuses[j].speed.y; if (bonuses[j].body.position.y > this.config.stageH - 5) { bonuses[j].body.position.y = 5; } } } hero.enterFrame(); } }; game.load(); })();

अंक पर:
हम एक अनाम फ़ंक्शन में सब कुछ लपेटते हैं और इसे कॉल करते हैं।

जावास्क्रिप्ट का दायरा फ़ंक्शन द्वारा निर्धारित किया जाता है। एक फ़ंक्शन में परिभाषित एक चर बाहर दिखाई नहीं देगा (यह वैश्विक नामस्थान को रोक नहीं देगा)। इसके अलावा, यदि आप अभी भी एक चर को परिभाषित नहीं करते हैं, लेकिन तुरंत इसका उपयोग करें, उदाहरण के लिए:
 function myFunc() { a = 123; } 
यह वैश्विक (वैश्विक ऑब्जेक्ट की संपत्ति) बन जाता है, यह वही चीज है जिसे आप लिखेंगे
 function myFunc() { window.a = 123; } 
जो, जैसा कि आप जानते हैं, कुछ बिंदु पर एक नाम संघर्ष होगा।

खेल ही खेल का उद्देश्य प्रतीत होता है, अर्थात यहाँ हम नाम स्थान "खेल" कह सकते हैं। यह सब कहां से शुरू होता है? यह सही है, पूर्व-लोडिंग छवियों के साथ। इसलिए, केवल एक चीज जिसे हमने बुलाया है वह है

  game.load();

हम इसे देखते हैं, पहली चीज जो हम देखते हैं:

  var self = this, max = this.images.length; for (var i = max; i--;) {

तो: हमारी वस्तु (खेल) के लिए लिंक को बचाया।
यह हमें कहां ले जाता है?

यह उस समय परिभाषित किया जाता है जब फ़ंक्शन कहा जाता है। उसी कॉल को याद करें, aplly जो कॉल संदर्भ को स्पष्ट रूप से परिभाषित करती है। संदर्भ, अर्थात्, वस्तु इस ओर इशारा करती है। हमारे मामले में, हम ऑनलोड फ़ंक्शन देखते हैं, अगर हम इसे चालू करते हैं, तो यह HTMLImageElement (छवि को लोड किया गया) को संदर्भित करेगा।

हम आगे देखते हैं, सरणी की लंबाई प्राप्त करते हैं, और फ़ॉर्म को एक लूप लिखते हैं: के for (var i = max; i--;) {
साइकिल की गति

सबसे धीमा चक्र
 for in 
(मुझे लगता है कि यह स्पष्ट है कि क्यों), साथ ही यह यादृच्छिक क्रम में गुणों पर पुनरावृत्ति करता है, जो अक्सर तार्किक त्रुटियों का कारण बन सकता है, इसलिए हम इसका उपयोग केवल तब करते हैं जब आपको ऑब्जेक्ट के सभी (और ज्ञात नहीं) गुणों को प्राप्त करने की आवश्यकता होती है। अगला रूप का एक चक्र है
  for (var i = 0; i<this.images.length; i++;) { 
यहाँ, किसी कारण से, हम प्रत्येक पुनरावृत्ति की लंबाई की पुनरावृत्ति करते हैं (हालाँकि अधिकांश लोग किसी कारण से इससे परेशान नहीं होते हैं, और वे लगातार ऐसा लिखते हैं, हालाँकि (मेरे अनुभव में, एक समाप्त सरणी को छाँटते हुए) केवल मामलों के एक बहुत छोटे हिस्से में, यह लंबाई बदल सकती है। यात्रा का समय)।
अगला (तार्किक रूप से) जाता है
  for (var i = 0, max = this.images.length; i<max; i++;) { 
हमें लंबाई केवल एक बार मिलती है।
खैर, अंत में (जैसा कि यह निकला, अंत से सरणी पर पुनरावृत्ति शुरू से तेज है), ठीक है, हम हैं:
  for (var i = this.images.length; i>0; i--;) { 
और भी सुंदर:
  for (var i = this.images.length; i--;) { 

हम आगे देखते हैं, हमने ऑनलोड हैंडलर स्थापित किया है, इसके बाद हम चित्र लोड करना शुरू करते हैं

 this.images[i].img.src = this.images[i].url;

सबसे पहले, घटना के श्रोता, फिर घटना।

यदि आप इन पंक्तियों के क्रम को बदलते हैं (सब कुछ ठीक लग रहा है, तो निश्चित रूप से चित्र को लोड करने का समय नहीं मिलेगा जब तक कि दुभाषिया अगली पंक्ति तक नहीं पहुंचता) सब कुछ काम करेगा। लगभग हर जगह। हां, आपने यह अनुमान लगाया है, पहले से ही IE8 आपको वह सब कुछ बता देगा जो वह आपके बारे में सोचता है। इसलिए, हम इसका पालन करते हैं।

डाउनलोड पूरा होने पर, नियंत्रण को आरंभ किया जाएगा, कुछ गेम डेटा, चक्र शुरू होता है

  loadComplete: function() { this.initControll().initGame().startLoop(); }

सुंदर और सरल ।

इन कार्यों के लिए आगे बढ़ने से पहले, कोड यह भी दिखाता है:

  canvas: document.getElementById('canvas'), config: { fps: 1000/30, stageW: 900, stageH: 600 }

हम HTML तत्वों के लिंक बनाते हैं जो अक्सर उपयोग किए जाएंगे।

DOM ऑपरेशंस सबसे धीमे होते हैं। यदि मैं हर फ्रेम में DOM पर जाता हूं और मुझे जिस कैनवास की आवश्यकता है, वह क्या होगा? और यदि आप अभी भी (जिसे हम सभी प्यार करते हैं) jQuery के साथ, $ ('# कैनवास') - और यह एक लूप में है, तो jQuery ऑब्जेक्ट्स का निर्माण भी जोड़ा जाता है। सामान्य तौर पर, हम सभी समझते हैं कि यह बुराई है।

हम कॉन्फ़िगरेशन फ़ील्ड में सभी सेटिंग्स निकालते हैं (यहां सब कुछ स्पष्ट है)।

हम कीबोर्ड नियंत्रण के आरंभीकरण को देखते हैं

कोड को देखो

  initControll: function() { var handlers = this.controllHandlers(); if (document.documentElement.addEventListener) { document.body.addEventListener('keydown', handlers.keyDown); document.body.addEventListener('keyup', handlers.keyUp); } else { document.body.attachEvent('keydown', handlers.keyDown); document.body.attachEvent('keyup', handlers.keyUp); } return this; }, controllHandlers: function() { var self = this; return { keyDown: function(e) { self.keyDownControll(e.keyCode); }, keyUp: function(e) { self.keyUpControll(e.keyCode); } } }, keyDownControll: function(_keyCode) { switch (_keyCode) { case 37: this.hero.controll.left = true; break; case 39: this.hero.controll.right = true; break; default: break; } }, keyUpControll: function(_keyCode) { switch (_keyCode) { case 37: this.hero.controll.left = false; break; case 39: this.hero.controll.right = false; break; default: break; } }

बहुत कुछ लिखा है, बहुत ही शानदार, नहीं? क्यों नहीं ऐसा ही कुछ करना है index.html फ़ाइल में

 <body onkeydown="eventHandler">

और इसी तरह।
विनीत जावास्क्रिप्ट लेखन

आप इस बारे में बहुत बात कर सकते हैं, आइए वीका से शुरू करें संक्षेप में, निचला रेखा यह है कि सब कुछ विभाजित होना चाहिए।

हम देखते हैं, पहले हमने IE पर जाँच की थी, और, मैं लिख सकता था

 if (navigator.userAgent.indexOf(' MSIE') ! == -1) {

लेकिन यह एक विरोधी पैटर्न है (यदि हम पहले से ही सही कोड के बारे में बात कर रहे हैं), उदाहरण के लिए हम
addEventListener विधि की जरूरत है ,

यह केवल एक प्रकार की जाँच है
 if (document.documentElement.addEventListener) { 
हमसे कुछ कह सकते हैं।

और घटना के "छुटकारा" के लिए यहां सभी कार्यों की आवश्यकता थी।
घटनाओं से "Unfasten"।

हम लाइन को देखते हैं:
 self.keyDownControll(e.keyCode); 
यहाँ मैं लिए लिंक नहीं .keyCode रहा हूँ, लेकिन .keyCode , अर्थात, अगर मुझे अचानक कीबोर्ड की घटनाओं पर "मैन्युअल रूप से" कार्रवाई करने की आवश्यकता है, तो मैं सिर्फ उदाहरण के लिए, game.keyDownControll (37) लिखता हूं;

भौतिकी के बारे में:

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

 initGame: function() { this.world = new World(this.canvas, this.config.stageW, this.config.stageH); this.hero = new Hero(); this.world.addChild(this.hero.body); },

ठीक है, दुनिया बनाई, कैनवास पारित किया, जहां सब कुछ खींचा जाएगा, चौड़ाई, दुनिया की ऊंचाई। हमने हीरो वर्ग का एक ऑब्जेक्ट बनाया, इसके भौतिक घटक "शरीर" को दुनिया में जोड़ें।

  this.world.addChild(this.hero.body);

हम देखते हैं कि हम शरीर को कैसे आरंभ करते हैं।

  this.body = Body.create('Circle', { x: 20, y: 20, radius: 18, gravity: 0.1, bgColor: "#eeeeee", fade: { x: 0.999, y: 0.999 } });

शरीर इंजन का मुख्य वर्ग है, Body.create एक कारखाना विधि है , यह हमें अलग-अलग बनाने की अनुमति देता है (हमारे पास अभी तक उनमें से बहुत सारे नहीं हैं) शरीर। हमने एक घेरा बनाया है। और उन्होंने सेटिंग्स के साथ ऑब्जेक्ट को पास किया। चरों के नाम से, मुझे लगता है कि यह स्पष्ट है कि इसके लिए क्या जिम्मेदार है।
प्रस्तुत वस्तु

हम हमेशा एक ऑब्जेक्ट पास करते हैं (जब तक कि पारित किए गए मापदंडों की संख्या 2 से अधिक होने की योजना नहीं है), तो आपको बहुत लोकप्रिय (शुरुआती के बीच) चीजें करने की ज़रूरत नहीं है, जैसे:
 myFunc(null, null, null, null, null, 123, null, 'string_lol'); 
(तो, कहीं आप पैरामीटर के आदेश को याद नहीं किया?) और यह भी स्पष्ट है।

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

 startLoop: function() { var self = this; this.enterFrame = setInterval(function() { self.loop(); }, this.config.fps); }, loop: function() { var hero = this.hero, enemies = this.enemies, bonuses = this.bonuses; this.world.update(); //...

पूरे खेल के लिए मेरे पास केवल एक निरंतर टाइमर (this.enterFrame) है।

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

जैसा कि आप देख सकते हैं, मैं इसे कॉल करता this.world.update(); हर फ्रेम, यह पूरी दुनिया को अपडेट करता है, टकरावों के परिणाम देता है, और इसी तरह।
यह स्पष्ट है कि पूरा प्रदर्शन इस फ़ंक्शन द्वारा लिया जाएगा, क्योंकि प्रत्येक फ्रेम को कहा जाता है, इसलिए आपको इसे यथासंभव "सही" (जितना संभव हो) बनाने की आवश्यकता है, जैसा कि हम देख सकते हैं, मैं तुरंत

  hero = this.hero, enemies = this.enemies, bonuses = this.bonuses;

मैं स्थानीय लोगों को वैश्विक चर देता हूं।
चर और दुभाषिया।

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

हम टकराव की घटना को भी परिभाषित करना चाहते थे कि वास्तव में किसका सामना करना है।
हम हीरो वर्ग को देखते हैं, घटनाओं को शुरू करने के लिए एक समारोह

 Hero.prototype.initEvents = function() { var self = this; this.body.addHitListener('bodies', function(e){ self.hitAction(e.data); }); /*this.body.addHitListener('limits', function(e) { });*/ }

यही है, इस पर। (जैसा कि हम याद करते हैं, यह एक भौतिक वस्तु है, वास्तव में यह हमारे सांप का सिर है) हमने एक घटना हैंडलर लटका दिया। वे दो प्रकार के हो सकते हैं: भौतिक शरीर और दुनिया से परे जाना। e.data ऑब्जेक्ट का एक संदर्भ संग्रहीत करता है जो इस। वस्तु का this.body । कूल। सभी जैसा हम चाहते थे।
अपना ईवेंट बनाना इतना मुश्किल नहीं है (और यदि आप jQuery का उपयोग करते हैं , तो यह और भी आसान होगा)। लेकिन हम खुद लिखेंगे। मैंने इसे एक अलग CustomEvent क्लास में रखा। इसका उपयोग कहीं और भी किया जा सकता है जिसकी आपको आवश्यकता है

कोड को देखो

  function CustomEvent(_eventName, _target, _handler) { this.eventName = _eventName; if (_target && _handler) { this.eventListener(_target, _handler); } } CustomEvent.prototype.eventListener = function(_target, _handler) { if (typeof _target == 'string') { this.target = document.getElementById(_target); } else { this.target = _target; } this.handler = _handler; if (this.target.addEventListener) { this.target.addEventListener(this.eventName, this.handler, false); } else if (this.target.attachEvent) { this.target.attachEvent(this.eventName, this.handler); } } CustomEvent.prototype.eventRemove = function() { if (this.target.removeEventListener) { this.target.removeEventListener(this.eventName, this.handler, false); } else if (this.target.detachEvent) { this.target.detachEvent(this.eventName, this.handler); } } CustomEvent.prototype.eventDispatch = function(_data) { if (document.createEvent) { var e = document.createEvent('Events'); e.initEvent(this.eventName, true, false); } else if (document.createEventObject) { var e = document.createEventObject(); } else { return } e.data = _data; if (this.target.dispatchEvent) { this.target.dispatchEvent(e); } else if (this.target.fireEvent) { this.target.fireEvent(this.eventName, e); } }

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

  this.tales[j].moveTo(this.tales[j - 1].position.x, this.tales[j - 1].position.y, 5);

this.tales [j] एक भौतिक निकाय है, अर्थात, इंजन में कुछ अन्य moveTo(_x, _y, _speed) विधि moveTo(_x, _y, _speed) । जो, जैसा कि हम देखते हैं, बस निर्दिष्ट निर्देशांक के साथ वर्तमान बिंदु से बिंदु तक जाता है। कैसे बनाये? निर्देशांक द्वारा दो बिंदुओं के बीच अंतर प्राप्त करें, संक्रमणों की संख्या (_speed) से विभाजित करें और हमें एक संक्रमण में एक कदम मिलेगा। वह सब है।

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

  Body.devMode.usePhysLimits = true; Body.devMode.display = true; Body.devMode.bodyId = this.body.id; Body.devMode.use = true; Body.useGravity = false;

पहला यह है कि क्या दुनिया की सीमाओं का उपयोग करना है, क्योंकि हम देखते हैं कि निकाय उन्हें बंद करते हैं।
दूसरा यह है कि क्या भौतिक शरीर के फ्रेमों को प्रदर्शित करना है (हम शरीर पर आरेखण को सरल बना सकते हैं, या बस इसे रंग से भर सकते हैं), और ये स्वयं ज्यामितीय निकाय के फ्रेम हैं।
तीसरा, किस शरीर के लिए डिबगिंग है: हाँ, सांप के सिर के लिए, यह है। this.body , और id द्वारा असाइन करें (हाँ, प्रत्येक शरीर का अपना पहचानकर्ता है)।
चौथा यह है कि क्या कंसोल को ही प्रदर्शित करना है।
और पांचवां - पूरी तरह से युवती मोड से नहीं, कहता है कि क्या गुरुत्वाकर्षण का उपयोग करना है (कौन सा इंजन गुरुत्वाकर्षण के बिना है), लेकिन जैसा कि आप देखते हैं, खेल "शीर्ष दृश्य" इसलिए false ।

खैर यहाँ।

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

PS खैर, दूसरे भाग में हम इसमें से एक खेल की तरह कुछ और करने की कोशिश करेंगे।

भौतिकी सांप। खरोंच से। एक भाग

भौतिकी के बारे में:

खैर यहाँ।

More articles: