Qaabeynta Javascript: Day 3- Now Game Alphabet has animation

Qaybta Xirfada Sayniska iyo iwm

Moderators: Moderators, Junior Moderators

User avatar
afisoone
SomaliNet Super
SomaliNet Super
Posts: 5509
Joined: Wed Jul 22, 2009 9:46 pm
Location: We all want to become president even though Amisom controls Mogadishu

Qaabeynta Javascript: Day 3- Now Game Alphabet has animation

Post by afisoone »

We have added couple things the previous day code.

We have created a library that holds the Sawirada.. I named Sawirka.js

Code: Select all

// hada waxaan suubisaneenaa functionka sawirada
function Sawirada(tirada_x, tirada_y, orod_sare, orod_hoose,aqoonta_ardeyga)
{

    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 qeexeenaa animationka awooda orodka
    var speed=hadba_keen(orod_sare,orod_hoose);
    var extra=speed *aqoonta_ardeyga;
    this.accel= speed+extra;
    this.kasaar=false;
    this.hadii_lasaaro=0;
}
here is the latest Alphabet.js

Code: Select all

 "use strict";

var tirada_x;
var tirada_y
var canvas;
var miiska;
var tirada_sawirada=6;
var sawirada_width=30;
var sawirada_height=20;
var orod_sare=17;
var orod_hoose=7;

var small_sawir=3;

//animation
var aqoonta_ardeyga=10;
var orod_frame=15;


var sawirada_array=new Array(tirada_sawirada);
var anim=null;
 var orodkiisa = 0.1;
   var shidaalkiisa = orodkiisa;
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
 update();
}
// 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[i]=sawir;
    }

}
//hada waxaa suubineeynaa functionka suubi_sawir();
function suubi_sawir(){

    //hada waxaan ku lifaaqineey functionka sawirada
    var hadbasawir= new Sawirada(tirada_x, tirada_y, orod_sare, orod_hoose,shidaalkiisa);
    //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 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;
}
function update()
{

    anim= window.requestAnimationFrame(update);

updateSawir();
DrawSawir();
}
function updateSawir()
{
    var sawir;
    for(var i=0; i<tirada_sawirada; i++)
    {
        sawir=sawirada_array[i];
        if(sawir.y<=sawirada_height)
        {
            sawir.y=canvas.height;
            sawir.x=Math.random()*tirada_x;
            sawirada_array[i]=sawir;
        }
        sawir.y+=-sawir.accel;

        


    }


}
function DrawSawir(){
     var sawir;

        //clear each frame
        miiska.clearRect(0, 0, canvas.width, canvas.height);

        //Render balloons to canvas 
        for (var i = 0; i < tirada_sawirada; i++) {
            sawir = sawirada_array[i];
            miiska.drawImage(sawir.img, sawir.x, sawir.y, sawir.width, sawir.height);
            if (sawir.kasaar) {
                sawirada_array[i] = Qarxi_sawirka(sawir);
            }

        }



}
function qarxi_sawirka(sawir) {
        if (sawir.hadii_lasaaro > orod_frame) {
            sawir = suubi_sawir();
        }
        else {
            sawir.hadii_lasaaro += 1;
        }
        return balloon;
    }









// waxaan u waceen adEventlistener markii pageka loo waco
document.addEventListener("DOMContentLoaded", soo_saar, false);


We have added Update and draw to hold the loop. Everything else is the same. Except We put the variables that runs the speed on suubi_sawir iyo Sawirka function.


Day 4, We are going to implement Menu and which will have the levels and all that. I believe we will add one function.. See you day 3.. The game has started looping we need to communicate the canvas from now on..

See you Day 4...
To HooBariisa,
My friend I laugh when you say why you don't use jquery. I thought you know me well. My friend I am saciid afisoone, go to stackOverFlow see the jquery question. The user who responds alot and get alot of thanks is me. The nick name is secret since the crooks following me every move I make...
That is for HooBaariiska...
Any way, Now we have stablish the loop and we want to make menu so the kids can start the game and play the vowels. Before we get into that let' setup the game..

I see you tommorrow if I have time...

Here is The Demo:--http://casharada.com/yavascript/alphabet.html
  • Similar Topics
    Replies
    Views
    Last post

Return to “Careers - Engineering, Science & Computers”