Web-Dev-For-Beginners/translations/ta/6-space-game/4-collision-detection

விண்வெளி விளையாட்டு உருவாக்கம் பகுதி 4: லேசர் சேர்த்து மோதல்களை கண்டறிதல்

முன்-வகுப்பு வினாடி வினா

முன்-வகுப்பு வினாடி வினா

இந்த பாடத்தில் நீங்கள் JavaScript மூலம் லேசரை எவ்வாறு சுடுவது என்பதை கற்றுக்கொள்வீர்கள்! நாங்கள் விளையாட்டில் இரண்டு விஷயங்களை சேர்க்கப் போகிறோம்:

• ஒரு லேசர்: இந்த லேசர் உங்கள் ஹீரோ கப்பலிலிருந்து மேலே சென்று சுடப்படும்.
• மோதல் கண்டறிதல்: சுடும் திறனை செயல்படுத்தும் ஒரு பகுதியாக, சில நல்ல விளையாட்டு விதிகளை சேர்க்கிறோம்:
  • லேசர் எதிரியை தாக்கும்: லேசர் தாக்கினால் எதிரி அழிக்கப்படும்.
  • லேசர் திரையின் மேல் பகுதியை தாக்கும்: திரையின் மேல் பகுதியை தாக்கும் போது லேசர் அழிக்கப்படும்.
  • எதிரி மற்றும் ஹீரோ மோதல்: எதிரி மற்றும் ஹீரோ ஒருவருக்கொருவர் மோதினால் இருவரும் அழிக்கப்படும்.
  • எதிரி திரையின் கீழ் பகுதியை அடையும்: எதிரி திரையின் கீழ் பகுதியை அடைந்தால் எதிரி மற்றும் ஹீரோ இருவரும் அழிக்கப்படும்.

சுருக்கமாக, நீங்கள் -- ஹீரோ -- அனைத்து எதிரிகளையும் லேசர் மூலம் தாக்கி, அவர்கள் திரையின் கீழ் பகுதியை அடைவதற்கு முன் அழிக்க வேண்டும்.

✅ முதல் கணினி விளையாட்டின் செயல்பாடு என்ன என்பதைப் பற்றி சிறு ஆராய்ச்சி செய்யுங்கள்.

நாம் அனைவரும் ஹீரோக்களாக இருக்கலாம்!

மோதல் கண்டறிதல்

மோதல் கண்டறிதலை எவ்வாறு செய்வது? நமது விளையாட்டு பொருட்களை நகரும் செங்குத்து வடிவங்களில் கருத வேண்டும். ஏன் என்று நீங்கள் கேட்கலாம். காரணம், ஒரு விளையாட்டு பொருளை வரைய பயன்படுத்தப்படும் படம் ஒரு செங்குத்து வடிவமாக இருக்கும்: இது x, y, width மற்றும் height கொண்டது.

இரண்டு செங்குத்து வடிவங்கள், உதாரணமாக ஹீரோ மற்றும் எதிரி மோதினால், மோதல் நிகழ்ந்துள்ளது. அப்போது என்ன நடக்க வேண்டும் என்பது விளையாட்டு விதிகளின் கீழ் இருக்கும். மோதல் கண்டறிதலை செயல்படுத்த, நீங்கள் பின்வருவன தேவைப்படும்:

1. ஒரு விளையாட்டு பொருளின் செங்குத்து வடிவத்தை பெறும் வழி, இதுபோன்றது:

   rectFromGameObject() {
     return {
       top: this.y,
       left: this.x,
       bottom: this.y + this.height,
       right: this.x + this.width
     }
   }
   

2. ஒப்பீட்டு செயல்பாடு, இந்த செயல்பாடு இதுபோன்றதாக இருக்கலாம்:

   function intersectRect(r1, r2) {
     return !(r2.left > r1.right ||
       r2.right < r1.left ||
       r2.top > r1.bottom ||
       r2.bottom < r1.top);
   }
   

பொருட்களை எவ்வாறு அழிக்கலாம்

விளையாட்டில் பொருட்களை அழிக்க, ஒரு குறிப்பிட்ட இடைவெளியில் செயல்படும் விளையாட்டு லூப்பில் அந்த பொருளை வரைய வேண்டாம் என்று விளையாட்டிற்கு தெரிவிக்க வேண்டும். இதைச் செய்ய ஒரு பொருளை dead என்று குறிக்கலாம், இதுபோன்றது:

// collision happened
enemy.dead = true

பின்னர் dead பொருட்களை திரையை மீண்டும் வரையுவதற்கு முன் சுத்தம் செய்யலாம், இதுபோன்றது:

gameObjects = gameObject.filter(go => !go.dead);

லேசரை எவ்வாறு சுடுவது

லேசரை சுடுவது என்பது ஒரு விசை நிகழ்வுக்கு பதிலளித்து ஒரு பொருளை உருவாக்கி ஒரு குறிப்பிட்ட திசையில் நகர்த்துவது ஆகும். எனவே, பின்வரும் படிகளை மேற்கொள்ள வேண்டும்:

1. ஒரு லேசர் பொருளை உருவாக்கவும்: ஹீரோ கப்பலின் மேல் பகுதியிலிருந்து, உருவாக்கப்பட்டவுடன் திரையின் மேல் நோக்கி நகரத் தொடங்கும்.
2. ஒரு விசை நிகழ்வுக்கு குறியீட்டை இணைக்கவும்: லேசரை சுடும் வீரரை பிரதிநிதித்துவப்படுத்தும் விசையை தேர்வு செய்ய வேண்டும்.
3. ஒரு லேசர் போல தோற்றமளிக்கும் விளையாட்டு பொருளை உருவாக்கவும்: விசை அழுத்தப்படும் போது.

லேசரின் குளிர்ச்சி நேரம்

லேசர் ஒரு விசையை அழுத்தும் ஒவ்வொரு முறையும் சுட வேண்டும், உதாரணமாக space விசை. குறுகிய நேரத்தில் விளையாட்டில் மிக அதிகமான லேசர்கள் உருவாகுவதைத் தடுக்க, இதை சரிசெய்ய வேண்டும். இதை சரிசெய்வது cooldown எனப்படும் ஒரு டைமரை செயல்படுத்துவதன் மூலம் செய்யலாம், இது ஒரு லேசர் எவ்வளவு அடிக்கடி சுடப்பட வேண்டும் என்பதை உறுதிசெய்கிறது. இதை பின்வருவாறு செயல்படுத்தலாம்:

class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time)
  }
}

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // produce a laser
      this.cooldown = new Cooldown(500);
    } else {
      // do nothing - it hasn't cooled down yet.
    }
  }
}

✅ cooldowns பற்றி நினைவூட்ட, விண்வெளி விளையாட்டு தொடர் பாடம் 1-ஐ பார்க்கவும்.

என்ன உருவாக்க வேண்டும்

முந்தைய பாடத்தில் இருந்து உள்ள குறியீட்டை (நீங்கள் சுத்தம் செய்து மறுசீரமைத்திருக்க வேண்டும்) எடுத்துக்கொண்டு விரிவாக்க வேண்டும். பகுதி II-இல் உள்ள குறியீட்டை அல்லது பகுதி III- தொடக்கம் குறியீட்டை பயன்படுத்தவும்.

குறிப்புகள்: நீங்கள் வேலை செய்யும் லேசர் ஏற்கனவே உங்கள் சொத்து கோப்பகத்தில் உள்ளது மற்றும் உங்கள் குறியீட்டில் குறிப்பிடப்பட்டுள்ளது.

• மோதல் கண்டறிதலைச் சேர்க்கவும், ஒரு லேசர் ஏதாவது ஒன்றுடன் மோதும் போது பின்வரும் விதிகள் பொருந்த வேண்டும்:
  1. லேசர் எதிரியை தாக்கும்: லேசர் தாக்கினால் எதிரி அழிக்கப்படும்.
  2. லேசர் திரையின் மேல் பகுதியை தாக்கும்: திரையின் மேல் பகுதியை தாக்கும் போது லேசர் அழிக்கப்படும்.
  3. எதிரி மற்றும் ஹீரோ மோதல்: எதிரி மற்றும் ஹீரோ ஒருவருக்கொருவர் மோதினால் இருவரும் அழிக்கப்படும்.
  4. எதிரி திரையின் கீழ் பகுதியை அடையும்: எதிரி மற்றும் ஹீரோ இருவரும் அழிக்கப்படும்.

பரிந்துரைக்கப்பட்ட படிகள்

your-work துணை கோப்பகத்தில் உங்களுக்காக உருவாக்கப்பட்ட கோப்புகளை கண்டறியவும். இது பின்வருவன கொண்டிருக்க வேண்டும்:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

your_work கோப்பகத்தில் உங்கள் திட்டத்தை தொடங்க, பின்வருவதை தட்டச்சு செய்யவும்:

cd your-work
npm start

மேலே உள்ளது http://localhost:5000 முகவரியில் HTTP சர்வரை தொடங்கும். ஒரு உலாவியில் அந்த முகவரியை உள்ளிடவும், தற்போது அது ஹீரோ மற்றும் அனைத்து எதிரிகளையும் காட்ட வேண்டும், எதுவும் நகரவில்லை - இன்னும் :).

குறியீட்டைச் சேர்க்கவும்

1. உங்கள் விளையாட்டு பொருளின் செங்குத்து வடிவத்தை அமைக்கவும், மோதல்களை கையாள கீழே உள்ள குறியீடு GameObject-இன் செங்குத்து வடிவத்தை பெற அனுமதிக்கிறது. உங்கள் GameObject வகுப்பைத் திருத்தவும்:

   rectFromGameObject() {
       return {
         top: this.y,
         left: this.x,
         bottom: this.y + this.height,
         right: this.x + this.width,
       };
     }
   

2. மோதல்களைச் சரிபார்க்கும் குறியீட்டைச் சேர்க்கவும் இது இரண்டு செங்குத்து வடிவங்கள் மோதுகிறதா என்பதை சோதிக்கும் புதிய செயல்பாடு:

   function intersectRect(r1, r2) {
     return !(
       r2.left > r1.right ||
       r2.right < r1.left ||
       r2.top > r1.bottom ||
       r2.bottom < r1.top
     );
   }
   

3. லேசர் சுடும் திறனைச் சேர்க்கவும்

   1. விசை-நிகழ்வு செய்தியைச் சேர்க்கவும். space விசை ஹீரோ கப்பலின் மேல் ஒரு லேசரை உருவாக்க வேண்டும். Messages பொருளில் மூன்று மாறிகள் சேர்க்கவும்:

       KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
       COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
       COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
      

   2. space விசையை கையாளவும். window.addEventListener keyup செயல்பாட்டை space விசையை கையாள திருத்தவும்:

        } else if(evt.keyCode === 32) {
          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
        }
      

   3. கேட்பாளர்களைச் சேர்க்கவும். space bar அழுத்தப்படும் போது ஹீரோ சுடக்கூடியதாக இருக்க initGame() செயல்பாட்டைத் திருத்தவும்:

      eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
       if (hero.canFire()) {
         hero.fire();
       }
      

      மற்றும் ஒரு புதிய eventEmitter.on() செயல்பாட்டைச் சேர்க்கவும், எதிரி லேசருடன் மோதும் போது நடத்தை உறுதிசெய்ய:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
        first.dead = true;
        second.dead = true;
      })
      

   4. பொருளை நகர்த்தவும், லேசர் மெதுவாக திரையின் மேல் நகர வேண்டும். நீங்கள் GameObject-ஐ விரிவாக்கும் புதிய Laser வகுப்பை உருவாக்குவீர்கள், நீங்கள் முன்பு செய்தது போல:

        class Laser extends GameObject {
        constructor(x, y) {
          super(x,y);
          (this.width = 9), (this.height = 33);
          this.type = 'Laser';
          this.img = laserImg;
          let id = setInterval(() => {
            if (this.y > 0) {
              this.y -= 15;
            } else {
              this.dead = true;
              clearInterval(id);
            }
          }, 100)
        }
      }
      

   5. மோதல்களை கையாளவும், லேசருக்கான மோதல் விதிகளை செயல்படுத்தவும். மோதும் பொருட்களை சோதிக்கும் updateGameObjects() செயல்பாட்டைச் சேர்க்கவும்:

      function updateGameObjects() {
        const enemies = gameObjects.filter(go => go.type === 'Enemy');
        const lasers = gameObjects.filter((go) => go.type === "Laser");
      // laser hit something
        lasers.forEach((l) => {
          enemies.forEach((m) => {
            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
              first: l,
              second: m,
            });
          }
         });
      });
      
        gameObjects = gameObjects.filter(go => !go.dead);
      }  
      

      window.onload உள்ள விளையாட்டு லூப்பில் updateGameObjects() சேர்க்கவும்.

   6. லேசரின் குளிர்ச்சி நேரத்தை செயல்படுத்தவும், இது அடிக்கடி சுட முடியாது.

      இறுதியாக, ஹீரோ வகுப்பைத் திருத்தி, இது குளிர்ச்சி நேரத்தை கொண்டிருக்க:

      class Hero extends GameObject {
       constructor(x, y) {
         super(x, y);
         (this.width = 99), (this.height = 75);
         this.type = "Hero";
         this.speed = { x: 0, y: 0 };
         this.cooldown = 0;
       }
       fire() {
         gameObjects.push(new Laser(this.x + 45, this.y - 10));
         this.cooldown = 500;
      
         let id = setInterval(() => {
           if (this.cooldown > 0) {
             this.cooldown -= 100;
           } else {
             clearInterval(id);
           }
         }, 200);
       }
       canFire() {
         return this.cooldown === 0;
       }
      }
      

இந்த நேரத்தில், உங்கள் விளையாட்டில் சில செயல்பாடுகள் உள்ளன! உங்கள் அம்பு விசைகளைப் பயன்படுத்தி வழிநடத்தலாம், space bar மூலம் லேசரை சுடலாம், மற்றும் எதிரிகள் நீங்கள் தாக்கும் போது மறைந்து விடுகின்றனர். நல்ல வேலை!

---

🚀 சவால்

ஒரு வெடிப்பு சேர்க்கவும்! Space Art repo உள்ள விளையாட்டு சொத்துகளைப் பாருங்கள், மற்றும் லேசர் ஒரு அயலவரை தாக்கும் போது ஒரு வெடிப்பு சேர்க்க முயற்சிக்கவும்.

வகுப்புக்குப் பின் வினாடி வினா

வகுப்புக்குப் பின் வினாடி வினா

மதிப்பீடு & சுயபயிற்சி

உங்கள் விளையாட்டில் இதுவரை உள்ள இடைவெளிகளைப் பரிசோதிக்கவும். நீங்கள் அவற்றை மாற்றும்போது என்ன நடக்கிறது? JavaScript நேர நிகழ்வுகள் பற்றி மேலும் படிக்கவும்.

பணிக்கட்டளை

மோதல்களை ஆராயவும்

---

குறிப்பு:
இந்த ஆவணம் Co-op Translator என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியக்க மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.