# အာကာသဂိမ်း တည်ဆောက်ခြင်း အပိုင်း ၅: အမှတ်ပေးခြင်းနှင့် အသက်များ ## မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း [မိန့်ခွန်းမတိုင်မီ စမ်းမေးခွန်း](https://ff-quizzes.netlify.app/web/quiz/37) အာကာသဂိမ်းကို အမှန်တကယ်ကစားနိုင်တဲ့ဂိမ်းလို ခံစားရဖို့ အဆင်သင့်ဖြစ်ပြီလား? အမှတ်ပေးခြင်းနှင့် အသက်များကို စီမံခန့်ခွဲခြင်းကို ထည့်သွင်းလိုက်ရအောင်။ အစောပိုင်း Arcade ဂိမ်းများဖြစ်သော Space Invaders ကဲ့သို့သော ဂိမ်းများကို ရိုးရှင်းသော ပြသမှုများမှ စွဲလမ်းဖွယ် အပျော်အပါးအဖြစ် ပြောင်းလဲစေသော အဓိက Mechanic များဖြစ်သည်။ ဒီနေရာမှာ သင့်ဂိမ်းက အမှန်တကယ်ကစားနိုင်ဖို့ ဖြစ်လာပါပြီ။ ## Screen ပေါ်မှာ စာသားရေးခြင်း - သင့်ဂိမ်းရဲ့ အသံ သင့်အမှတ်ကို ပြသဖို့ Canvas ပေါ်မှာ စာသားကို Render လုပ်နည်းကို သင်ယူရပါမယ်။ `fillText()` method က သင့်ရဲ့ အဓိက Tools ဖြစ်ပြီး - အမှတ်များနှင့် အခြေအနေအချက်အလက်များကို ပြသဖို့ Classic Arcade ဂိမ်းများမှာ အသုံးပြုခဲ့တဲ့ နည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ သင့်မှာ စာသားရဲ့ ပုံစံကို အပြည့်အဝ ထိန်းချုပ်နိုင်ပါတယ်- ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ [Canvas ပေါ်မှာ စာသားထည့်သွင်းခြင်း](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ကို ပိုမိုနက်နက်ရှိုင်းရှိုင်း သင်ယူလိုက်ပါ - Fonts နှင့် Styling တွေကို ဘယ်လောက်ဖန်တီးနိုင်တယ်ဆိုတာ သင်အံ့ဩမိနိုင်ပါတယ်! ## အသက်များ - ရေတွက်ချက်တစ်ခုထက် ပိုမိုသောအရာ ဂိမ်းဒီဇိုင်းမှာ "အသက်" ဆိုတာက ကစားသူရဲ့ အမှားလုပ်ခွင့်ကို ကိုယ်စားပြုပါတယ်။ ဒီအယူအဆက Pinball Machines တွေထဲက စတင်ခဲ့ပြီး သင်ကစားဖို့ ဘောလုံးများစွာရရှိခဲ့ပါတယ်။ Asteroids ကဲ့သို့သော ဗီဒီယိုဂိမ်းများမှာ အသက်များက ကစားသူတွေကို အန္တရာယ်ယူဖို့နှင့် အမှားတွေကနေ သင်ယူဖို့ ခွင့်ပြုခဲ့ပါတယ်။ အမြင်အာရုံကို အလွန်အရေးကြီးပါတယ် - "အသက်: ၃" လို့ ရေးထားတာထက် သင်္ဘောပုံများကို ပြသခြင်းက ဘာသာစကားအတားအဆီးတွေကို ကျော်လွှားပြီး အချက်အလက်တွေကို ဆက်သွယ်ပေးနိုင်တဲ့ အစောပိုင်း Arcade Cabinets တွေလို တိုက်ရိုက်အမြင်အာရုံကို ဖန်တီးပေးနိုင်ပါတယ်။ ## သင့်ဂိမ်းရဲ့ ဆုချီးမြှင့်မှုစနစ် တည်ဆောက်ခြင်း အခုတော့ ကစားသူတွေကို စွဲလမ်းစေတဲ့ အဓိက Feedback Systems တွေကို အကောင်အထည်ဖော်လိုက်ပါမယ်- - **အမှတ်ပေးစနစ်**: ရန်သူသင်္ဘောတစ်စင်းကို ဖျက်ဆီးတိုင်း ၁၀၀ အမှတ်ရရှိမယ် (ကစားသူတွေ အလွယ်တကူ တွက်နိုင်ဖို့ အလုံးပေါင်းနံပါတ်တွေက ပိုမိုလွယ်ကူပါတယ်။) အမှတ်ကို ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ်။ - **အသက်ရေတွက်ချက်**: သင့် Hero က အသက် ၃ ခုနဲ့ စတင်ပါမယ် - အစောပိုင်း Arcade ဂိမ်းတွေက စိန်ခေါ်မှုနဲ့ ကစားနိုင်မှုကို ချိန်ညှိဖို့ စံထားခဲ့တာပါ။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ကျန်ရှိတဲ့ အသက်တွေကို သင်္ဘောပုံများနဲ့ ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ် ။ ## တည်ဆောက်ဖို့ စတင်လိုက်ပါ ပထမဆုံး သင့် Workspace ကို စီစဉ်ပါ။ `your-work` sub folder ထဲမှာ ဖိုင်တွေကို သွားကြည့်ပါ။ ဒီဖိုင်တွေကို တွေ့ရပါမယ်- ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` သင့်ဂိမ်းကို စမ်းသပ်ဖို့ `your_work` folder ထဲက Development Server ကို စတင်ပါ: ```bash cd your-work npm start ``` ဒီဟာက `http://localhost:5000` မှာ Local Server တစ်ခုကို လည်ပတ်စေပါတယ်။ ဒီလိပ်စာကို Browser မှာ ဖွင့်ပြီး သင့်ဂိမ်းကို ကြည့်ပါ။ Arrow Keys တွေကို အသုံးပြုပြီး ထိန်းချုပ်မှုတွေကို စမ်းသပ်ပြီး ရန်သူတွေကို ပစ်ခတ်ကြည့်ပါ။ ### Code ရေးဖို့ အချိန်ရောက်ပြီ! 1. **သင်လိုအပ်မယ့် Visual Assets တွေကို ရယူပါ**။ `solution/assets/` folder ထဲက `life.png` asset ကို `your-work` folder ထဲကို Copy လုပ်ပါ။ ပြီးရင် `lifeImg` ကို window.onload function ထဲမှာ ထည့်ပါ: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. `lifeImg` ကို သင့် assets list ထဲမှာ ထည့်ဖို့ မမေ့ပါနဲ့: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **သင့်ဂိမ်း Variables တွေကို စီစဉ်ပါ**။ စုစုပေါင်းအမှတ် (၀ မှ စတင်) နဲ့ ကျန်ရှိတဲ့ အသက် (၃ မှ စတင်) ကို Track လုပ်ဖို့ Code အချို့ကို ထည့်ပါ။ ဒီအရာတွေကို Screen ပေါ်မှာ ပြသပြီး ကစားသူတွေက သူတို့ရဲ့ အခြေအနေကို အမြဲသိနိုင်အောင်လုပ်ပါ။ 3. **Collision Detection ကို အကောင်အထည်ဖော်ပါ**။ ရန်သူတွေ Hero နဲ့ တိုက်မိတဲ့အခါကို ရှာဖွေဖို့ `updateGameObjects()` function ကို တိုးချဲ့ပါ: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **Hero မှာ အသက်နဲ့ အမှတ် Tracking ကို ထည့်ပါ**। 1. **Counters တွေကို Initialize လုပ်ပါ**။ `Hero` class ထဲမှာ `this.cooldown = 0` အောက်မှာ အသက်နဲ့ အမှတ်တွေကို စီစဉ်ပါ: ```javascript this.life = 3; this.points = 0; ``` 1. **ဒီ Value တွေကို ကစားသူတွေကို ပြပါ**။ Screen ပေါ်မှာ ဒီ Value တွေကို ရေးဖို့ Functions တွေကို ဖန်တီးပါ: ```javascript function drawLife() { // TODO, 35, 27 const START_POS = canvas.width - 180; for(let i=0; i < hero.life; i++ ) { ctx.drawImage( lifeImg, START_POS + (45 * (i+1) ), canvas.height - 37); } } function drawPoints() { ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "left"; drawText("Points: " + hero.points, 10, canvas.height-20); } function drawText(message, x, y) { ctx.fillText(message, x, y); } ``` 1. **ဒီ Function တွေကို သင့်ဂိမ်း Loop ထဲမှာ ထည့်ပါ**။ `updateGameObjects()` အောက်မှာ ဒီ Function တွေကို window.onload function ထဲမှာ ထည့်ပါ: ```javascript drawPoints(); drawLife(); ``` 1. **ဂိမ်း Consequences နဲ့ Rewards တွေကို အကောင်အထည်ဖော်ပါ**။ အခုတော့ ကစားသူရဲ့ လုပ်ဆောင်မှုတွေကို အဓိပ္ပာယ်ရှိအောင်လုပ်ပေးမယ့် Feedback Systems တွေကို ထည့်သွင်းလိုက်ပါ: 1. **Collisions က အသက်တွေကို ဆုံးရှုံးစေမယ်**။ သင့် Hero က ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ဒီ Method ကို သင့် `Hero` class ထဲမှာ ထည့်ပါ: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **ရန်သူတွေကို ပစ်ခတ်တိုင်း အမှတ်ရရှိမယ်**။ တစ်ခါတစ်ခါ ပစ်ခတ်မှုတစ်ခုတိုင်းမှာ ၁၀၀ အမှတ်ရရှိပြီး တိကျစွာ ပစ်ခတ်မှုအတွက် တိုက်ရိုက် Positive Feedback ရရှိစေပါမယ်။ Hero class ကို ဒီ Increment Method နဲ့ တိုးချဲ့ပါ: ```javascript incrementPoints() { this.points += 100; } ``` အခုတော့ ဒီ Function တွေကို Collision Events တွေမှာ ချိတ်ဆက်ပါ: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { first.dead = true; second.dead = true; hero.incrementPoints(); }) eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => { enemy.dead = true; hero.decrementLife(); }); ``` ✅ JavaScript နဲ့ Canvas ကို အသုံးပြုပြီး တည်ဆောက်ထားတဲ့ အခြားဂိမ်းတွေကို စူးစမ်းလိုက်ပါ - ဘာတွေဖြစ်နိုင်တယ်ဆိုတာကို သင်အံ့ဩမိနိုင်ပါတယ်! ဒီ Features တွေကို အကောင်အထည်ဖော်ပြီးနောက် သင့်ဂိမ်းကို စမ်းသပ်ပါ။ Feedback System အပြည့်အစုံကို လုပ်ဆောင်မှုအတိုင်း မြင်နိုင်ပါမယ်။ ဘေးဘက်အောက်ထောင့်မှာ အသက်ပုံများကို မြင်နိုင်ပြီး အမှတ်ကို ဘေးဘက်အောက်ထောင့်မှာ မြင်နိုင်ပါမယ်။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တွေ လျော့သွားပြီး အောင်မြင်စွာ ပစ်ခတ်မှုတွေက အမှတ်တွေ တိုးလာတာကို ကြည့်နိုင်ပါမယ်။ သင့်ဂိမ်းမှာ အစောပိုင်း Arcade ဂိမ်းတွေကို စွဲလမ်းစေတဲ့ အဓိက Mechanic တွေ - ရည်မှန်းချက်ရှင်းလင်းမှု၊ တိုက်ရိုက် Feedback နဲ့ ကစားသူရဲ့ လုပ်ဆောင်မှုအတွက် အဓိပ္ပာယ်ရှိတဲ့ Consequences တွေ ပါဝင်နေပါပြီ။ --- ## GitHub Copilot Agent Challenge 🚀 Agent mode ကို အသုံးပြုပြီး အောက်ပါ Challenge ကို ပြီးမြောက်စေပါ: **ဖော်ပြချက်:** အာကာသဂိမ်းရဲ့ အမှတ်ပေးစနစ်ကို တိုးတက်အောင်လုပ်ပြီး High Score Feature ကို Persistent Storage နဲ့ Bonus Scoring Mechanics တွေနဲ့အတူ အကောင်အထည်ဖော်ပါ။ **Prompt:** ကစားသူရဲ့ အကောင်းဆုံးအမှတ်ကို localStorage မှာ သိမ်းဆည်းပေးမယ့် High Score System တစ်ခုကို ဖန်တီးပါ။ ရန်သူတွေကို ဆက်တိုက် ဖျက်ဆီးမှုအတွက် Bonus Points တွေ ထည့်သွင်းပြီး ရန်သူအမျိုးအစားအလိုက် အမှတ်တန်ဖိုးကွဲပြားမှုတွေကို အကောင်အထည်ဖော်ပါ။ ကစားသူက High Score အသစ်ရရှိတဲ့အခါ Visual Indicator ကို ထည့်သွင်းပြီး ဂိမ်း Screen ပေါ်မှာ လက်ရှိ High Score ကို ပြသပါ။ ## 🚀 Challenge အခုတော့ သင့်မှာ အမှတ်ပေးခြင်းနဲ့ အသက်များပါဝင်တဲ့ Functional Game ရှိပါပြီ။ ကစားသူရဲ့ အတွေ့အကြုံကို တိုးတက်စေမယ့် အပို Features တွေကို စဉ်းစားကြည့်ပါ။ ## မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း [မိန့်ခွန်းပြီးနောက် စမ်းမေးခွန်း](https://ff-quizzes.netlify.app/web/quiz/38) ## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း ပိုမိုလေ့လာလိုပါသလား? ဂိမ်းအမှတ်ပေးခြင်းနဲ့ အသက်စနစ်အမျိုးမျိုးကို သုတေသနလုပ်ပါ။ [PlayFab](https://playfab.com) ကဲ့သို့သော Fascinating Game Engines တွေရှိပြီး အမှတ်ပေးခြင်း၊ Leaderboards နဲ့ ကစားသူရဲ့ တိုးတက်မှုတွေကို စီမံခန့်ခွဲပေးပါတယ်။ ဒီလိုအရာတစ်ခုကို သင့်ဂိမ်းနဲ့ ပေါင်းစပ်ခြင်းက သင့်ဂိမ်းကို ဘယ်လိုအဆင့်မြှင့်တင်ပေးနိုင်မလဲ? ## အလုပ်ပေးစာ [အမှတ်ပေးဂိမ်း တည်ဆောက်ပါ](assignment.md) --- **အကြောင်းကြားချက်**: ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။