ဂိမ်းပုံများ
အပြုံးကိုရွှေ့ရန် ခလုတ်များကို နှိပ်ပါ။
ပုံတွေကို ဘယ်လိုသုံးမလဲ။
ကင်းဗတ်စ်တစ်ခုပေါ်တွင် ပုံများထည့်ရန် getContext("2d") အရာဝတ္တုတွင် ထည့်သွင်းထားသော ရုပ်ပုံဂုဏ်သတ္တိများနှင့် နည်းလမ်းများရှိသည်။
ကျွန်ုပ်တို့၏ဂိမ်းတွင်၊ ရုပ်ပုံတစ်ခုအနေဖြင့် gamepiece ကိုဖန်တီးရန်၊ အစိတ်အပိုင်း constructor ကိုအသုံးပြုပါ၊ သို့သော်အရောင်တစ်ခုကိုရည်ညွှန်းမည့်အစား၊ သင်သည်ရုပ်ပုံ၏ url ကိုကိုးကားရမည်ဖြစ်သည်။ ထို့အပြင် ဤအစိတ်အပိုင်းသည် အမျိုးအစား "image" ဖြစ်သည်ကို တည်ဆောက်သူအား ပြောပြရပါမည်။
ဥပမာ
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
ကွန်ပြူတာတည်ဆောက်သူတွင် အစိတ်အပိုင်းသည် အမျိုးအစား "image" ရှိမရှိ စမ်းသပ်ပြီး built-in "new Image()" object constructor ကို အသုံးပြု၍ ရုပ်ပုံဝတ္ထုကို ဖန်တီးပါ။ ပုံကိုဆွဲရန်အဆင်သင့်ဖြစ်သောအခါ၊ fillRect နည်းလမ်းအစား drawImage method ကိုအသုံးပြုသည်-
ဥပမာ
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
ပုံများပြောင်းပါ။
သင်၏အစိတ်အပိုင်း၏အရာဝတ္တု၏ srcပိုင်ဆိုင်မှုကို ပြောင်းလဲခြင်းဖြင့်သင်နှစ်သက်သည့်အခါတိုင်းရုပ်ပုံကိုပြောင်းလဲနိုင်သည် ။image
ရွေ့လျားတိုင်း smiley ကို ပြောင်းလဲလိုပါက၊ အသုံးပြုသူသည် ခလုတ်တစ်ခုကို နှိပ်သည့်အခါ ပုံအရင်းအမြစ်ကို ပြောင်းပါ၊ ခလုတ်ကို မနှိပ်ပါက ပုံမှန်သို့ ပြန်သွားရန်။
ဥပမာ
function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
နောက်ခံပုံများ
၎င်းကို အစိတ်အပိုင်းတစ်ခုအဖြစ် ပေါင်းထည့်ခြင်းဖြင့် သင့်ဂိမ်းဧရိယာတွင် နောက်ခံပုံတစ်ပုံကို ပေါင်းထည့်ကာ ဘောင်တိုင်းရှိ နောက်ခံကို အပ်ဒိတ်လုပ်ပါ။
ဥပမာ
var myGamePiece;
var myBackground;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
နောက်ခံရွေ့
နောက်ခံကိုရွှေ့ရန် နောက်ခံအစိတ်အပိုင်း၏ speedXပိုင်ဆိုင်မှုကို ပြောင်းပါ-
ဥပမာ
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
နောက်ခံကွင်း
တူညီသောနောက်ခံ loop ကိုအမြဲတမ်းပြုလုပ်ရန်၊ ကျွန်ုပ်တို့သည် သီးခြားနည်းပညာတစ်ခုကို အသုံးပြုရပါမည်။
ဤအရာသည် နောက်ခံ တစ်ခုဖြစ်ကြောင်း အစိတ်အပိုင်းတည်ဆောက်သူအား ပြောပြခြင်းဖြင့် စတင်ပါ ။ အစိတ်အပိုင်းတည်ဆောက်သူသည် ပုံကို နှစ်ကြိမ်ထည့်မည်ဖြစ်ပြီး ပထမပုံပြီးနောက် ဒုတိယပုံအား ချက်ချင်းထည့်ပါမည်။
newPos()နည်းလမ်းတွင်၊ အစိတ်အပိုင်း၏ အနေအထားသည် ပုံ၏အဆုံးသို့ ရောက်ရှိသွားခြင်း ရှိ၊ မရှိ စစ်ဆေးပါ ၊ xရှိပါက၊ xအစိတ်အပိုင်း၏ အနေအထားကို 0 သို့ သတ်မှတ်ပါ-
ဥပမာ
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type == "background") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}