Qaabeeynta Javascript: Day6: Alphabet Game has sounds:

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

Qaabeeynta Javascript: Day6: Alphabet Game has sounds:

Post by afisoone »

If you hit an alphabet you will get a pop sound..

today we accomplish to add sounds...


Here is the latest code..

Code: Select all

 "use strict";

var tirada_x;
var tirada_y
var canvas;
var miiska;
var tirada_sawirada=6;
var sawirada_width=110;
var sawirada_height=90;
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;

// Menu stuff
var menubackground="images/bg2.jpg";
var  tiradMenu=0;
var menuRiix=true;

//codka
var codka=new Audio("theme.wav");

codka.loop=true;
codka.volume=0.01;
var pop=new Audio("pop.wav");
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();
btnstart.addEventListener("mousedown", function(){
    btnstart.style.visibility="hidden";
     imgmenu.style.visibility="hidden";
     codka.play();
    menuRiix=false;
});
canvas.addEventListener("mousedown", function(event){
    if(!menuRiix)
    {
        for(var i=0; i<tirada_sawirada; i++)
        {
            var sawirada=sawirada_array[i];
            if(sawiradaHit(sawirada.x, sawirada.y, event.x, event.y))
            {
                sawirada[i]=kasaarSawirada(sawirada);
            }
        }
    }

});


 show_menu();

 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,5);
    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);
    if(!menuRiix)
    {

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;

        
        miiska.clearRect(0, 0, canvas.width, canvas.height);

         
        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 sawir;
    }
    function show_menu(){
        menuRiix=true;
        codka.pause();
        imgmenu.style.visibility = "visible";
        btnstart.style.visibility = "visible";
       

        var menuX, btnX, btnY;
        menuX=(canvas.width-imgmenu.width)/2;
        btnX=(canvas.width-btnstart-canvas.width)/2;
        btnY=(canvas.width-btnstart-canvas.height)/2;
        imgmenu.style.posLeft=menuX;
        btnstart.style.posLeft=btnX;
        btnstart.style.posTop=btnY;
        miiska.clearRect(0, 0, canvas.width, canvas.height);
        document.body.background=menubackground;


    }

    function sawiradaHit(sawiradaX, sawiradaY, x, y)
    {
        var tiradaX=sawiradaX +sawirada_width;
        var tiradaY=sawiradaY + sawirada_height;
        if(x>=sawiradaX && x<=tiradaX &&tiradaX>=0 && y>=sawiradaY 
            && y<=tiradaY&& sawiradaY>=0)
        {
            
            return true;
        }else{
            return false;
        }

    }
    function kasaarSawirada(sawir)
    {
        pop.play();
        var qarxin=new Image();
        qarxin.onload=function(){

            miiska.drawImage(qarxin, sawir.x, sawir.y, sawir.width, sawir.height);
        }
        qarxin.src="images/explosion.gif";
        sawir.img=qarxin;
        sawir.kasaar=true;
        return sawir;
    }
   

   
  
   









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



var codka-= new Audio(file.wav)
and you play when the alphabet hit...

Day 7---- We are going to add the actual points... When you hit you will receive some points... So see you Day 7...


Soo here is the latest Demo Game... http://casharada.com/yavascript/alphabet.html
  • Similar Topics
    Replies
    Views
    Last post

Return to “Careers - Engineering, Science & Computers”