ဂိမ်း Canvas
HTML <canvas>
ဒြပ်စင်ကို ဝဘ်စာမျက်နှာပေါ်တွင် ထောင့်မှန်စတုဂံအရာဝတ္ထုအဖြစ် ပြသသည်-
HTML Canvas
HTML တွင် <canvas>
ဂိမ်းများပြုလုပ်ရန် အစိတ်အပိုင်းသည် ပြီးပြည့်စုံသည်။
<canvas>
ဒြပ်စင်သည် ဂိမ်းများပြုလုပ်ရန်အတွက် သင်လိုအပ်သော လုပ်ဆောင်နိုင်စွမ်းအားလုံးကို ပေးဆောင်သည် ။
<canvas>
. _
.getContext("2d")
ဒြပ်စင်တွင် ပုံဆွဲရန်အတွက် နည်းလမ်းများနှင့် ဂုဏ်သတ္တိများပါရှိသော အရာဟုခေါ်သော အရာဝတ္တု <canvas>
ဟုခေါ်သော built-in အရာတစ်ခုရှိသည် ။getContext("2d")
ကျွန်ုပ်တို့၏ Canvas Tutorial<canvas>
တွင် ဒြပ်စင်နှင့်
getContext("2d")
အရာဝတ္ထု အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
စတင်လိုက်ပါ။
ဂိမ်းတစ်ခုဖန်တီးရန်၊ ဂိမ်းကစားသည့်နေရာကို ဖန်တီးခြင်းဖြင့် စတင်ကာ ပုံဆွဲရန်အတွက် အဆင်သင့်ဖြစ်စေရန်-
ဥပမာ
function startGame() {
myGameArea.start();
}
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]);
}
}
ဤကျူတိုရီရယ်တွင် နောက်ပိုင်းတွင် အရာဝတ္ထု myGameArea
သည် နောက်ထပ် ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများ ရှိလိမ့်မည်။
လုပ်ဆောင်ချက် သည် အရာဝတ္ထု ၏ startGame()
နည်းလမ်းကို ခေါ်ဆိုသည် ။
start()
myGameArea
start()
နည်းလမ်းသည် ဒြပ်စင်တစ်ခုကို ဖန်တီးပြီး ၎င်းကို ဒြပ်စင် ၏ <canvas>
ပထမဆုံး ကွက်လပ်တစ်ခုအဖြစ် ထည့်သွင်းသည် <body>
။