Today we are going to accomplish rendering the game. That is our goal for this tutorial.
so here is the code..
alphabet.html which holds the canvas..
Code: Select all
<!doctype html>
<html>
<head>
<title>Qaabeeynta javascript</title>
<script src= "alphabet.js"></script>
</head>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
</body>
</html>Code: Select all
var tirada_x;
var tirada_y
var canvas;
var miiska;
var tirada_sawirada=6;
var sawirada_width=30;
var sawirada_height=20;
var sawarida_array=new Array(tirada_sawirada);
function soo_saar(){
canvas=document.getElementById("canvas");
miiska=canvas.getContext("2d");
tirada_x=canvas.width -(sawirada_width);
tirada_y=canvas.height-(sawirada_height);
wac_sawirada();//functionkaa wuxuu ku lifaaqinaay tirada sawirada
}
// functionkii wac_sawirada hadaa suubisaneenaa
function wac_sawirada(){
var sawir;
for(var i=0; i<tirada_sawirada; i++)
{
//variableka sawir waxaan ku lifaaqineeynaa functionka suubi_sawir
sawir=suubi_sawir();
//hadana variablekii tirada_sawirada waxaan ku lifaaqineeynaa variableka sawir
sawirada_array=sawir;
}
}
//hada waxaa suubineeynaa functionka suubi_sawir();
function suubi_sawir(){
//hada waxaan ku lifaaqineey functionka sawirada
var hadbasawir= new Sawirada(tirada_x, tirada_y);
//sawirka balaciisa iyo dharerkiisa ayaan ku lifaaqineey variable hadbasawir
hadbasawir.width= sawirada_width;
hadbasawir.height= sawirada_height;
//hada sawirada waxaan keeneeyna miiska sida loo arko
hadbasawir.img.onload=function(){
miiska.drawImage(hadbasawir.img, hadbasawir.x, hadbasawir.y, hadbasawir.width, hadbasawir.height);
}
return hadbasawir;
}
// hada waxaan suubisaneenaa functionka sawirada
function Sawirada(tirada_x, tirada_y)
{
this.x=Math.random() * tirada_x;
this.y= Math.random() * tirada_y;
this.img= new Image();
// hada waxaan ku lifaaqineey functionka hadbaSawiro
this.img.src= hadba_sawiro(this.img);
// waxaan qeexeena sizeka sawirada
this.height=20;
this.width=30;
}
// Hada waxaan suubisaneena functionkii hadba_sawiro()
function hadba_sawiro()
{
var images= Array(1);
//folderka sawirada ayaa u waceesaa.
images[0]="images/a.png";
images[1]="images/b.png";
images[2]="images/c.png";
images[3]="images/d.png";
images[4]="images/e.png";
images[5]="images/f.png";
images[6]="images/g.png";
images[7]="images/h.png";
images[8]="images/i.png";
images[9]="images/j.png";
images[10]="images/k.png";
images[11]="images/l.png";
images[12]="images/m.png";
images[13]="images/n.png";
images[14]="images/o.png";
images[15]="images/p.png";
images[16]="images/q.png";
images[17]="images/r.png";
images[18]="images/s.png";
images[19]="images/t.png";
images[20]="images/u.png";
images[21]="images/v.png";
images[22]="images/w.png";
images[23]="images/x.png";
images[24]="images/y.png";
images[25]="images/z.png";
//hada waxaan ku lifaaqineeyna functionka hadba_keen();
var carar=hadba_keen(0,26);
return images[carar];
}
// finally waxaa suubisaneena hadba_keen() function taaso sawirada hadba dhowr u wacayo
function hadba_keen(b, t){
return (Math.floor(Math.random()*(1+b-t)))+t;
}
// waxaan u waceen adEventlistener markii pageka loo waco
document.addEventListener("DOMContentLoaded", soo_saar, false);
Here is the Demo..http://casharada.com/yavascript/alphabet.html
Every time you load the page you will see different letters popping up. There is reason why I did that.. When the animation begin we will ask the kids to hit only the vowels.. They will receive points based on that.. That is another tutorial. For now focus on early stages of Game...
Again I am Saciid Afisoone, I do this for fun and not my area...
