Game ေသးေသးေလးတစ္ခုေရးရေအာင္ေနာ္..။ အဓိကကေတာ့.. movement
ကုိ..ဘယ္လိုလုပ္လဲ...သိေစ ခ်င္တာပါ..။ ဒီတစ္ခါေတာ့..ရွင္းၿပပါ့မယ္..။
နည္းနည္းနားလည္လာလုိ႔ပါ.. :)
ပထမဆံုး.. Folder တစ္ ခုေဆာက္ ပ့ါမယ္..။ ၾကိဳက္တဲ့ေနရာမွာ ေဆာက္လုိက္ပါ..။
Folder ကုိ.. Game လုိ႔ေပးလိုက္ပါ..။
Game Folder ထဲမွာ.. images ဆုိတဲ့ folder တစ္ခုထပ္ေဆာက္ပါ.။ ၿပီးရင္..
Game Folder ေအာက္မွာပဲ. js ဆိုတဲ့ folder တစ္ခုထပ္ေဆာက္လုိက္ပါမယ္..။
ေအာက္က coding ေလးကုိ. copy ကူးလိုက္ပါ..။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
</head>
<body>
<script src="js/game.js"></script>
</body>
</html>
notepad မွာ..ထည့္ၿပီး..Game Folder ေအာက္မွာ.. index.html နဲ႔ Save လုိက္ပါ..။
1. Create the canvas
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
Canvas ဆိုတာ.. Game ကုိ..ဘယ္ေလာက္ size နဲ႔ ေပၚေစခ်င္တာလညး္ဆိုၿပီး.. ေနရာေလး..သတ္မွတ္လိုက္တာပါ..။
2d နဲ႔ပဲေရးမွာမုိ႔လို႔.. canvas.getContext("2d"); ဆိုၿပီးထည့္ထားတာပါ..။
width နဲ႔ height ကုိသတ္မွတ္ေပးပါမယ္..။
2. Include images
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
အခု.. ေနာက္ခံ background ထည့္ပါမယ္..။
https://github.com/lostdecade/simple_canvas_game/blob/master/images/background.png မွာ. background ေတြ႔ပါလိမ့္မယ္..။
background ေပၚမွာ.. right click ႏွိပ္ၿပီး.. Save Image As ကုိ.ႏွိပ္လိုက္ပါ..။
ပံုကုိ.. Game Folder ေအာက္က images folder
ထဲမွာ.backgroundဆုိတဲ့နာမည္နဲ႔...ထည့္လုိက္ပါ..။ bgImage.src =
"images/background.png"; က.. background image ကုိ..ထည့္တဲ့ပံုစံပါ..။
3. Game objects
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
Game ထဲမွာပါတဲ့..အေကာင္ေတြရဲ႔ေနရာကုိ.သတ္မွတ္တာပါ..။
https://github.com/lostdecade/simple_canvas_game/blob/master/images/hero.png မွာ.. Hero ပံုကို.. Save လုပ္လိုက္ပါ..။
Game Folder ေအာက္က...images Folder ထဲမွာ. Save ပါမယ္..။
https://github.com/lostdecade/simple_canvas_game/blob/master/images/monster.png မွာ. monster ပံုကုိ.. Save လုပ္လိုက္ပါ။
Game Folder ေအာက္က...images Folder ထဲမွာ. Save ပါမယ္..။
speed: 256 က..အၿမန္ႏွဳန္းကုိ..သတ္မွတ္တာပါ..။ hero မွာပဲပါပါတယ္.။ game play လိုက္ရင္.. monster က.မေရႊ႔ဘူးေလ..။
hero ပဲ..ေရႊ႔ရမွာပါ..။ ဒါေၾကာင့္.. monster ကုိ.အၿမန္ႏွဳန္းမသတ္ေပးထားပါဘူး..။
x: 0,y: 0 ဆိုတာ. postion သတ္မွတ္တာပါ..။ အေကာင္ေလးေတြရဲ႔ position က.. တစ္ခါနဲ႔တစ္ခါ..မတူလို႔.. 0 ေပးထားတာပါ..။
var monstersCaught = 0; က.. monster ကုိ..ထိမိတဲ့အၾကိမ္အေရအတြက္ပါ..။ စစၿခင္းဆိုေတာ့. 0 ေပးထားတာပါ..။
4. Keyboard Controls
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
ကစားတဲ့သူက..ေရြ႔လိုက္တဲ့ arrow key ေတြကုိ.. AddEventListener နဲ႔ဖမ္းပါတယ္..။
တကယ္လို႔.. down arrow key ကုိ..ႏွိပ္လိုက္မယ္ဆိုရင္.. keysDown ကုိ.. true ေပးလိုက္ပါတယ္..။
down arrow key ကုိ.. ႏွိပ္ေနရင္းနဲ႔.. up arrow key
ကုိ..ေၿပာင္းႏွိပ္ခဲ့မယ္ဆိုရင္..Down ကုိ.. delete လုပ္တဲ့အေနနဲ႔.. delete
keysDown[e.keyCode]; ဆိုၿပီး..ဖ်က္လိုက္ပါတယ္..။
5. Reset the game
// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
game ကို...အစကေန..ၿပန္ကစားတာပါ..။
အစကေန..ၿပန္ကစားမယ္ဆိုရင္.. hero နဲ႔.. monster ကုိ..ေနရာၿပန္သတ္မွတ္ေပးမွာပါ..။
hero ကုိ..ေနရာသတ္မွတ္ဖို႔... canvas ရဲ႔.. width ကုိ..တည္ 2နဲ႔စား..။
canvas ရဲ႔.. height ကုိ..တည္ 2နဲ႔စား..။ ရတဲ့.အေၿဖအရ.. x ၀င္ရိုးနဲ႔.. y
၀င္ရိုးသတ္မွတ္ပါတယ္..။
monster ကုိေတာ့.. canvas ရဲ႔.. width ထဲက. 64 ႏွဳတ္.. random ေခါက္ၿပီး.. 32 ေပါင္းပါတယ္...။ height လည္း..တူတူပါပဲ..။
coding အားလံုး..ကူးၿပီးလို႔.. game ကစားၿပီး.. refresh လုပ္ၾကည့္ပါ...။
hero ရဲ႔ေနရာက..မေၿပာင္းပါဘူး..။
monster ကေတာ့... refresh တစ္ခါလုပ္တုိင္း..တစ္ခါေၿပာင္းသြားပါတယ္.. ။
6. Update Game Objects
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
ကစားတ့ဲသူက.. hero နဲ႔.. monster ကုိ.. ေပးထားတဲ့.. position ကေန..စိတ္ၾကိဳက္ေရြ႔လိုက္တဲ့.တန္ဖိုးကုိ..တြက္ခ်က္ေပးတာပါ..။
7. Touching
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
hero နဲ႔.. monster နဲ႔... ထိမိသြားတယ္..ဆိုရင္.. monsterCaunght ကုိ.. 1 တိုးပါမယ္...။
game ကုိ..အစကေနၿပန္စပါတယ္..။
အဲ့ဒါေၾကာင့္.. အေပၚက reset the game function ကုိ..လွမ္းေခၚလိုက္ပါတယ္...။
8. Rendering
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
rendering က.. အေပၚဆံုးက.. canvas နဲ႔. background image နဲ႔..သက္ဆုိင္ပါတယ္..။
Image ေတြကို..ဒီတိုင္းထည့္လုိ႔မရပါဘူး... ctx.drawImage(bgImage, 0, 0); ဆိုၿပီး.ထည့္ရပါတယ္..။
hero နဲ႔.. monster လည္း..ဒီအတိုင္းပါပဲ..။ သူတို႔လည္း..ပံုေတြပဲေလ..။
position က x ၀င္ရိုးနဲ႔... y ၀င္ရိုးအတိုင္းသြားမွာမုိ႔လို႔.. hero.x , hero.y , monster.x , monster.y ဆိုၿပီး..သတ္မွတ္ထားတာပါ..။
ctx.fillStyle = "rgb(250, 250, 250)"; ဆိုေတာ့... Goblins caught: စာသားက.. အၿဖဴေရာင္နဲ႔.ေပၚေနတာပါ..။
font ကုိ. " Helvetica " သံုးထားပါတယ္..။
align က. left ထားၿပီး. basealign ကုိ. top ထားထားလို႔.. Goblins caught: က ..အေပၚ..ဘယ္ဘက္မွာ..ေပၚေနတာပါ..။
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32); ကေတာ့.. monster နဲ႔..ထိမိတဲ့..အၾကိမ္အေရအတြက္ကုိ..ၿပန္ၿပေပးထာတာပါ..။
Are they touching က. monsterCaught ကုိ..ၿပန္ေခၚၿပီး...သံုးထားတာပါ.။
9. Game Looping
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
game ကုိ..အၾကိမ္အေရ..ဘယ္ေလာက္နဲ႔..ေဆာ့မယ္ဆိုတာ..အတိအက်မရွိလို႔.. Looping ပတ္ၿပီးသံုးတာပါ..။
update(delta / 1000); render(); က..ဘယ္ game မဆို..ပံုေသပါပဲ..။ Formula လာေပါ့.. :)
10. Start Game
// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
Game
ကုိ..အစကေနကစားေတာ့မယ္ဆိုရင္...အရင္.ေဆာ့ၿပီးသား..အေဟာင္းေတြ..က်န္ခဲ့မွာစိုးလို႔..
reset(); ဆိုတဲ့.. function ကုိ..အရင္လွမ္းေခၚလိုက္တာပါ..။
ၿပီးရင္.. game ကုိ.. looping ပတ္ၿပီးေတာ့.. အေပၚက..အဆင့္ေတြကုိ..တစ္ဆင့္ခ်င္းလွမ္းေခၚၿပီး..အလုပ္လုပ္ပါတယ္..။
Notepad ထဲမွာ..ေရးထည့္ရမယ့္..ပံုစံက..ဒီလိုမ်ိဳးေလးပါ..။
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function ()
{
bgReady = true;
};
bgImage.src = "images/background.png";
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
အဲ့ဒါေတြအားလံုးကုိ.. copy ကူးၿပီး.. Game Folder ေအာက္က.. js Folder ထဲမွာ.. game.js ဆိုၿပီး.. Save လုပ္ပါမယ္.။
အားလံုးၿပီးသြားရင္.. Game Folder ထဲက.. index.html ကုိ.. double click ဖြင့္ၿပီး.. ကစားႏိုင္ပါၿပီ
ဒီေလာက္ဆိုရင္ေတာ့... game
တစ္ခုရဲ႔..အေၿခံသေဘာတရားကို...နားလည္မယ္လို႔..ထင္ပါတယ္..။ online
မွာလည္း..ရွာၾကည့္ၾကပါ..။ html ကိုသံုးၿပီး..ေရးထားတဲ့.. game
ေတြအမ်ားၾကီးပါပဲ..။ super mario လုိမ်ိဳး.. game
ကုိ..ကုိယ္တိုင္ထြင္ၾကည့္ၾကေတာ့ေပ့ါေနာ္.. ^_^
