|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "022bbb5c869091b98f19e408e0c51d5d",
|
|
|
"translation_date": "2025-10-24T16:53:26+00:00",
|
|
|
"source_file": "6-space-game/3-moving-elements-around/README.md",
|
|
|
"language_code": "my"
|
|
|
}
|
|
|
-->
|
|
|
# အာကာသဂိမ်း တည်ဆောက်ခြင်း အပိုင်း ၃: လှုပ်ရှားမှု ထည့်သွင်းခြင်း
|
|
|
|
|
|
သင်နှစ်သက်တဲ့ဂိမ်းတွေကို စဉ်းစားကြည့်ပါ – အဲဒီဂိမ်းတွေကို စိတ်ဝင်စားစေတဲ့အရာက လှပတဲ့ ဂရပ်ဖစ်ပုံရိပ်တွေမကဘဲ၊ အရာအားလုံးက သင့်လုပ်ဆောင်မှုကို တုံ့ပြန်ပုံပါပဲ။ အခုအချိန်မှာ သင့်အာကာသဂိမ်းက လှပတဲ့ ပန်းချီပုံတစ်ပုံလိုပဲဖြစ်နေပါတယ်၊ ဒါပေမယ့် အခုလိုလှုပ်ရှားမှုတွေကို ထည့်သွင်းပြီး အသက်ဝင်စေမှာဖြစ်ပါတယ်။
|
|
|
|
|
|
NASA ရဲ့ အင်ဂျင်နီယာတွေက Apollo မစ်ရှင်တွေအတွက် လမ်းညွှန်ကွန်ပျူတာကို အစီအစဉ်ရေးသားတဲ့အခါမှာ၊ ပိုင်းလက်ထိန်းသူရဲ့ အချက်ပြမှုကို တုံ့ပြန်စေပြီး အလိုအလျောက် လမ်းကြောင်းပြင်ဆင်မှုတွေကို ထိန်းသိမ်းနိုင်ဖို့ ဘယ်လိုလုပ်ရမလဲဆိုတဲ့ အခက်အခဲနဲ့ ရင်ဆိုင်ခဲ့ရပါတယ်။ ဒီနေ့ သင်ယူမယ့် အခြေခံအချက်တွေက အဲဒီအယူအဆတွေကို ထပ်တူကျပါတယ် – ကစားသူထိန်းချုပ်မှု လှုပ်ရှားမှုတွေနဲ့ အလိုအလျောက်စနစ်အပြုအမူတွေကို စီမံခန့်ခွဲခြင်း။
|
|
|
|
|
|
ဒီသင်ခန်းစာမှာ သင်ဟာ အာကာသယာဉ်တွေကို မျက်နှာပြင်ပေါ်မှာ လွှားလျားသွားလာစေခြင်း၊ ကစားသူရဲ့ အမိန့်တွေကို တုံ့ပြန်စေခြင်း၊ နူးညံ့တဲ့ လှုပ်ရှားမှုပုံစံတွေ ဖန်တီးခြင်းကို သင်ယူရမှာဖြစ်ပါတယ်။ ကျွန်တော်တို့ အားလုံးကို သဘာဝကျကျ တစ်ခုချင်းစီ အဆင့်ဆင့် ဖွင့်ရှင်းပေးမှာဖြစ်ပါတယ်။
|
|
|
|
|
|
သင်ခန်းစာအဆုံးမှာတော့ ကစားသူတွေဟာ သူတို့ရဲ့ ဟီးရိုးယာဉ်ကို မျက်နှာပြင်ပေါ်မှာ လွှားလျားသွားလာနိုင်ပြီး ရန်သူယာဉ်တွေက အပေါ်မှာ လှည့်လည်နေမှာဖြစ်ပါတယ်။ အရေးကြီးတာကတော့ ဂိမ်းလှုပ်ရှားမှုစနစ်တွေကို အားပေးတဲ့ အခြေခံအချက်တွေကို နားလည်သွားမှာပါ။
|
|
|
|
|
|
## သင်ခန်းစာမတိုင်မီမေးခွန်း
|
|
|
|
|
|
[သင်ခန်းစာမတိုင်မီမေးခွန်း](https://ff-quizzes.netlify.app/web/quiz/33)
|
|
|
|
|
|
## ဂိမ်းလှုပ်ရှားမှုကို နားလည်ခြင်း
|
|
|
|
|
|
အရာတွေ လှုပ်ရှားလာတဲ့အခါမှာ ဂိမ်းတွေဟာ အသက်ဝင်လာပါတယ်၊ အခြေခံအားဖြင့် အဲဒီအရာတွေဟာ အောက်ပါနည်းလမ်းနှစ်ခုနဲ့ ဖြစ်ပေါ်လာပါတယ်-
|
|
|
|
|
|
- **ကစားသူထိန်းချုပ်မှု လှုပ်ရှားမှု**: သင် key တစ်ခုကို နှိပ်တဲ့အခါ သို့မဟုတ် mouse ကို click လုပ်တဲ့အခါ အရာတစ်ခုခု လှုပ်ရှားတယ်။ ဒါဟာ သင့်နဲ့ သင့်ဂိမ်းကမ္ဘာကြားမှာ တိုက်ရိုက်ချိတ်ဆက်မှု ဖြစ်ပါတယ်။
|
|
|
- **အလိုအလျောက် လှုပ်ရှားမှု**: ဂိမ်းကိုယ်တိုင်က အရာတွေကို လှုပ်ရှားစေတဲ့အခါ – ကစားသူ ဘာမှ မလုပ်ပေမယ့် မျက်နှာပြင်ပေါ်မှာ လှည့်လည်နေတဲ့ ရန်သူယာဉ်တွေလိုပဲ။
|
|
|
|
|
|
ကွန်ပျူတာမျက်နှာပြင်ပေါ်မှာ အရာတွေကို လှုပ်ရှားစေဖို့က သင်ထင်သလောက် မခက်ခဲပါဘူး။ သင့်ရဲ့ သင်တန်းခန်းမမှာ x နဲ့ y အနိမ့်အမြင့်တွေကို သင်ယူခဲ့တာကို သတိရပါ။ အဲဒါက အတိအကျ ဒီမှာ သုံးမယ့်အရာပါပဲ။ Galileo က ၁၆၁၀ ခုနှစ်မှာ Jupiter ရဲ့ လမင်းတွေကို စောင့်ကြည့်ခဲ့တဲ့အခါမှာလည်း အတူတူပဲ – အချိန်အတွင်းမှာ အနေအထားတွေကို ရေးဆွဲပြီး လှုပ်ရှားမှုပုံစံတွေကို နားလည်ဖို့ လုပ်ခဲ့တာပါ။
|
|
|
|
|
|
မျက်နှာပြင်ပေါ်မှာ အရာတွေကို လှုပ်ရှားစေဖို့က flipbook animation တစ်ခု ဖန်တီးတဲ့အတိုင်းပါပဲ – ဒီအဆင့်သုံးခုကို လိုက်နာဖို့ လိုပါတယ်-
|
|
|
|
|
|
1. **အနေအထားကို ပြင်ဆင်** – သင့်အရာကို ဘယ်နေရာမှာရှိသင့်တယ်ဆိုတာ ပြောင်းလဲပါ (ဥပမာ 5 pixels ကိုညာဘက်ကို ရွှေ့ပါ)
|
|
|
2. **အဟောင်း frame ကို ဖျက်ပစ်** – မျက်နှာပြင်ကို ရှင်းလင်းပြီး မိန်းမိန်းလှေကားတွေ မမြင်ရအောင်လုပ်ပါ
|
|
|
3. **အသစ် frame ကို ရေးဆွဲ** – သင့်အရာကို အနေအထားအသစ်မှာ ထည့်ပါ
|
|
|
|
|
|
ဒီအဆင့်တွေကို အလျင်အမြန်လုပ်နိုင်ရင်၊ boom! သဘာဝကျတဲ့ လှုပ်ရှားမှုကို သင်ရရှိပြီး ကစားသူတွေကို စိတ်ကျေနပ်မှုရစေမှာပါ။
|
|
|
|
|
|
ဒီဟာကို code မှာ ဘယ်လိုပုံစံရှိနိုင်တယ်ဆိုတာ ကြည့်ပါ-
|
|
|
|
|
|
```javascript
|
|
|
// Set the hero's location
|
|
|
hero.x += 5;
|
|
|
// Clear the rectangle that hosts the hero
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
// Redraw the game background and hero
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.drawImage(heroImg, hero.x, hero.y);
|
|
|
```
|
|
|
|
|
|
**ဒီ code က ဘာလုပ်သလဲဆိုတာ:**
|
|
|
- **Update** လုပ်ပြီး hero ရဲ့ x-coordinate ကို 5 pixels ရွှေ့ပြီး horizontal လှုပ်ရှားမှုလုပ်
|
|
|
- **Clear** လုပ်ပြီး canvas အပြင်အဆင်ကို ရှင်းလင်း
|
|
|
- **Fill** လုပ်ပြီး canvas ကို အနက်ရောင်နောက်ခံအရောင်နဲ့ ပြည့်စေ
|
|
|
- **Redraw** လုပ်ပြီး hero image ကို အနေအထားအသစ်မှာ ထည့်သွင်း
|
|
|
|
|
|
✅ သင့် hero ကို frame တစ်ခုစီမှာ redraw လုပ်ရင် performance cost တွေ တိုးလာနိုင်တဲ့အကြောင်းရင်းကို စဉ်းစားနိုင်ပါသလား? [ဒီ pattern ရဲ့ အခြားရွေးချယ်မှုတွေ](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas) အကြောင်း ဖတ်ရှုပါ။
|
|
|
|
|
|
## ကီးဘုတ်ဖြင့် အဖြေရှာခြင်း
|
|
|
|
|
|
ဒီမှာကတော့ ကစားသူ input ကို game action နဲ့ ချိတ်ဆက်မှာဖြစ်ပါတယ်။ တစ်စုံတစ်ယောက်က spacebar ကို နှိပ်ပြီး laser ပစ်တာ၊ arrow key ကို နှိပ်ပြီး asteroid ကို ရှောင်တာတွေကို သင့်ဂိမ်းက သိရှိပြီး အဲဒီ input ကို တုံ့ပြန်ဖို့ လိုပါတယ်။
|
|
|
|
|
|
Keyboard events တွေဟာ window အဆင့်မှာ ဖြစ်ပေါ်ပါတယ်၊ အဲဒါက သင့် browser window အားလုံးက keypress တွေကို နားထောင်နေတယ်ဆိုတာပါ။ Mouse clicks တွေကတော့ အထူး element တွေ (ဥပမာ button ကို click လုပ်တာ) နဲ့ ချိတ်ဆက်နိုင်ပါတယ်။ သင့်အာကာသဂိမ်းအတွက်တော့ keyboard controls တွေကို အာရုံစိုက်မှာဖြစ်ပါတယ်၊ အဲဒါက classic arcade feel ကို ကစားသူတွေကို ပေးနိုင်တဲ့အတွက်ပါ။
|
|
|
|
|
|
ဒီဟာက ၁၈၀၀ ခုနှစ်တွေမှာ telegraph operator တွေက morse code input ကို အဓိပ္ပါယ်ရှိတဲ့ message တွေကို ဘယ်လိုပြောင်းလဲခဲ့တယ်ဆိုတာကို သတိရစေပါတယ် – ကျွန်တော်တို့ကလည်း အတူတူပဲ keypress တွေကို game commands တွေကို ပြောင်းလဲနေပါတယ်။
|
|
|
|
|
|
Event ကို handle လုပ်ဖို့ window ရဲ့ `addEventListener()` method ကို သုံးပြီး input parameters နှစ်ခုကို ပေးရပါမယ်။ ပထမ parameter က event ရဲ့နာမည်ဖြစ်ပြီး၊ ဥပမာ `keyup` ဖြစ်ပါတယ်။ ဒုတိယ parameter ကတော့ event ဖြစ်ပေါ်တဲ့အခါမှာ ဖော်ဆောင်သင့်တဲ့ function ဖြစ်ပါတယ်။
|
|
|
|
|
|
ဥပမာကို ကြည့်ပါ-
|
|
|
|
|
|
```javascript
|
|
|
window.addEventListener('keyup', (evt) => {
|
|
|
// evt.key = string representation of the key
|
|
|
if (evt.key === 'ArrowUp') {
|
|
|
// do something
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**ဒီမှာ ဘာတွေဖြစ်သွားလဲဆိုတာကို ခွဲခြမ်းရှင်းလင်းခြင်း:**
|
|
|
- **Keyboard events** တွေကို window အားလုံးမှာ နားထောင်
|
|
|
- **Event object** ကို ဖမ်းပြီး ဘယ် key ကို နှိပ်ထားတယ်ဆိုတာကို သိရှိ
|
|
|
- **Pressed key** က အထူး key တစ်ခုနဲ့ ကိုက်ညီမညီကို စစ်ဆေး
|
|
|
- **Code** ကို condition ကို ဖြည့်ဆည်းတဲ့အခါမှာ run လုပ်
|
|
|
|
|
|
Key events တွေအတွက် event ရဲ့ properties နှစ်ခုကို သုံးပြီး ဘယ် key ကို နှိပ်ထားတယ်ဆိုတာကို ကြည့်နိုင်ပါတယ်-
|
|
|
|
|
|
- `key` - နှိပ်ထားတဲ့ key ရဲ့ string ကိုယ်စားပြုမှု၊ ဥပမာ `'ArrowUp'`
|
|
|
- `keyCode` - number ကိုယ်စားပြုမှု၊ ဥပမာ `37`၊ `ArrowLeft` ကို ကိုယ်စားပြု
|
|
|
|
|
|
✅ Key event manipulation ဟာ game development အပြင်မှာလည်း အသုံးဝင်ပါတယ်။ ဒီနည်းလမ်းကို ဘယ်လိုအသုံးချနိုင်မလဲဆိုတာ စဉ်းစားကြည့်ပါ။
|
|
|
|
|
|
### အထူး key တွေ: သတိထားစရာ!
|
|
|
|
|
|
Key တချို့မှာ browser ရဲ့ built-in behaviors တွေရှိပြီး သင့်ဂိမ်းကို အနှောင့်အယှက်ဖြစ်စေနိုင်ပါတယ်။ Arrow keys တွေက page ကို scroll လုပ်ပြီး၊ spacebar က page ကို jump လုပ်စေပါတယ် – သင့်ဂိမ်းမှာ spaceship ကို ထိန်းချုပ်ဖို့ ကြိုးစားနေတဲ့အခါမှာ ဒီအပြုအမူတွေကို မလိုချင်ပါဘူး။
|
|
|
|
|
|
ဒီ default behaviors တွေကို prevent လုပ်ပြီး သင့်ဂိမ်းက input ကို handle လုပ်စေပါ။ ဒီဟာက အစောပိုင်းကွန်ပျူတာ programmer တွေက system interrupts တွေကို override လုပ်ပြီး custom behaviors တွေ ဖန်တီးခဲ့တဲ့နည်းလမ်းနဲ့ တူပါတယ် – ကျွန်တော်တို့က browser အဆင့်မှာ လုပ်နေပါတယ်။ ဒီလိုလုပ်ပါ-
|
|
|
|
|
|
```javascript
|
|
|
const onKeyDown = function (e) {
|
|
|
console.log(e.keyCode);
|
|
|
switch (e.keyCode) {
|
|
|
case 37:
|
|
|
case 39:
|
|
|
case 38:
|
|
|
case 40: // Arrow keys
|
|
|
case 32:
|
|
|
e.preventDefault();
|
|
|
break; // Space
|
|
|
default:
|
|
|
break; // do not block other keys
|
|
|
}
|
|
|
};
|
|
|
|
|
|
window.addEventListener('keydown', onKeyDown);
|
|
|
```
|
|
|
|
|
|
**ဒီ prevention code ကို နားလည်ခြင်း:**
|
|
|
- **Specific key codes** တွေကို စစ်ဆေးပြီး browser behavior ကို မလိုချင်တဲ့အခါမှာ prevent လုပ်
|
|
|
- **Default browser action** ကို arrow keys နဲ့ spacebar အတွက် prevent လုပ်
|
|
|
- **Other keys** တွေကို သာမန်အတိုင်းလုပ်စေ
|
|
|
- **e.preventDefault()** ကို သုံးပြီး browser ရဲ့ built-in behavior ကို ရပ်တန့်
|
|
|
|
|
|
## ဂိမ်းကနေ လှုပ်ရှားမှု ဖြစ်ပေါ်စေခြင်း
|
|
|
|
|
|
အခုတော့ ကစားသူ input မရှိဘဲ အလိုအလျောက် လှုပ်ရှားတဲ့ object တွေကို ပြောကြမယ်။ မျက်နှာပြင်ပေါ်မှာ လှည့်လည်နေတဲ့ ရန်သူယာဉ်တွေ၊ တိုက်ခိုက်နေတဲ့ bullet တွေ၊ သို့မဟုတ် နောက်ခံမှာ လွှားလျားနေတဲ့ cloud တွေကို စဉ်းစားကြည့်ပါ။ ဒီ autonomous movement တွေက သင့်ဂိမ်းကမ္ဘာကို အသက်ဝင်စေပြီး ဘယ်သူမှ control မလုပ်ပေမယ့်လည်း စိတ်ဝင်စားစေပါတယ်။
|
|
|
|
|
|
JavaScript ရဲ့ built-in timers တွေကို သုံးပြီး အနေအထားတွေကို အကြိမ်ကြိမ် update လုပ်ပါတယ်။ ဒီအယူအဆက pendulum clocks တွေ ဘယ်လိုအလုပ်လုပ်တယ်ဆိုတာနဲ့ တူပါတယ် – အချိန်တစ်ခုချင်းစီမှာ တိကျတဲ့ လှုပ်ရှားမှုတွေကို trigger လုပ်တဲ့ စနစ်တစ်ခုပါ။ ဒီဟာက ဘယ်လောက်ရိုးရှင်းတယ်ဆိုတာ ကြည့်ပါ-
|
|
|
|
|
|
```javascript
|
|
|
const id = setInterval(() => {
|
|
|
// Move the enemy on the y axis
|
|
|
enemy.y += 10;
|
|
|
}, 100);
|
|
|
```
|
|
|
|
|
|
**ဒီ movement code က ဘာလုပ်သလဲဆိုတာ:**
|
|
|
- **Timer** တစ်ခုကို 100 milliseconds တစ်ကြိမ် run လုပ်စေ
|
|
|
- **Enemy ရဲ့ y-coordinate** ကို တစ်ကြိမ် 10 pixels update လုပ်
|
|
|
- **Interval ID** ကို သိမ်းပြီး နောက်ပိုင်းမှာ ရပ်တန့်နိုင်အောင်လုပ်
|
|
|
- **Enemy** ကို screen ပေါ်မှာ အလိုအလျောက် အောက်ဘက်ကို ရွှေ့စေ
|
|
|
|
|
|
## ဂိမ်း loop
|
|
|
|
|
|
ဒီဟာက အားလုံးကို ချိတ်ဆက်ပေးတဲ့ concept ဖြစ်ပါတယ် – ဂိမ်း loop ဟာ projector တစ်ခုလိုပါပဲ၊ frame တစ်ခုချင်းစီကို အလျင်အမြန် ပြသပြီး smooth လှုပ်ရှားမှုကို ဖန်တီးပေးပါတယ်။
|
|
|
|
|
|
ဂိမ်းတိုင်းမှာ ဒီ loop တွေထဲက တစ်ခု run လုပ်နေပါတယ်။ ဒီဟာက game objects အားလုံးကို update လုပ်ပြီး၊ screen ကို redraw လုပ်ပြီး၊ ဒီ process ကို အဆက်မပြတ် ပြန်လုပ်နေတဲ့ function တစ်ခုပါ။ ဒီဟာက သင့် hero, ရန်သူတွေ, laser တွေ – game state အားလုံးကို ထိန်းသိမ်းပေးပါတယ်။
|
|
|
|
|
|
ဒီ concept က Walt Disney လို အစောပိုင်းက animation ဖန်တီးသူတွေက character တွေကို frame တစ်ခုချင်းစီ redraw လုပ်ပြီး လှုပ်ရှားမှုကို ဖန်တီးခဲ့တဲ့နည်းလမ်းကို သတိရစေပါတယ်။ ကျွန်တော်တို့ကလည်း အတူတူပဲ code နဲ့ pencils အစားလုပ်နေပါတယ်။
|
|
|
|
|
|
Game loop ဟာ typically ဘယ်လိုပုံစံရှိတယ်ဆိုတာ code မှာ ကြည့်ပါ-
|
|
|
|
|
|
```javascript
|
|
|
const gameLoopId = setInterval(() => {
|
|
|
function gameLoop() {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
drawHero();
|
|
|
drawEnemies();
|
|
|
drawStaticObjects();
|
|
|
}
|
|
|
gameLoop();
|
|
|
}, 200);
|
|
|
```
|
|
|
|
|
|
**Game loop structure ကို နားလည်ခြင်း:**
|
|
|
- **Canvas** အပြင်အဆင်ကို ရှင်းလင်းပြီး အဟောင်း frame ကို ဖျက်
|
|
|
- **Background** ကို အရောင် solid color နဲ့ ပြည့်စေ
|
|
|
- **Game objects** အားလုံးကို အနေအထားလက်ရှိမှာ ရေးဆွဲ
|
|
|
- **Process** ကို 200 milliseconds တစ်ကြိမ် ပြန်လုပ်ပြီး smooth animation ဖန်တီး
|
|
|
- **Frame rate** ကို interval timing နဲ့ ထိန်းသိမ်း
|
|
|
|
|
|
## အာကာသဂိမ်းကို ဆက်လက်လုပ်ဆောင်ခြင်း
|
|
|
|
|
|
အခုတော့ သင်တုန်းက static scene ကို လှုပ်ရှားမှုထည့်သွင်းမှာဖြစ်ပါတယ်။ screenshot တစ်ခုကနေ interactive အတွေ့အကြုံတစ်ခုအဖြစ် ပြောင်းလဲသွားစေမှာပါ။ ကျွန်တော်တို့က အဆင့်ဆင့်လုပ်ဆောင်ပြီး တစ်ခုချင်းစီကို အခြေခံအဆင့်တွေမှာ တည်ဆောက်သွားမှာပါ။
|
|
|
|
|
|
အရင် lesson မှာ ကျန်ခဲ့တဲ့ code ကို ယူပါ (သို့မဟုတ် [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) folder မှာ code အသစ်နဲ့ စတင်ပါ။
|
|
|
|
|
|
**ဒီနေ့ ကျွန်တော်တို့ တည်ဆောက်မယ့်အရာ:**
|
|
|
- **Hero controls**: Arrow keys တွေက သင့် spaceship ကို မျက်နှာပြင်ပေါ်မှာ ထိန်းချုပ်
|
|
|
- **Enemy movement**: Alien ships တွေက တိုးတက်မှုကို စတင်
|
|
|
|
|
|
ဒီ features တွေကို အကောင်အထည်ဖော်ဖို့ စတင်လိုက်ကြစို့။
|
|
|
|
|
|
## အကြံပြုအဆင့်များ
|
|
|
|
|
|
`your-work` sub folder မှာ ဖန်တီးထားတဲ့ ဖိုင်တွေကို ရှာပါ။ အဲဒီမှာ အောက်ပါအတိုင်းပါဝင်ပါတယ်-
|
|
|
|
|
|
```bash
|
|
|
-| assets
|
|
|
-| enemyShip.png
|
|
|
-| player.png
|
|
|
-| index.html
|
|
|
-| app.js
|
|
|
-| package.json
|
|
|
```
|
|
|
|
|
|
သင့် project ကို `your-work` folder မှာ စတင်ဖို့ အောက်ပါ command ကို ရိုက်ပါ:
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**ဒီ command က ဘာလုပ်သလဲဆိုတာ:**
|
|
|
- **Project directory** ကို သွား
|
|
|
- **HTTP Server** ကို `http://localhost:5000` မှာ စတင်
|
|
|
- **Game files** တွေကို browser မှာ စမ်းသပ်နိုင်အောင် serve လုပ်
|
|
|
|
|
|
အထက်ပါ command က `http://localhost:5000` မှာ HTTP Server ကို စတင်ပါမယ်။ Browser ကို ဖွင့်ပြီး အဲဒီလိပ်စာကို ထည့်ပါ၊ အခုအချိန်မှာ hero နဲ့ ရန်သူတွေကို render လုပ်ထားပြီး – ဘာမှ မလှုပ်ရှားသေးပါဘူး!
|
|
|
|
|
|
### Code ထည့်သွင်းပါ
|
|
|
|
|
|
1. **Dedicated objects** တွေကို `hero`, `enemy` နဲ့ `game object` အတွက် ထည့်ပါ၊ အဲဒီ object တွေမှာ `x` နဲ့ `y` properties ရှိသင့်ပါတယ်။ ([Inheritance or composition](../README.md) အပိုင်းကို သတိရပါ။)
|
|
|
|
|
|
*အကြံပြုချက်* `game object` ဟာ `x` နဲ့ `y` နဲ့ canvas ပေါ်မှာ ကိုယ့်ကိုယ်
|
|
|
- **အကြောင်းအရာဖန်တီးသည်** ရန်သူများကို nested loops အသုံးပြု၍ grid အဖြစ်ဖန်တီးသည်။
|
|
|
- **ပုံရိပ်ပေးသည်** ရန်သူ object တစ်ခုချင်းစီအတွက် ရန်သူပုံရိပ်ကိုပေးသည်။
|
|
|
- **ထည့်သွင်းသည်** ရန်သူတစ်ခုချင်းစီကို global game objects array ထဲသို့ထည့်သွင်းသည်။
|
|
|
|
|
|
ထို့နောက် `createHero()` function ကိုထည့်သွင်းပြီး hero အတွက်လည်း အတူတူသောလုပ်ငန်းစဉ်ကိုလုပ်ဆောင်ပါ။
|
|
|
|
|
|
```javascript
|
|
|
function createHero() {
|
|
|
hero = new Hero(
|
|
|
canvas.width / 2 - 45,
|
|
|
canvas.height - canvas.height / 4
|
|
|
);
|
|
|
hero.img = heroImg;
|
|
|
gameObjects.push(hero);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Hero ဖန်တီးမှု၏လုပ်ဆောင်ချက်များ:**
|
|
|
- **တည်နေရာချထားသည်** Hero ကို screen ၏အောက်ခြေဗဟိုတွင်ထားသည်။
|
|
|
- **ပုံရိပ်ပေးသည်** Hero object အတွက် Hero ပုံရိပ်ကိုပေးသည်။
|
|
|
- **ထည့်သွင်းသည်** Hero ကို rendering အတွက် game objects array ထဲသို့ထည့်သွင်းသည်။
|
|
|
|
|
|
နောက်ဆုံးတွင် `drawGameObjects()` function ကိုထည့်သွင်းပြီး drawing ကိုစတင်ပါ:
|
|
|
|
|
|
```javascript
|
|
|
function drawGameObjects(ctx) {
|
|
|
gameObjects.forEach(go => go.draw(ctx));
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Drawing function ကိုနားလည်ခြင်း:**
|
|
|
- **Iterates** game objects array ထဲရှိ object အားလုံးကို iterate လုပ်သည်။
|
|
|
- **Calls** object တစ်ခုချင်းစီ၏ `draw()` method ကိုခေါ်သည်။
|
|
|
- **Passes** canvas context ကို object များ rendering လုပ်နိုင်ရန်ပေးသည်။
|
|
|
|
|
|
သင့်ရန်သူများသည် သင့် Hero spaceship ကိုတိုက်ခိုက်ရန်စတင်မည်!
|
|
|
|
|
|
```
|
|
|
|
|
|
and add a `createHero()` function to do a similar process for the hero.
|
|
|
|
|
|
```javascript
|
|
|
function createHero() {
|
|
|
hero = new Hero(
|
|
|
canvas.width / 2 - 45,
|
|
|
canvas.height - canvas.height / 4
|
|
|
);
|
|
|
hero.img = heroImg;
|
|
|
gameObjects.push(hero);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
နောက်ဆုံးတွင် `drawGameObjects()` function ကိုထည့်သွင်းပြီး drawing ကိုစတင်ပါ:
|
|
|
|
|
|
```javascript
|
|
|
function drawGameObjects(ctx) {
|
|
|
gameObjects.forEach(go => go.draw(ctx));
|
|
|
}
|
|
|
```
|
|
|
|
|
|
သင့်ရန်သူများသည် သင့် Hero spaceship ကိုတိုက်ခိုက်ရန်စတင်မည်!
|
|
|
|
|
|
---
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
သင့်ဂိမ်းကိုပိုမိုပြည့်စုံစေမည့်အခွင့်အရေးတစ်ခုရှိသည်: boundaries နှင့် smooth controls ထည့်သွင်းခြင်း။ လက်ရှိတွင် သင့် Hero သည် screen အပြင်သို့ပျံသွားနိုင်ပြီး၊ လှုပ်ရှားမှုသည် ခပ်ခပ်တက်တက်ဖြစ်နိုင်သည်။
|
|
|
|
|
|
**သင့်မစ်ရှင်:** သင့် spaceship ကိုပိုမိုလက်တွေ့ကျစေရန် screen boundaries နှင့် smooth controls ကိုထည့်သွင်းပါ။ NASA ၏ flight control systems များက spacecraft များကို safe operational parameters များကျော်လွန်ခြင်းမှကာကွယ်ပေးသည့်နည်းလမ်းများနှင့်တူသည်။
|
|
|
|
|
|
**လုပ်ဆောင်ရန်:** သင့် Hero spaceship ကို screen အတွင်းတွင်ထားနိုင်သောစနစ်တစ်ခုဖန်တီးပြီး၊ controls များကို smooth ဖြစ်စေရန်လုပ်ဆောင်ပါ။ ကစားသူများသည် arrow key ကိုဖိထားသောအခါ၊ သင်္ဘောသည် discrete steps များဖြစ်မည်မဟုတ်ဘဲ ဆွဲဆောင်မှုရှိရှိ glide လုပ်သွားသင့်သည်။ Screen boundaries တွင်ရောက်သောအခါ visual feedback ထည့်သွင်းပါ - play area ၏အနားကိုပြသရန် subtle effect တစ်ခုဖြစ်နိုင်သည်။
|
|
|
|
|
|
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) အကြောင်းပိုမိုလေ့လာရန်ဒီမှာကြည့်ပါ။
|
|
|
|
|
|
## 🚀 Challenge
|
|
|
|
|
|
Project များကြီးလာသည်နှင့်အမျှ code organization သည်ပိုမိုအရေးကြီးလာသည်။ သင့် file တွင် functions, variables, classes များစွာရောနှောနေသည်ကိုသတိထားမိနိုင်သည်။ Apollo mission code ကိုစီမံခန့်ခွဲခဲ့သော engineers များက မတူညီသောအဖွဲ့များအတူတကွအလုပ်လုပ်နိုင်ရန်အတွက် maintainable systems များဖန်တီးခဲ့သည့်နည်းလမ်းများကိုသတိရစေသည်။
|
|
|
|
|
|
**သင့်မစ်ရှင်:**
|
|
|
Software architect တစ်ဦးအနေနှင့်စဉ်းစားပါ။ ၆ လအကြာတွင် သင် (သို့မဟုတ် teammate တစ်ဦး) သည် code တွင်ဘာတွေဖြစ်နေသည်ကိုနားလည်နိုင်ရန်ဘယ်လိုစီမံခန့်ခွဲမည်နည်း။ အခုအချိန်တွင် file တစ်ခုထဲတွင်ရှိနေသော်လည်း၊ သင့် code ကိုပိုမိုကောင်းမွန်စေရန်အောက်ပါအချက်များကိုလုပ်ဆောင်နိုင်သည်:
|
|
|
|
|
|
- **ဆက်စပ်သော function များကို grouping** လုပ်ပြီး comment header များဖြင့်ရှင်းလင်းစွာခွဲခြားထားပါ။
|
|
|
- **အရေးပါသောအပိုင်းများကိုခွဲခြားထားခြင်း** - game logic ကို rendering မှခွဲထားပါ။
|
|
|
- **အမည်ပေးမှုစနစ်ကိုတိကျစွာအသုံးပြုခြင်း** variables နှင့် functions များအတွက်။
|
|
|
- **Modules သို့မဟုတ် namespaces ဖန်တီးခြင်း** သင့်ဂိမ်း၏ aspect များကိုစီမံခန့်ခွဲရန်။
|
|
|
- **Documentation ထည့်သွင်းခြင်း** အဓိကအပိုင်းတစ်ခုချင်းစီ၏ရည်ရွယ်ချက်ကိုရှင်းလင်းစွာဖော်ပြထားပါ။
|
|
|
|
|
|
**စဉ်းစားရန်မေးခွန်းများ:**
|
|
|
- သင့် code ၏ဘယ်အပိုင်းများကိုပြန်လည်ကြည့်ရှုသောအခါနားလည်ရန်အခက်အခဲများရှိသနည်း။
|
|
|
- တစ်စုံတစ်ဦးကအထောက်အကူပြုရန်ပိုမိုလွယ်ကူစေရန် သင့် code ကိုဘယ်လိုစီမံခန့်ခွဲနိုင်မည်နည်း။
|
|
|
- Power-ups သို့မဟုတ်ရန်သူအမျိုးအစားအသစ်များထည့်သွင်းလိုပါကဘာတွေဖြစ်မည်နည်း။
|
|
|
|
|
|
## Post-Lecture Quiz
|
|
|
|
|
|
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)
|
|
|
|
|
|
## Review & Self Study
|
|
|
|
|
|
ကျွန်ုပ်တို့သည်အခြေခံမှစတင်ဖန်တီးနေပြီး၊ သင်ယူရန်အတွက်အလွန်ကောင်းမွန်သည်။ သို့သော်လျှို့ဝှက်ချက်တစ်ခုရှိသည် – JavaScript frameworks အလွန်အမင်းကောင်းမွန်သောအရာများရှိသည်။ ကျွန်ုပ်တို့ဖော်ပြခဲ့သောအခြေခံအချက်များကိုသင်အဆင်ပြေစွာနားလည်သောအခါ၊ [ရရှိနိုင်သောအရာများကိုလေ့လာရန်](https://github.com/collections/javascript-game-engines) တန်ဖိုးရှိသည်။
|
|
|
|
|
|
Frameworks များကို tools ကိုလက်ဖြင့်လုပ်ခြင်းမဟုတ်ဘဲ tool box ကောင်းမွန်သောအရာတစ်ခုရှိခြင်းအဖြစ်စဉ်းစားပါ။ ၎င်းတို့သည် code organization အခက်အခဲများကိုဖြေရှင်းနိုင်ပြီး၊ သင့်ကိုယ်တိုင်တစ်ပတ်ရက်ကြာအချိန်ယူရမည့် features များကိုပေးနိုင်သည်။
|
|
|
|
|
|
**လေ့လာရန်တန်ဖိုးရှိသောအရာများ:**
|
|
|
- Game engines များက code ကိုဘယ်လိုစီမံခန့်ခွဲထားသည်ကိုလေ့လာပါ – ၎င်းတို့အသုံးပြုသောနည်းလမ်းများကိုကြည့်ပြီးအံ့ဩမိပါမည်။
|
|
|
- Canvas games များကို butter-smooth အဖြစ်လုပ်ဆောင်ရန် performance tricks များ။
|
|
|
- Modern JavaScript features များသည် သင့် code ကိုပိုမိုသန့်ရှင်းစေပြီး maintainable ဖြစ်စေမည့်နည်းလမ်းများ။
|
|
|
- Game objects များနှင့်၎င်းတို့၏ဆက်နွယ်မှုများကိုစီမံခန့်ခွဲရန်နည်းလမ်းများ။
|
|
|
|
|
|
## Assignment
|
|
|
|
|
|
[Comment your code](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**အကြောင်းကြားချက်**:
|
|
|
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။ |
