ဂိမ်းအစိတ်အပိုင်းများ
ဂိမ်းဧရိယာတွင် အနီရောင်စတုရန်းတစ်ခု ထည့်ပါ-
အစိတ်အပိုင်းတစ်ခုထည့်ပါ။
gamearea တွင် အစိတ်အပိုင်းများကို ပေါင်းထည့်နိုင်စေမည့် component constructor တစ်ခုကို ပြုလုပ်ပါ။
Object constructor ကို ခေါ်ပြီး
componentကျွန်ုပ်တို့၏ ပထမဆုံး အစိတ်အပိုင်းကို ဖန်တီးသည် myGamePiece:
ဥပမာ
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
အစိတ်အပိုင်းများသည် ၎င်းတို့၏ အသွင်အပြင်နှင့် လှုပ်ရှားမှုများကို ထိန်းချုပ်ရန် သတ္တိနှင့် နည်းလမ်းများရှိသည်။
ဘောင်များ
ဂိမ်းကို လုပ်ဆောင်ချက်အတွက် အဆင်သင့်ဖြစ်စေရန်၊ ရုပ်ရှင်တစ်ကားတွင် ဖရိမ်များကဲ့သို့ဖြစ်သည့် တစ်စက္ကန့်လျှင် 50 ကြိမ် ပြသမှုကို အပ်ဒိတ်လုပ်ပါမည်။
ပထမဦးစွာ၊ ဟုခေါ်သော function အသစ်ကိုဖန်တီးပါ updateGameArea()။
အ ရာဝတ္တုတွင်၊ လုပ်ဆောင်ချက်ကို 20th millisecond တိုင်း (တစ်စက္ကန့်လျှင် အကြိမ် 50) လုပ်ဆောင် myGameAreaမည့် ကြားကာလတစ်ခုကို ထည့်ပါ ။ ကင်းဗတ်တစ်ခုလုံးကို ရှင်းလင်းစေ updateGameArea()သည့် လုပ်ဆောင်ချက်ဟုလည်း ခေါ်သည် ။clear()
constructor တွင် ၊ အစိတ်အပိုင်းတစ်ခု၏ပုံဆွဲခြင်းကိုကိုင်တွယ်ရန်၊ componentဟုခေါ်သောလုပ်ဆောင်ချက်တစ်ခုကိုထည့်ပါ ။
update()
updateGameArea()function သည် the နှင့် clear()method ကို update()ခေါ်သည်။
ရလဒ်မှာ အစိတ်အပိုင်းကို တစ်စက္ကန့်လျှင် အကြိမ် 50 ဆွဲပြီး ရှင်းထုတ်ရသည် ။
ဥပမာ
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
Move လုပ်ပါ။
အနီရောင်စတုရန်းအား တစ်စက္ကန့်လျှင် အကြိမ် 50 ရေးဆွဲထားကြောင်း သက်သေပြရန်၊ ကျွန်ုပ်တို့သည် ဂိမ်းဧရိယာကို အပ်ဒိတ်လုပ်တိုင်း x အနေအထား (အလျားလိုက်) ကို တစ် pixel ဖြင့် ပြောင်းလဲပါမည်။
ဥပမာ
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
ဂိမ်းဧရိယာကို ဘာကြောင့်ရှင်းလင်းတာလဲ။
အပ်ဒိတ်တိုင်းတွင် ဂိမ်းဧရိယာကို ရှင်းလင်းရန် မလိုအပ်ဟု ထင်နိုင်သည်။ သို့သော်၊
clear()ကျွန်ုပ်တို့သည် နည်းလမ်းကို ချန်ထားခဲ့ပါက၊ အစိတ်အပိုင်း၏ ရွေ့လျားမှုအားလုံးသည် ၎င်းကို နောက်ဆုံးဘောင်တွင် နေရာချထားသည့် လမ်းကြောင်းတစ်ခု ချန်ထားခဲ့လိမ့်မည်-
ဥပမာ
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Size ကိုပြောင်းပါ။
အစိတ်အပိုင်း၏ အကျယ်နှင့် အမြင့်ကို သင်ထိန်းချုပ်နိုင်သည်-
ဥပမာ
10x140 ပစ်ဇယ်စတုဂံ ဖန်တီးပါ-
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
အရောင်ပြောင်းပါ။
အစိတ်အပိုင်း၏အရောင်ကို သင်ထိန်းချုပ်နိုင်သည်-
ဥပမာ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
hex၊ rgb သို့မဟုတ် rgba ကဲ့သို့သော အခြားအရောင်တန်ဖိုးများကိုလည်း သင်အသုံးပြုနိုင်သည်-
ဥပမာ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
ရာထူးကိုပြောင်းပါ။
ကျွန်ုပ်တို့သည် ဂိမ်းဧရိယာတွင် အစိတ်အပိုင်းများကို နေရာချထားရန် x- နှင့် y-coordinates ကိုအသုံးပြုသည်။
ကင်းဗတ်စ်၏ ဘယ်ဘက်အပေါ်ထောင့်တွင် သြဒိနိတ်များ (0.0) ပါရှိသည်။
၎င်း၏ x နှင့် y သြဒိနိတ်များကို ကြည့်ရန် အောက်ဖော်ပြပါ ဂိမ်းဧရိယာကို မောက်စ်ဖြင့် နှိပ်ပါ။
ဂိမ်းဧရိယာတွင် သင်နှစ်သက်သည့်နေရာတိုင်းတွင် အစိတ်အပိုင်းများကို နေရာချထားနိုင်သည်-
ဥပမာ
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
အစိတ်အပိုင်းများစွာ
ဂိမ်းဧရိယာတွင် သင်နှစ်သက်သလောက် အစိတ်အပိုင်းများစွာကို သင်ထည့်နိုင်သည်။
ဥပမာ
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
အစိတ်အပိုင်းများကို ရွှေ့ခြင်း။
အစိတ်အပိုင်းသုံးခုလုံးကို မတူညီသော ဦးတည်ရာသို့ ရွေ့လျားစေသည်-
ဥပမာ
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}