.png)
Code Your First HTML5 Game, 80 lines of code in 5 minutes. | Line 80න් HTML5 ගේම් එකක් ලියමු !
We'll talk about the background later, and straight away dive in to coding.
First things first, open your favorite text/code editor (the one I'm using is called Brackets check it out here). We are basically only going to use HTML5's canvas element and classic JavaScript for this tutorial, so believe me you will be surprised with how little effort is needed to get your very own game up and running. What we will be making is a classic pong game where we can play against the game AI. Two players has two paddles for each, the game is to keep the ball in play without letting it go out of the horizontal limits.
We'll start by opening the <html> tags and defining our canvas.
What we want is that our game loads as soon as the web page loads, to do that we can use the window.onload function.
The variables on top are not being used just yet, just read the commnet lines to get to know them, I will further explain about them when they are being used in the code.
we assign the canvas element we placed on our HTML to the variable 'c', as 'cc' we will assign the draw buffer of the canvas where all the frames get sent to. By the line "setInterval(update,1000/30)" we tell javascript to call the reset() function (which we will get to in a minute) 30 times a second. Our player control will be through the mouse input, line "c.addEventListener" is to initialize that 'mousemove' listener.
'e.clientY' gives the mouse y co-ordinate (-ph/2 is to get the moving pivot of the paddle to the center of the paddle)
We shall now, write our update function.
we will now draw all the components in our game to our draw buffer and there to the canvas. As you can see all the comments explain what code lines draw what components. The function "fillRect()" gets 4 parameters, start x, start y, width, height, respectively. (consider that drawing is done from left to right i.e co-ordinate (0,0) is the top left corner of the screen )
Now we have to write our game rules and physics rules.
first we'll write the vertical edge collision rules, where the ball should bounce off the top and bottom walls of the game.
First things first, open your favorite text/code editor (the one I'm using is called Brackets check it out here). We are basically only going to use HTML5's canvas element and classic JavaScript for this tutorial, so believe me you will be surprised with how little effort is needed to get your very own game up and running. What we will be making is a classic pong game where we can play against the game AI. Two players has two paddles for each, the game is to keep the ball in play without letting it go out of the horizontal limits.
We'll start by opening the <html> tags and defining our canvas.
<html> <canvas id='gc' width= '640' height='480'></canvas> <script></script> </html>
What we want is that our game loads as soon as the web page loads, to do that we can use the window.onload function.
p1y = p2y =40; //paddle positions of player1 and player2
pt = 10; ph = 100; //paddle thickness and paddle height
bx = by = 50; // ball x,y co-ordinates
bd = 10; //ball dimentions or ball size
xv = yv = 4; // ball's x and y velocities
score1 =0; score2 =0; //scores of player1 and player2
ais = 2; // AI paddle speed
window.onload = function(){ //call this function as soon as the game starts //update function
c = document.getElementById('gc'); //get the canvas
cc = c.getContext('2d'); // get graphics draw buffer
setInterval(update,1000/30); //update func gets called 30 times a second
c.addEventListener('mousemove', function(e){
p1y = e.clientY-ph/2;
});
}
The variables on top are not being used just yet, just read the commnet lines to get to know them, I will further explain about them when they are being used in the code.
we assign the canvas element we placed on our HTML to the variable 'c', as 'cc' we will assign the draw buffer of the canvas where all the frames get sent to. By the line "setInterval(update,1000/30)" we tell javascript to call the reset() function (which we will get to in a minute) 30 times a second. Our player control will be through the mouse input, line "c.addEventListener" is to initialize that 'mousemove' listener.
'e.clientY' gives the mouse y co-ordinate (-ph/2 is to get the moving pivot of the paddle to the center of the paddle)
We shall now, write our update function.
function update() bx += xv; by += yv; cc.fillStyle = 'black'; //set fill color to 'black' cc.fillRect(0,0,c.width,c.height); //draw the black game background cc.fillStyle = 'white'; //set fill color to 'white' cc.fillRect(0,p1y,pt,ph); // drawing the paddles cc.fillRect(c.width-pt,p2y,pt,ph); // draw player2 paddle in the right corner. cc.fillRect(bx-bd/2,by-bd/2,bd,bd); //draw the ball cc.fillText(score1,100,100); // score1 label cc.fillText(score2,c.width-100,100); // score2 labelwe increment our ball x and y coordinates with the ball x,y velocities to simply make the ball move.
we will now draw all the components in our game to our draw buffer and there to the canvas. As you can see all the comments explain what code lines draw what components. The function "fillRect()" gets 4 parameters, start x, start y, width, height, respectively. (consider that drawing is done from left to right i.e co-ordinate (0,0) is the top left corner of the screen )
Now we have to write our game rules and physics rules.
first we'll write the vertical edge collision rules, where the ball should bounce off the top and bottom walls of the game.
if(by<0 && yv < 0){//if the ball is traveling up and above upper y dimension
yv =-yv;
}
if(by>c.height && yv > 0){//similarly if the ball is traveling downwards below c.height
yv = -yv;
}
We will now handle our horizontal movement rules. Things get a little bit tricky here since these rules
provide the point scoring mechanism is also included in this.
if(bx<0+pt){ //LEFT SIDE
if(by>p1y && by<p1y+ph){//if ball is withing paddle top and paddle bottom then bounce
xv = -xv;
dy = by-(p1y+ph/2); //delta y is the speed factor
yv = dy*0.3; // y velocity is set to this much
}
else{ //else missed
score2++; //increase palyer 2 score
reset(); //3.29
}
}
The top most if condition checks that the ball has reached the left vertical limit if so, the second 'if" condition is checked for the ball being within the paddle height.
If true :
then we should bounce the ball off the paddle. So the xv (x velocity of the ball) is immediately reversed. There is a trick to how would the y velocity of the ball will behave. ( try to understand how it is done ;) ).
then we should bounce the ball off the paddle. So the xv (x velocity of the ball) is immediately reversed. There is a trick to how would the y velocity of the ball will behave. ( try to understand how it is done ;) ).
else :
this means the ball is missing the paddle, then we should increase the score of the opposite player and reset the game. We haven't written the reset() function yet, its time to insert that in to the code.
function reset(){ //resets the ball
bx = c.width/2; //you can play around with these values these are just prototype values
by = c.height/2;
xv = -xv;
yv = 3;
}
The right side will be similar, you can identify the differences in the code.if(bx>c.width-pt){ //horizontal movement //RIGHT SIDE
if(by>p2y && by<p2y+ph){ //if ball is withing paddle top and paddle bottom then bounce
xv = -xv;
dy = by-(p2y+ph/2); //delta y is the speed factor
yv = dy*0.3; // y velocity is set to this much
}
else{ //else missed
score1++; //increase palyer 2 score
reset();
}
}
Our last trick will be writing the game AI.
if(xv>0){ //activate only when the ball is comming towards AI's paddle
if(p2y+ph/2<by){ //game AI p2y+ph is the length from the top of screen bottom of the paddle
p2y+=ais;
}
else{
p2y -= ais;
}
}
The second if states that the y coordinate of the moving ball is greater than the y coordinate of the center of the paddle, if so it increments the player2 paddle y coordinator by 'ais' much.
else the player2 paddle's y coordinate will be decremented by 'ais' much. Yeah that's it, that all the code you need. (dont forget to close the </script> and </html> tags :P )
so we went about just right, the full code should look like this,
so we went about just right, the full code should look like this,
<html>
<canvas id='gc' width= '640' height='480'></canvas>
<script>
p1y = p2y =40; pt = 10; ph = 100; bx = by = 50;
bd = 10;
xv = yv = 4;
score1 =0; score2 =0;
ais = 2;
window.onload = function(){
c = document.getElementById('gc');
cc = c.getContext('2d');
setInterval(update,1000/30);
c.addEventListener('mousemove', function(e){
p1y = e.clientY-ph/2;
});
}
function reset(){
bx = c.width/2;
by = c.height/2;
xv = -xv;
yv = 3;
}
function update(){
bx += xv;
by += yv;
cc.fillStyle = 'black';
cc.fillRect(0,0,c.width,c.height);
cc.fillStyle = 'white';
cc.fillRect(0,p1y,pt,ph);
cc.fillRect(c.width-pt,p2y,pt,ph);
cc.fillRect(bx-bd/2,by-bd/2,bd,bd);
cc.fillText(score1,100,100);
cc.fillText(score2,c.width-100,100);
if(by<0 && yv < 0){
yv =-yv;
}
if(by>c.height && yv > 0){
yv = -yv;
}
if(bx<0+pt){
if(by>p1y && by<p1y+ph){
xv = -xv;
dy = by-(p1y+ph/2);
yv = dy*0.3;
}
else{ //else missed
score2++; //increase palyer 2 score
reset(); //3.29
}
}
if(bx>c.width-pt){
if(by>p2y && by<p2y+ph){
xv = -xv;
dy = by-(p2y+ph/2);
yv = dy*0.3;
}
else{
score1++;
reset();
}
}
if(xv>0){
if(p2y+ph/2<by){
p2y+=ais;
}
else{
p2y -= ais;
}
}
}
</script>
</html>
Yeah ! That's it, run it on your favorite browser and see how much could you score !
You are free to modify and develop this game in anyway you want or come up with your own game ! (Don't forget to let me know)
අපි අද
කතාකරන්නේ විනාඩි 10කටත් වැඩ අඩු වෙලාවකින් අපේම game එකක් හදන විදිය ගැන. Game එක
ගැන කිව්වොත් අපි අද හදන්නේ classic pong game එකක්. ඒ කියන්නේ playersලා දෙන්නෙක් ඉන්නවා ඒ දෙන්නටම paddles (පිති | Bat)
දෙකක් තියෙනවා, බොලේ දෙපැත්තේ සීමා වලින් එලියට යන්න නොදී paddles පාවිච්චි කරලා සෙල්ලමේ
තියාගන්න එක තමි target එක. එහෙම කරන්න බැරිවෙලා බොලේ miss කරගන්නේ කව්ද, ඊට ප්රතිවිරුද්ධ
player ට ලකුණක් එකතු වෙනවා. මෙතැනදී අපේ ප්රතිවිරුද්ද player විදියට වැඩ කරන්නේ
අපි ලියන game AI එක. අපිට තියෙන්නේ එයාට against සෙල්ලන් කරන්න. අපිට game එක ලියාගන්න
ඕනි වෙන්නේ HTML5 ටිකකුයි, JavaScript ටිකකුයි විතරයි ! ඔයාල පුදුම වෙයි කොච්චර
ඉක්මනට සහ ලේසියෙන් අද කාලේ අපේම game එකක් ලියාගන්න පුලුවන්ද කියල. බයිලා කතා කරා
ඇති වගේ නිසා, අපි කෙලිම්ම වැඩේට බහිමු.
මුලිම්ම
ඔයාගේ කැමතිම text editor එක open කරගත්ත නං හරි (මම පාවිච්චි කරන එකට නං කියන්නේ “Brackets”
කියල, කැමති නං download කරගන්න පුළුවන් මෙතනින් ගිහින්). අපි මුලිම්ම <html> tag එකක්
ඇරලා අපේ game canvas එක define කරගමු.
<html> <canvas id='gc' width= '640' height='480'></canvas> <script></script> </html>
ඊළඟට
අපිට වෙන්න ඕනි මොකද්ද?, අපි වෙබ් page load වෙද්දීම අපේ game එකත් load වෙන්න ඕනි
වෙයි. ඒ නිසා අපි window.onload function එක ඇතුලට game එක load වෙන code ටික
ලියමු.
p1y = p2y =40; //paddle positions of player1 and player2
pt = 10; ph = 100; //paddle thickness and paddle height
bx = by = 50; // ball x,y co-ordinates
bd = 10; //ball dimentions or ball size
xv = yv = 4; // ball's x and y velocities
score1 =0; score2 =0; //scores of player1 and player2
ais = 2; // AI paddle speed
window.onload = function(){ //call this function as soon as the game starts //update function
c = document.getElementById('gc'); //get the canvas
cc = c.getContext('2d'); // get graphics draw buffer
setInterval(update,1000/30); //update func gets called 30 times a second
c.addEventListener('mousemove', function(e){
p1y = e.clientY-ph/2;
});
}
උඩම තියෙන variables ටික තාම පාවිච්චි වෙන්නේ නෑ, එත් එක්කම තියෙන comment ටික කියවල ඒවා
ගැන දල අදහසක් ගන්න, ඒවා පාවිච්චි වෙද්දී මම තව ඒවා ගැන කියල දෙන්නම්. ‘c’ කියන
canvas එකේ draw buffer eka, ඒ කියන්නේ හරියට අපි screen එකේ ඊළඟට අඳින්න ඕනි frame
variable එකට අපි අපේ HTML canvas එලෙමෙන්ට් එක assign කරගන්නවා, ‘cc’ කියන්නේ අපේ
eka යවන්නේ එතෙන්ට. setInterval(update,1000/30) එකෙන් අපි කරන්නේ screen එක
තප්පරෙකට 30 වතාවක් update කරන එක. update( ) function එක තාම අපි ලියල නෑ, එක අපි
මේකෙන් පස්සේ ලියමු. මෙතැනදී අපේ player ව අපි control කරන්නේ mouse එකෙන්, ඒ
වැඩේට අපි ඒ ඒ වෙලාවේ mouce pointer එකේ කණ්ඩාංක ගන්ඩ ඕනි.
c.addEventListener('mousemove',function(e){
p1y =e.clientY-ph/2;
});
මේ ටිකෙන් වෙන්නේ ඒක. p1y (player 1 ගේ
paddle position එක, ඒ කියන්නේ අපේ bat එක තියෙන තැන) එකට අපි mouse pointer එකේ y
කණ්ඩාංකය assign කරගන්නවා.
හරි අපිට දැන් update function
ලියන්න තියෙනවා,
function update() bx += xv; by += yv; cc.fillStyle = 'black'; //set fill color to 'black' cc.fillRect(0,0,c.width,c.height); //draw the black game background cc.fillStyle = 'white'; //set fill color to 'white' cc.fillRect(0,p1y,pt,ph); // drawing the paddles cc.fillRect(c.width-pt,p2y,pt,ph); // draw player2 paddle in the right corner. cc.fillRect(bx-bd/2,by-bd/2,bd,bd); //draw the ball cc.fillText(score1,100,100); // score1 label cc.fillText(score2,c.width-100,100); // score2 label
පලවෙනි line දෙකෙන්
කියවෙන්නේ අපේ බොලේ movement එක ගැන. බොලේ x, y කණ්ඩාංක xv,yv (x,y ප්රවේග) තරම්
වලින් වර්ධනය (increment) වෙන්න ඕනි. මේ වදෙන් තමි බොලේ ගමන් කරන්න පටන් ගන්නේ.
comments වල තියෙන
විදියට ඊළඟට අපි game එකේ components ටික screen එකට ඇඳගමු. මේකට අපිට ඕනි වෙන්නේ ‘cc’
variable එක. උ.දා. "fillRect()" ෆනක්ශන් එක ගත්තම එකට parameters 4ක් ගන්නවා පටන් ගන්න x කණ්ඩාංකය, පටන්
ගන්න y කණ්ඩාංකය, දිග සහ පළල (කිව්ව පිළිවෙලටම) . ඇත්තටම කිව්වොත්
canvas එකේ ඇඳේන හැමදේම ඇඳෙන්න පටන් ගන්නේ වම පැත්තෙන් කියල මතක තියාගන්න, ඒ
කියන්නේ මම (0,0) කණ්ඩාංකයේ ඉදල කොටුවක් ඇන්දොත් ඒක ඇඳෙන්න පටන් ගන්නේ ඉහල වම්
කොනෙන්.
දැන් අපිට තියෙන්නේ game
එකේ physics rules (භෞතික නීති) ටිකයි ලකුණු ගන්න නීති ටිකි ලියන්න.
කෙලින් අතට බොලේ හරස්
බිත්ති වල ගැටිලා, bounce වෙන motion එකට අදාළ rules එන්නේ මෙහෙමයි.
if(by<0 && yv < 0){//if the ball is traveling up and above upper y dimension
yv =-yv;
}
if(by>c.height && yv > 0){//similarly if the ball is traveling downwards below c.height
yv = -yv;
}
එත් එක්කම බොලේ හරස්
movement එකට අදාළ රීති ටිකි, scoring නීති ටිකි ලියල දාමු. මෙතන පොඩ්ඩක්
අවදානයෙන් තෙරුන් ගන්න දේවල් කිහිපයක් තියෙනවා, තේරුනේ නැත්තන් දෙතුන් පාරක් කියවල
බලන්න.
if(bx<0+pt){ //LEFT SIDE
if(by>p1y && by<p1y+ph){//if ball is withing paddle top and paddle bottom then bounce
xv = -xv;
dy = by-(p1y+ph/2); //delta y is the speed factor
yv = dy*0.3; // y velocity is set to this much
}
else{ //else missed
score2++; //increase palyer 2 score
reset(); //3.29
}
}
උඩම තියෙන if එකෙන්
check කරන්නේ බොලේ game screen එකේ වම කොනට ඇවිත්ද කියල එක බලල ඊළඟට අපි බලනවා
බොලේ තියෙන්නේ අපේ paddle එකේ උද කොනයි පහල කොනයි අතරේද කියල, කොටිම්ම කියනවා නං
බොලේ අපේ bat එකේ වදින්න යනවද කියන එකයි. එහෙම වදිනවා නං අපි කරන්න ඕනි වැඩ 2ක් තියෙනවා
, බොලේ x අක්ෂය දිගේ වේගෙයි y දිගේ වේගෙයි තීරණය කරන එක, බොලේ පිත්තේ වැදිලා අපහු
යන චලිතය තීරණය වෙන්නේ එකෙන්. xv = -xv එකෙන් අපි x ප්රවේගේ කෙලිම්ම ඍන කරනවා (ඒ
කියන්නේ අපහු යන චලිතයක්), y වේගේ තීරණය කරන්න අපි පොඩි trick එකක් කරනවා ( මේක
කරන්නේ බොලේ චලිතය ගොඩක් දුරට realistic ව තියාගන්න). එක ගැන පොඩ්ඩක් ඔයාලම හිතල
තෙරුන් ගන්න, code එක 2, 3න් පාරක් කියෙව්වම තේරෙනවා මොකද්ද කරන්න හදල තියෙන්නේ කියල.
දැන් අපි බලන්න ඕනි බොලේ
පිත්තේ වදින්නේ නැත්තන් මොකද කරන්න ඕනි කියල, else එකෙන් කියවෙන්නේ එක. එහෙම
වුනාම,බොලේ play එකෙන් එලියට යනවා, ඒ ගමන්ම ප්රතිවිරුද්ද ක්රීඩකයාට ලකුණක් එකතු
වෙන්න ඕනි. එහෙම වුනාම අපි game එක මුලින් පටන් ගත්ත තත්වෙට ගෙනත් තව රෝඋන්ඩ් එකක්
පටන් ගන්නවා එකට තමි reset( ) function එක call කරලා තියෙන්නේ.
ඇත්තටම කිව්වොත් reset( )
function එක අපි තාම ලියල නැ, එකත් ලියල දාමු.
function reset(){ //resets the ball
bx = c.width/2; //you can play around with these values these are just prototype values
by = c.height/2;
xv = -xv;
yv = 3;
}
මේක නං code එක කියෙව්වම
තේරෙයි ඔයාටල මොකද්ද වෙන්නේ කියල.
ඉස්සෙල්ල මම කතා කරේ වම්
පැත්තෙන් බොලේ එලියට ගියොත් හරි පිත්තේ වැදුනොත් හරි වෙන්න ඕනි දේවල් ටික, දකුණු
පැත්තටත් ඔය විදියටම code එකක් ලියවෙන්න ඕනි , සමහර variables ටිකක් විතරි වෙනස්
වෙන්නේ. කියෙව්වම තේරෙයි එක ගැන.
if(bx>c.width-pt){ //horizontal movement //RIGHT SIDE
if(by>p2y && by<p2y+ph){ //if ball is withing paddle top and paddle bottom then bounce
xv = -xv;
dy = by-(p2y+ph/2); //delta y is the speed factor
yv = dy*0.3; // y velocity is set to this much
}
else{ //else missed
score1++; //increase palyer 2 score
reset();
}
}
අන්තිමටම අපිට ලියන්න තියෙන්නේ අපේ game AI එක !
if(xv>0){ //activate only when the ball is comming towards AI's paddle
if(p2y+ph/2<by){ //game AI p2y+ph is the length from the top of screen bottom of the paddle
p2y+=ais;
}
else{
p2y -= ais;
}
}
අපේ AI එක වැඩ කරන්න
පටන් ගන්නේ බොලේ එයාගේ පැත්තට එද්දී විතරි එකයි පලවෙනි if එකෙන් කියල තියෙන්නේ.
මෙතන අපි කරන්නේ බොලේ y චලිතයට අනුව අපේ AI එකේ පිත්ත එහාට මෙහාට කරන එක. සරලව
කිව්වොත් බොලේ උඩ පැත්තට එද්දී AI එකේ පිත්ත උඩට move කිරීමක් වෙන්න ඕනි. ‘ais’
variable එකෙන් AI එක පිත්ත move කරන වේගේ තීරණය වෙන්නේ, ඔයාල මේ game එක වැඩි
දියුණු කරලා levels විදියට හදනවා නං එකෙන් වැඩක් ගන්න පුළුවන් :P තේරෙනවා නේ?
ඉස්සරහට යද්දී levels අමාරු වෙන්නත් එපැයි.
අහ් අමතක කරන්නේ නැතුව </script> tag එකයි </html> tag එකයි වහන්න. :D
file එක කැමති නමක් දීල “.html”extension එකෙන් save karanna.
final code එක එන්න ඕනි මෙහෙමයි,
<html>
<canvas id='gc' width= '640' height='480'></canvas>
<script>
p1y = p2y =40; pt = 10; ph = 100; bx = by = 50;
bd = 10;
xv = yv = 4;
score1 =0; score2 =0;
ais = 2;
window.onload = function(){
c = document.getElementById('gc');
cc = c.getContext('2d');
setInterval(update,1000/30);
c.addEventListener('mousemove', function(e){
p1y = e.clientY-ph/2;
});
}
function reset(){
bx = c.width/2;
by = c.height/2;
xv = -xv;
yv = 3;
}
function update(){
bx += xv;
by += yv;
cc.fillStyle = 'black';
cc.fillRect(0,0,c.width,c.height);
cc.fillStyle = 'white';
cc.fillRect(0,p1y,pt,ph);
cc.fillRect(c.width-pt,p2y,pt,ph);
cc.fillRect(bx-bd/2,by-bd/2,bd,bd);
cc.fillText(score1,100,100);
cc.fillText(score2,c.width-100,100);
if(by<0 && yv < 0){
yv =-yv;
}
if(by>c.height && yv > 0){
yv = -yv;
}
if(bx<0+pt){
if(by>p1y && by<p1y+ph){
xv = -xv;
dy = by-(p1y+ph/2);
yv = dy*0.3;
}
else{ //else missed
score2++; //increase palyer 2 score
reset(); //3.29
}
}
if(bx>c.width-pt){
if(by>p2y && by<p2y+ph){
xv = -xv;
dy = by-(p2y+ph/2);
yv = dy*0.3;
}
else{
score1++;
reset();
}
}
if(xv>0){
if(p2y+ph/2<by){
p2y+=ais;
}
else{
p2y -= ais;
}
}
}
</script>
</html>
හරි ! ඉවරයි, අපේ පලවෙනි
html game එකත් හැදුව එහෙනං. විනාඩි 10ක් වත් ගියේ නැද්ද මන්දා. දැන් ඉතින් ඔයාගේ
කැමතිම browser එකෙන් game එක run කරලා බලන්න. code එකත් එක්ක තව ටිකක් ඔට්ටු
වුනොත් අලුත්ම දෙයක් කරන්නත් පුළුවන්, try කරලා බලන්න. හැදුවොත් මටත් කියන්න,
ඔයාගේ ටොප් score එකත් එක්කම ;)