ဂိမ်းလှည့်ခြင်း။
အနီရောင်စတုရန်းသည် လှည့်နိုင်သည်။
အစိတ်အပိုင်းများကိုလှည့်ခြင်း။
ဤသင်ခန်းစာတွင် အစောပိုင်းတွင် အနီရောင်စတုရန်းသည် gamearea ပေါ်တွင် ရွေ့လျားနိုင်သော်လည်း ၎င်းသည် လှည့်ခြင်း သို့မဟုတ် လှည့်ခြင်းမပြုနိုင်ပါ။
အစိတ်အပိုင်းများကိုလှည့်ရန်၊ ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းများကိုဆွဲသည့်ပုံစံကို ပြောင်းလဲရမည်ဖြစ်သည်။
ကင်းဗတ်ဒြပ်စင်အတွက် ရနိုင်သော တစ်ခုတည်းသောလှည့်ခြင်းနည်းလမ်းသည် ကင်းဗတ်တစ်ခုလုံးကို လှည့်ပေးမည်-
ကင်းဗတ်ပေါ်တွင် သင်ဆွဲသော အခြားအရာအားလုံးကိုလည်း သီးခြားအစိတ်အပိုင်းတစ်ခုသာမကဘဲ လှည့်ပတ်မည်ဖြစ်သည်။
ထို့ကြောင့် update()
ကျွန်ုပ်တို့သည် နည်းလမ်းအချို့ကို အပြောင်းအလဲလုပ်ရန် လိုအပ်သည်-
ဦးစွာ၊ ကျွန်ုပ်တို့သည် လက်ရှိ ပတ္တူအကြောင်းအရာကို သိမ်းဆည်းသည်-
ctx.save();
ထို့နောက် ဘာသာပြန်နည်းလမ်းကို အသုံးပြု၍ ကင်းဗတ်တစ်ခုလုံးကို သီးခြားအစိတ်အပိုင်း၏ အလယ်သို့ ရွှေ့လိုက်ပါ-
ctx.translate(x, y);
ထို့နောက် ကျွန်ုပ်တို့သည် rotate() နည်းလမ်းကို အသုံးပြု၍ အလိုရှိသောလှည့်ခြင်းကို လုပ်ဆောင်သည်-
ctx.rotate(angle);
ယခု ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းကို ကင်းဗတ်ပေါ်သို့ဆွဲရန် အဆင်သင့်ဖြစ်နေပါပြီ၊ သို့သော် ယခုအခါ ဘာသာပြန် (နှင့် လှည့်ထားသော) ကင်းဗတ်တွင် အနေအထား 0.0 တွင် ၎င်း၏ဗဟိုအနေအထားဖြင့် ၎င်းကိုဆွဲပါမည်။
ctx.fillRect(width / -2, height / -2, width, height);
ကျွန်ုပ်တို့ ပြီးသွားသောအခါ၊ ပြန်လည်ရယူသည့်နည်းလမ်းကို အသုံးပြု၍ ဆက်စပ်အရာဝတ္တုအား ၎င်း၏သိမ်းဆည်းထားသော အနေအထားသို့ ပြန်ရပါမည်-
ctx.restore();
အစိတ်အပိုင်းသည် လှည့်ပတ်ထားသည့် တစ်ခုတည်းသောအရာဖြစ်သည်-
Component Constructor ၊
constructor တွင် အစိတ်အပိုင်း ၏ ထောင့်ကိုကိုယ်စားပြုသည့် radian နံပါတ် component
ဟုခေါ်သော ဂုဏ်သတ္တိအသစ်တစ်ခု ရှိသည်။angle
constructor ၏ update
နည်းလမ်းမှာ component
အစိတ်အပိုင်းကို ကျွန်ုပ်တို့ဆွဲခဲ့ခြင်းဖြစ်ပြီး ဤနေရာတွင် အစိတ်အပိုင်းအား လှည့်ပတ်ခွင့်ပြုမည့် အပြောင်းအလဲများကို သင်တွေ့မြင်နိုင်သည်-
ဥပမာ
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 * Math.PI / 180;
myGamePiece.update();
}