ဂိမ်းထိန်းချုပ်သူများ
အနီရောင်စတုရန်းကိုရွှေ့ရန် ခလုတ်များကို နှိပ်ပါ။
Control ထဲဝင်ပါ။
ယခု ကျွန်ုပ်တို့သည် အနီရောင်စတုရန်းကို ထိန်းချုပ်လိုပါသည်။
ခလုတ်လေးခု၊ အပေါ်၊ အောက်၊ ဘယ်နှင့် ညာတို့ကို ထည့်ပါ။
ရွေးချယ်ထားသော ဦးတည်ရာသို့ အစိတ်အပိုင်းကို ရွှေ့ရန် ခလုတ်တစ်ခုစီအတွက် လုပ်ဆောင်ချက်တစ်ခုရေးပါ။
componentconstructor တွင် ဂုဏ်သတ္တိအသစ် နှစ်ခုကို ပြုလုပ်ပြီး ၎င်းတို့ကို
speedX
နှင့် speedY. ဤဂုဏ်သတ္တိများကို မြန်နှုန်းညွှန်ကိန်းများအဖြစ် အသုံးပြုလျက်ရှိသည်။
အစိတ်အပိုင်း၏ အနေအထားကို ပြောင်းလဲရန် နှင့် ဂုဏ်သတ္တိများ ကို အသုံးပြုသည့် componentတည်ဆောက် သူတွင် လုပ်ဆောင်ချက်တစ်ခု ထည့်ပါ ။
newPos()speedXspeedY
အစိတ်အပိုင်းကိုမဆွဲမီ newpos လုပ်ဆောင်ချက်ကို updateGameArea လုပ်ဆောင်ချက်မှ ခေါ်သည်-
ဥပမာ
<script>
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;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
</script>
<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>
ရွှေ့ခြင်းကို ရပ်ပါ။
သင်အလိုရှိပါက ခလုတ်တစ်ခုကို လွှတ်လိုက်သောအခါ အနီရောင်စတုရန်းကို ရပ်တန့်နိုင်သည်။
အမြန်နှုန်းညွှန်ကိန်းများကို 0 သို့ သတ်မှတ်ပေးမည့် လုပ်ဆောင်ချက်တစ်ခု ထည့်ပါ။
သာမာန်ဖန်သားပြင်များနှင့် ထိတွေ့မျက်နှာပြင်နှစ်ခုလုံးကို ကိုင်တွယ်ဖြေရှင်းရန်၊ ကျွန်ုပ်တို့သည် စက်နှစ်ခုလုံးအတွက် ကုဒ်ကို ထည့်သွင်းပါမည်-
ဥပမာ
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
ကီးဘုတ်ကို Controller အဖြစ်
ကီးဘုတ်ပေါ်ရှိ မြှားခလုတ်များကို အသုံးပြု၍ အနီရောင်စတုရန်းကိုလည်း ထိန်းချုပ်နိုင်သည်။
သော့ကို ဖိထားခြင်းရှိမရှိ စစ်ဆေးသည့်နည်းလမ်းကို ဖန်တီးပြီး အရာဝတ္ထု ၏ key
ပိုင်ဆိုင်မှုကို သော့ကုဒ်အဖြစ် သတ်မှတ်ပါ။ myGameAreaသော့ကိုထုတ်ပြီးသောအခါ၊ keyပိုင်ဆိုင်မှုကို သတ်မှတ်ပါ false။
ဥပမာ
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);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
ထို့နောက် မြှားခလုတ်များထဲမှ တစ်ခုကို နှိပ်ပါက အနီရောင်စတုရန်းကို ရွှေ့နိုင်သည်-
ဥပမာ
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
ခလုတ်များစွာ နှိပ်ထားသည်။
တစ်ချိန်တည်းမှာ သော့တစ်ခုထက်ပိုပြီး နှိပ်ရင် ဘာဖြစ်မလဲ။
အထက်ဖော်ပြပါ ဥပမာတွင်၊ အစိတ်အပိုင်းသည် အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက်သာ ရွေ့လျားနိုင်သည်။ ယခု ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းကို ထောင့်ဖြတ်ရွှေ့စေလိုပါသည်။
အရာဝတ္ထု အတွက်
keys အခင်းအကျင်းတစ်ခုကို ဖန်တီးပြီး myGameAreaနှိပ်လိုက်သော ခလုတ်တစ်ခုစီအတွက် ဒြပ်စင်တစ်ခုကို ထည့်သွင်းပြီး ၎င်းကို တန်ဖိုးပေး trueကာ သော့ကို မနှိပ်တော့သည့်တိုင်အောင် တန်ဖိုးသည် မှန်နေမည်ဖြစ်ပြီး၊ တန်ဖိုးသည် သော့ဖွ င့် ဖြစ်ရပ် နားထောင်သူ လုပ်ဆောင်ချက်
falseတွင် ဖြစ်လာသည်-
ဥပမာ
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);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Mouse Cursor ကို Controller အဖြစ်အသုံးပြုခြင်း။
မောက်စ်ကာဆာ ကို အသုံးပြု၍ အနီရောင်စတုရန်းကို ထိန်းချုပ်လိုပါက မောက်စ် myGameAreaကာဆာ၏ x နှင့် y သြဒိနိတ်များကို အပ်ဒိတ်လုပ်မည့် အရာဝတ္တု တွင် နည်းလမ်းတစ်ခုကို ထည့်ပါ။
ဥပမာ
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original cursor
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
ထို့နောက် mouse cursor ကို အသုံးပြု၍ အနီရောင်စတုရန်းကို ရွှေ့နိုင်သည်-
ဥပမာ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
ဂိမ်းကို ထိန်းချုပ်ရန် မျက်နှာပြင်ကို ထိပါ။
ထိတွေ့မျက်နှာပြင်ပေါ်တွင် အနီရောင်စတုရန်းကိုလည်း ထိန်းချုပ်နိုင်သည်။
myGameAreaစခရင်ကိုထိသည့်နေရာ၏ x နှင့် y သြဒိနိတ်များကို အသုံးပြုသည့် အရာဝတ္တု တွင် နည်းလမ်းတစ်ခုကို ထည့်ပါ -
ဥပမာ
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);
window.addEventListener('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
ထို့နောက် အသုံးပြုသူသည် မောက်စ်ကာဆာအတွက် ကျွန်ုပ်တို့ပြုလုပ်ခဲ့သည့်အတိုင်း တူညီသောကုဒ်ကို အသုံးပြုခြင်းဖြင့် အသုံးပြုသူသည် စခရင်ကိုထိပါက အနီရောင်စတုရန်းကို ရွှေ့နိုင်သည်-
ဥပမာ
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Canvas ရှိ ထိန်းချုပ်သူများ
ကျွန်ုပ်တို့သည် ကင်းဗတ်စ်ပေါ်တွင် ကျွန်ုပ်တို့၏ကိုယ်ပိုင်ခလုတ်များကိုလည်း ဆွဲနိုင်ပြီး ၎င်းတို့ကို ထိန်းချုပ်ကိရိယာများအဖြစ် အသုံးပြုနိုင်သည်။
ဥပမာ
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myUpBtn = new component(30, 30, "blue", 50, 10);
myDownBtn = new component(30, 30, "blue", 50, 70);
myLeftBtn = new component(30, 30, "blue", 20, 40);
myRightBtn = new component(30, 30, "blue", 80, 40);
myGameArea.start();
}
ဤကိစ္စတွင် ခလုတ်တစ်ခုကို နှိပ်လိုက်ခြင်းရှိမရှိ သိရှိနိုင်သော လုပ်ဆောင်ချက်အသစ်တစ်ခုကို ထည့်ပါ။
mousedownမောက်စ်ခလုတ် ( နှင့် mouseup) ကို နှိပ်ခြင်း ရှိ၊ မရှိ စစ်ဆေးရန် ပွဲနားထောင်သူများကို ပေါင်းထည့်ခြင်းဖြင့် စတင်ပါ ။ ထိတွေ့မျက်နှာပြင်များကို ကိုင်တွယ်ဖြေရှင်းရန်၊ မျက်နှာပြင်ကို နှိပ်ထားခြင်းရှိမရှိ စစ်ဆေးရန် ( touchstartနှင့် touchend):
ဥပမာ
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);
window.addEventListener('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
ယခုတွင် myGameAreaအရာဝတ္တုတွင် ကလစ်တစ်ခု၏ x- နှင့် y-coordinates ကိုပြောပြသော ဂုဏ်သတ္တိများရှိသည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အပြာရောင်ခလုတ်များထဲမှ တစ်ခုပေါ်တွင် ကလစ်နှိပ်ခြင်း ဟုတ်၊ မဟုတ် စစ်ဆေးရန် ဤဂုဏ်သတ္တိများကို အသုံးပြုပါသည်။
နည်းလမ်းသစ်ကို ခေါ်သည် clicked၊ ၎င်းသည်
componentconstructor ၏နည်းလမ်းဖြစ်ပြီး ၎င်းသည် အစိတ်အပိုင်းကို နှိပ်ခြင်းရှိမရှိ စစ်ဆေးသည်။
လုပ်ဆောင်ချက် တွင် updateGameArea၊ အပြာရောင်ခလုတ်များထဲမှ တစ်ခုကို နှိပ်ပါက လိုအပ်သော လုပ်ဆောင်ချက်များကို လုပ်ဆောင်သည်-
ဥပမာ
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.clicked = function() {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var clicked = true;
if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
if (myUpBtn.clicked()) {
myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}