ဂိမ်းအတားအဆီးများ
အနီရောင်စတုရန်းကိုရွှေ့ရန် ခလုတ်များကို နှိပ်ပါ။
အတားအဆီးအချို့ကိုထည့်ပါ။
ယခုကျွန်ုပ်တို့၏ဂိမ်းတွင်အတားအဆီးအချို့ကိုထည့်လိုပါသည်။
ဂိမ်းကစားသည့်နေရာသို့ အစိတ်အပိုင်းအသစ်တစ်ခု ထည့်ပါ။ အစိမ်းရောင်၊ 10px အကျယ်၊ 200px မြင့်အောင်လုပ်ပြီး ညာဘက်မှာ 300px နဲ့ 120px အောက်ထားပါ။
ဘောင်တိုင်းရှိ အတားအဆီး အစိတ်အပိုင်းကိုလည်း အပ်ဒိတ်လုပ်ပါ။
ဥပမာ
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
အတားအဆီးကို နှိပ်ပါ = Game Over
အထက်ဖော်ပြပါ ဥပမာတွင် သင်သည် အတားအဆီးကို ထိမိသောအခါ ဘာမှမဖြစ်ပါ။ ဂိမ်းတစ်ခုမှာတော့ ဒါက သိပ်ကျေနပ်စရာတော့ မဟုတ်ဘူး။
ကျွန်ုပ်တို့၏ အနီရောင်စတုရန်းသည် အတားအဆီးနှင့် ထိမိခြင်းရှိမရှိ မည်သို့သိနိုင်မည်နည်း။
အစိတ်အပိုင်းသည် အခြားအစိတ်အပိုင်းတစ်ခုနှင့် ပျက်စီးသွားခြင်းရှိမရှိ စစ်ဆေးပေးသည့် ကွန်ပြူတာတည်ဆောက်မှုတွင် နည်းလမ်းအသစ်တစ်ခုကို ဖန်တီးပါ။ frames updates တိုင်း၊ တစ်စက္ကန့်ကို အကြိမ် 50 လို့ခေါ်ပါတယ်။
20 မီလီစက္ကန့်ကြားကာလကို ရှင်းပေးသည့် အရာဝတ္တု stop()သို့ နည်းလမ်းတစ်ခု လည်း ထည့် ပါသည်။myGameArea
ဥပမာ
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);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
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);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
ရွေ့လျားခြင်းအတားအဆီး
အတားအဆီးက ငြိမ်နေတဲ့အခါ အန္တရာယ်မရှိတဲ့အတွက် အဲဒါကို ရွှေ့စေချင်တယ်။
myObstacle.xအပ်ဒိတ်တိုင်းတွင် ပိုင်ဆိုင်မှုတန်ဖိုးကို ပြောင်း ပါ-
ဥပမာ
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
အတားအဆီးများစွာ
အတားအဆီးများစွာကို ဘယ်လိုပေါင်းထည့်မလဲ။
၎င်းအတွက်ဘောင်များရေတွက်ခြင်းအတွက် ပိုင်ဆိုင်မှုတစ်ခုနှင့် ပေးထားသော frame rate ဖြင့် တစ်စုံတစ်ခုကို လုပ်ဆောင်ရန်အတွက် နည်းလမ်းတစ်ခု လိုအပ်ပါသည်။
ဥပမာ
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.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
လက်ရှိဘောင်နံပါတ်သည် ပေးထားသည့်ကြားကာလနှင့် ကိုက်ညီပါက ကြားကာလတစ်ခုစီတိုင်းသည် မှန်ပါသည်။
အတားအဆီးများစွာကို သတ်မှတ်ရန်၊ အတားအဆီး variable ကို array တစ်ခုအဖြစ် ဦးစွာကြေငြာပါ။
ဒုတိယ၊ ကျွန်ုပ်တို့သည် updateGameArea လုပ်ဆောင်ချက်တွင် အပြောင်းအလဲအချို့ ပြုလုပ်ရန် လိုအပ်ပါသည်။
ဥပမာ
var myGamePiece;
var myObstacles = [];
function updateGameArea() {
var x, y;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
y = myGameArea.canvas.height - 200
myObstacles.push(new component(10, 200, "green", x, y));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}
Function တွင် updateGameAreaပျက်ကျခြင်းရှိမရှိ သိရန် အတားအဆီးတိုင်းကို ကျော်ဖြတ်ရပါမည်။ ပျက်စီးသွားပါက updateGameAreaလုပ်ဆောင်ချက်ရပ်သွားမည်ဖြစ်ပြီး ပုံဆွဲခြင်း မပြုတော့ပါ။
လုပ်ဆောင်ချက် သည် updateGameAreaframe များကိုရေတွက်ပြီး 150th frame တိုင်းအတွက် အတားအဆီးတစ်ခုကို ပေါင်းထည့်သည်။
ကျပန်းအရွယ်အစား၏အတားအဆီးများ
ဂိမ်းကို နည်းနည်းပိုခက်ခဲပြီး ပျော်စရာဖြစ်အောင်၊ ကျပန်းအရွယ်အစား အတားအဆီးတွေကို ပို့ပေးမှာဖြစ်လို့ အနီရောင်စတုရန်းကို ပျက်မသွားအောင် အတက်အဆင်းလုပ်ရပါမယ်။
ဥပမာ
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}