HTML5 में डूडल जंप करना

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

तो चलिए शुरू करते हैं। शुरुआत करने के लिए, हम उस दृश्य को दर्शाते हैं, जहाँ सब कुछ होगा:

<div id="stage"></div> 

और उस पर शैलियों को लागू करें:

  #stage{ position:absolute; top:0px; left:0px; background-color:#fff3f7; background-image:url(grid.gif); width:320px; height:480px; } 

जहां हम दृश्य को एक चेक्ड बैकग्राउंड (ग्रिड.गिफ़) से भरते हैं, और 320 गुणा 480 पिक्सेल का रिज़ॉल्यूशन बनाते हैं। इस दृश्य में, हम कई और divs रखते हैं: शीर्ष पैनल (ट्रे), जहां रन किए गए बिंदु लिखे जाएंगे और पॉज़ बटन स्थित होगा, गेम का मुख्य चरित्र (डूडलर) और गोली (बुलेट) जिसे हमारा चरित्र शूट करेगा। प्लेटफार्मों और बोनस के रूप में ऐसी वस्तुओं के लिए, हम div - कंटेनरों का निर्माण करते हैं, जिसमें जावा चक्र का उपयोग करते हुए, हम प्रत्येक ऑब्जेक्ट के लिए अलग से एक दिवा रखेंगे।

 <div id="stage"> <div id="header"> <div id="tray"></div> <div id="tray-border"></div> <div id="pause" onClick="gotoPause();"></div> </div> <div id="doodler"></div> <div id="bullet"></div> <div id="footer"></div> <div id="obstacle"></div> <div id="platforms"> <!-- --> </div> <div id="objects"> <!-- --> </div> <div id="doodler"></div> <div id="ammunition"></div> <div id="bullet"></div> <div id="records"></div> </div> 

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







यहां डूडलर तत्व के लिए शैलियों का एक उदाहरण दिया गया है:

  #doodler{ position:absolute; background:url(sprite.png); width:62px; height:59px; } 

स्प्राइट पर तत्वों के निर्देशांक को जानते हुए, हम उपरोक्त पैटर्न में सभी ऑब्जेक्ट्स को भर सकते हैं।
लेकिन स्प्रिंग्स और प्लेटफ़ॉर्म के लिए शैली थोड़ी अलग होगी, क्योंकि वे कंटेनर में झूठ बोलते हैं, और उनके लिए बाकी पैरामीटर एक जावा स्क्रिप्ट से सेट किए जाएंगे:

  #objects div{ position:absolute; background:url(sprite.png); } 

जब हमने मंच पर सभी वस्तुओं को बनाया और उन्हें शैली दी, तो हम एक जावा स्क्रिप्ट लिखना शुरू कर सकते हैं। सबसे पहले, गेम कोड लिखने की सुविधा के लिए, हम ऑब्जेक्ट चयनकर्ताओं को चर में धकेलेंगे:

  var d = document.getElementById('doodler'); var tray = document.getElementById('tray'); var header = document.getElementById('header'); var ammun = document.getElementById('ammunition'); //  ... 

जैसा कि मैंने पहले कहा, divs कंटेनर हैं: प्लेटफ़ॉर्म और ऑब्जेक्ट्स, हम जावा को लूप से भरते हैं:

  for(i=0;i'<numPlatform;i++){ document.getElementById('platforms').innerHTML+='<div class="platform" id="p'+i+'"></div>'; } 

जहाँ numPlatform कंटेनर में प्लेटफार्मों की संख्या है (प्लेटफ़ॉर्म की अधिकतम संख्या जो मंच पर फिट होती है, हमारे मामले में 16 हैं)। सुविधा के लिए, आप बढ़ते प्लेटफ़ॉर्म के लिए एक फ़ंक्शन बना सकते हैं:

  function setPlatform(n,x,y,t){ p = document.getElementById('p'+n); p.style.top = y+"px"; p.style.left = x+"px"; if(t==-1){p.style.backgroundPosition = "100px 100px";} if(t>=0&&t<8){ p.style.height=16+"px"; p.style.backgroundPosition = "-399px -"+(16*t)+"px"; } if(t==8){p.style.height=24+"px"; p.style.backgroundPosition = "-399px -128px";} if(t==9){p.style.height=16+"px"; p.style.backgroundPosition = "-399px -151px";} if(t==10){p.style.height=34+"px"; p.style.backgroundPosition = "-399px -168px";} } 

अब आप आसानी से किसी भी मंच को मंच पर वांछित स्थान पर ले जा सकते हैं, और इसके प्रकार को बदल सकते हैं:

 setPlatform([ ],[   ],[  ],[ ]); setPlatform(9,50,100,0); 

आइए कुछ और समान कार्य बनाएं:

  setBullet(x,y);//  setObstacle(x,y,t);//    setObject(n,x,y,t);//    doodle(x,y,t,a,alpha);// . 

आइए कुछ वैश्विक चर और सरणियाँ बनाएं जिनकी हमें भविष्य में आवश्यकता होगी।
यहाँ उनमें से कुछ हैं:

  var life = true;//   var stageSpeed = 0;//   var gravitation = 0.08; var ySpeed = 5;//   var numPlatform = 16;//  var numObjects = numPlatform;//  var xObject = new Array;//X  var yObject = new Array;//Y  var tObject = new Array;//  var yFooter = 1000;//  (footer.png) var tAmmunition = 0;//    var xPlatform = new Array;//X  var yPlatform = new Array;//Y  var tPlatform = new Array;//  var xDoodler = 136;// X  var yDoodler = 136;// Y  var tDoodler = 136;//   var record = 0;//   var xBullet;//X  var yBullet;//Y  var xSpeedBullet;//   var ySpeedBullet;//   var pause = false;// ... 

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

  function frame(){//   100    ySpeed -= gravitation;//   yDoodler -= ySpeed;//  if(xDoodler+46>=xObstacle&&xDoodler+16<=xObstacle+65&&yDoodler+59>=yObstacle&& yDoodler+59<=yObstacle+60&&tObstacle != 0){//     if(tObstacle != 6){//    if(tAmmunition>=1){//     tObstacle = 0;//   }else if(ySpeed<0){//  ,      tObstacle = 0;//  ySpeed = 10;//  }else{//     tAmmunition = 8;//    stageSpeed = 7;//     ySpeed = 0;//  life = false;//    } }else{//   if(tAmmunition == 0){//     ySpeed = 0;//  gravitation = 0;//   yDoodler -= (yDoodler - yObstacle)/6;//     X xDoodler -= (xDoodler - (xObstacle+10))/6;//     Y alphaDoodler -= 3;//   life = false;//  } } } yObstacle -= stageSpeed;//      setObstacle(parseInt(xObstacle), parseInt(yObstacle+obstacleYPosition), tObstacle);//  doodle(parseInt(xDoodler), parseInt(yDoodler), tDoodler, tAmmunition, alphaDoodler);//  ... for(i=0;i < numPlatform;i++){ yPlatform[i]-=stageSpeed;//       if(xDoodler+46>=xPlatform[i]&&xDoodler+16<=xPlatform[i]+65&& yDoodler+59>=yPlatform[i]&&yDoodler+59<=yPlatform[i]+16&&tPlatform[i]!=-1&&life&& tAmmunition == 0||tAmmunition == 7){//       if(tPlatform[i]==2){//   if(ySpeed<0){//     ySpeed = 5;//    tPlatform[i]=-1;//  } }else if(tPlatform[i]==9){//       if(ySpeed<0){ //     tPlatform[i]=10;//   } }else{//       if(ySpeed<=0){//     ySpeed = 5;//     } } } ...//       (. ) } if(tAmmunition>0&&tAmmunition<7&&ySpeed<2){ //     gravitation = 0.08; ySpeed -= 2; tAmmunition=0;//  } if(yFooter > 434){//      yFooter -= stageSpeed;//  }else{//       death();//    } footer.style.top = yFooter+"px"; if(xDoodler>296){lDoodler = xDoodler = -24;} //  «» if(xDoodler<-24){lDoodler = xDoodler = 296;} } fr = setInterval("frame()", 10);//   frame() (100  ) 

टूटे हुए प्लेटफार्मों के पतन को सुनिश्चित करने के लिए, हम लिखते हैं:

  if(tPlatform[i]==10){//    yPlatform[i]+=4;//    4  } 

सभी प्लेटफ़ॉर्म जो दृश्य के निचले किनारे को छोड़ते हैं, उन्हें सबसे ऊपर दिखाई देनी चाहिए, यदि yPlatform[i] > 480 yPlatform[i] = -30, लेकिन चूंकि हमारे पास भूरे रंग के प्लेटफ़ॉर्म हैं जो दूसरों की परवाह किए बिना नीचे गिर सकते हैं, तोड़ सकते हैं विलुप्त होने का क्रम - इस विकल्प के परिणामस्वरूप प्लेटफार्मों के बीच एक मनमानी दूरी होगी:


इसलिए, सभी प्लेटफ़ॉर्म जो उस दायरे से परे हैं, हमने पिछले छिपे हुए प्लेटफ़ॉर्म से 30 पिक्सेल ऊपर सेट किए हैं:

  if(yPlatform[i] > 480){ xPlatform[i] = parseInt(Math.random()*260); yPlatform[i] = yPlatform[lastPlatform]-30; lastPlatform = i; ... } 

डोडलर किस तरह के बोनस पर निर्भर करता है, इस पर निर्भर करता है कि निम्न में से कोई एक शर्त पूरी होती है: उदाहरण के लिए, यदि डोडर वसंत में गिरता है:

  if(tObject[i] == 0&&ySpeed<0){ //     ySpeed = 10;//    10 (    = 5) tObject[i] = 1;//       } 

यहाँ तब होता है जब एक डोबलर दूसरे बोनस में चलता है:

  if(tObject[i] == 2){// gravitation = 0.01; ySpeed = 10; tObject[i] = -1;//  tAmmunition = 1; } if(tObject[i] == 3){// gravitation = 0.008; ySpeed = 15; tObject[i] = -1; tAmmunition = 5; } if(tObject[i] == 4){// tObject[i] = -1; tAmmunition = 7; setTimeout('stopBonus()',5000);//     5  } 

बेशक, यह सब नहीं है, बहुत कुछ सब कुछ अस्पष्ट है, लेकिन आखिरकार, हमने अपने काम के मुख्य भाग की जांच की। मुझे लगता है कि सिद्धांत स्पष्ट है, तो हमें ऐसा करना था ताकि स्कोर किए गए अंकों के आधार पर खेल की जटिलता बढ़े:



फिर हमने एक स्क्रीनसेवर (छोड़ने की क्षमता के साथ), मेनू, रिकॉर्ड, मदद, पॉज़ मेनू, ध्वनि और डोलर के गिरने के बाद उपलब्धियों के बारे में जानकारी जोड़ी:



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

एक सरल कार्य उदाहरण: यहाँ