Day4- We update alphabet.html.. And add level start button and image baro vowel.
Code: Select all
<!doctype html>
<html>
<head>
<title>Qaabeeynta javascript</title>
<style type="text/css">
#imgmenu{
width:555px;
height:225px;
position:absolute;
z-index:100;
}
#btnstart{
width:500px;
height:118px;
position:absolute;
top:175px;
left:300px;
z-index:100;
}
#level{
color:white;
position:absolute;
top:100px;
right:450px;
}
</style>
<script src= "alphabet.js"></script>
<script src= "sawirka.js"></script>
</head>
<body>
<div id="divmenu">
<img id="imgmenu" src="images/barovowels.png">
<img id="btnstart" src="images/start.png">
</div>
<div id="miiska">
<canvas id="canvas" width="700" height="500"></canvas>
</div>
<div id="level"><font size="50">Points: 0</font></div>
</body>
</html>1. menu background
2. We have updated update function to have menu get ready the game..
3. We have created show_menu function... That will show the start button and so forth
Lastly we have added btnstart.addEventListener... To fire when you hit the game...
here is the code..
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;
// Menu stuff
var menubackground="images/bg2.jpg";
var tiradMenu=0;
var menuRiix=true;
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("click", function(){
btnstart.style.visibility="hidden";
imgmenu.style.visibility="hidden";
menuRiix=false;
});
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,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);
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;
//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;
}
function show_menu(){
menuRiix=true;
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;
}
// waxaan u waceen adEventlistener markii pageka loo waco
document.addEventListener("DOMContentLoaded", soo_saar, false);
Here is the result..
So you Day5 and continue to build this alphabet Game...When you load the game you will see all the alphabet on the screen waiting to continue their movement.... I used blackboard since it is just tutorial...
Here is the day 4 demo.. http://casharada.com/yavascript/alphabet.html