Monday 25 June 2012

Simple Game Using Jquery

This article is to discuss about online game programming.In other words  how to make a game
in  html . Nothing to think further the option is jquery.
    There are any jquery games examples are available in internet.But here I am
introducing a free online ball game coded in jquery.This is padd and ball game.The padd
move with mouse movement.We may save the ball from fall to the ground.I think
this is a simple jquery game.

You can see the working of game which I named Hit Ball before go through this
jquery game source code.


 
You can download the source code from here
http://sukeshbr.byethost3.com/Blog_Works/hit_ball/hit_ball.zip


Here have two html files g1.html and end.html.

Code

g1.html
<html>
<head>
<style type="text/css">
*{    margin: 0;
    padding: 0}
#bar{
position:absolute;
left:200px;
width:130px;
height:20px;

}
#ball{
position:absolute;
left:270px;
width:20px;
height:20px;
}
#plain{
width:97%;
height:95%;
border:10px solid #000000;
background:#ccffff;
}

#block_red1{
position:absolute;
top:100px;
left:50px;
width:50px;
height:25px;
}
#block_blue1{
position:absolute;
top:100px;
left:100px;
width:50px;
height:25px;
}
#block_red2{
position:absolute;
top:100px;
left:150px;
width:50px;
height:25px;
}
#block_pink1{
position:absolute;
top:100px;
left:200px;
width:50px;
height:25px;
}
#block_blue2{
position:absolute;
top:100px;
left:250px;
width:50px;
height:25px;
}
#block_pink2{
position:absolute;
top:100px;
left:300px;
width:50px;
height:25px;
}


</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bar").css("top", window.innerHeight-80);
$("#ball").css("top", window.innerHeight-100);
var click_stat=false;
//Code to move bar
$(document).mousemove(function(m){
$("#body").css('cursor', 'none');
if(m.pageX>10&&m.pageX<window.innerWidth-180)
{
$("#bar").css({"left":m.pageX});
if(click_stat==false)
$("#ball").css({"left":m.pageX+70});
}
});


window.setInterval(function() {
if(click_stat==true){
var p = $("#ball");
var position = p.position();
var status=getStatus();
if(status==1)
{
var tadd=getTAdd();
var ladd=getLAdd();
$("#ball").css({"top":position.top+tadd,"left":position.left+ladd});
}
else if(status==0)
{
alert("Game Over...");
location.href="end.html";
}
else if(status==2)
{
alert("You Won...");
location.href="end.html";
}
}
},40);


//code to detect initial click
$(document).click(function(){

$("#plain").css('cursor', 'none');
click_stat=true;

});
});

function getLAdd()
{
var ladd=0;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();

if(ball_position.top>=window.innerHeight-100)
{
if(ball_position.left-10>=bar_position.left && ball_position.left-10<=bar_position.left+100 )
 {ladd=-2; }
 if(ball_position.left+10<=bar_position.left+200  && ball_position.left+10>=bar_position.left+100 )
 {ladd=2; }

}

if(ladd==0){ladd=getLAdd.ladd;}
if(ball_position.left<=15|| ball_position.left>=window.innerWidth-40)
ladd=-ladd;

getLAdd.ladd=ladd;
return ladd;
}

function getTAdd()
{
var tadd=0;
var pball = $("#ball");
var pbar = $("#bar");
var ball_position = pball.position();
var bar_position = pbar.position();
if(ball_position.top>=0 && ball_position.top<=11) tadd=5;
if(ball_position.top>=window.innerHeight-100) tadd=-5;
if(ball_position.top>75&&ball_position.top<125)
{

if(($("#block_red1").length>0) && (ball_position.left+20>50&&ball_position.left<100))
{
tadd=-(getTAdd.tadd);
$("#block_red1").remove();
}

if(($("#block_blue1").length>0) && (ball_position.left+20>100&&ball_position.left<150))
{
tadd=-(getTAdd.tadd);
$("#block_blue1").remove();
}
if(($("#block_red2").length>0) && (ball_position.left+20>150&&ball_position.left<200))
{
tadd=-(getTAdd.tadd);
$("#block_red2").remove();
}
if(($("#block_pink1").length>0) && (ball_position.left+20>200&&ball_position.left<250))
{
tadd=-(getTAdd.tadd);
$("#block_pink1").remove();
}
if(($("#block_blue2").length>0) && (ball_position.left+20>250&&ball_position.left<300))
{
tadd=-(getTAdd.tadd);
$("#block_blue2").remove();
}
if(($("#block_pink2").length>0) && (ball_position.left+20>300&&ball_position.left<350))
{
tadd=-(getTAdd.tadd);
$("#block_pink2").remove();
}
}
if(tadd==0){tadd=getTAdd.tadd;}
getTAdd.tadd=tadd;
return tadd;
}

function getStatus()
{
var stat;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();
if(ball_position.top>=bar_position.top-20)
{
if(ball_position.left+22>=bar_position.left && ball_position.left<=bar_position.left+200)
stat=1;
else
stat=0;
}
else stat=1;
if(stat!=0&&($("#block_blue1").length==0)&&($("#block_blue2").length==0)
&&($("#block_red1").length==0)&&($("#block_red2").length==0)
&&($("#block_pink1").length==0)&&($("#block_pink2").length==0))
stat=2;
return stat;
}
</script>

</head>
<body>
<div id="plain"  >
<img id="block_red1" src="images/block_red.png">
<img id="block_blue1" src="images/block_blue.png">
<img id="block_red2" src="images/block_red.png">
<img id="block_pink1" src="images/block_pink.png">
<img id="block_blue2" src="images/block_blue.png">
<img id="block_pink2" src="images/block_pink.png">

<label id="name"><h3>Hit_ball By Sukesh B R</h3></label>
<img id="bar"  src="images/bar.png">
<img id="ball"  src="images/ball.png">
</div>
</body>
</html>


end.html
<html>
<body>
<h1>Game Completed...</h1>
<br>
<a href="g1.html">Restart</a>
</body>
</html>

Code description

 Let we start from g1.html.   In the body section I placed two images namely bar and ball .
 The images for this is in the image folder which can be download from above.You can see another
 four images.They are the bricks placed above the  bar.

   In the css section , there are the code to position correctly the bricks , padd and ball.


  In the jquery section  in the mousemove event the code to move the padd is written.m is
the mouse object m.pageX gives the x cordinate of mouse pointer m.pageY  gives the y cordinte of
mouse position.      Here we change only the left property of bar image with m.pageX. 
We wont change the y cordinate.Because we need to move the padd in horizontal direction
only.


  window.setInterval()  is  another event used to execute a particular block iteratively
  in a particular time interval.in this function  getTAdd()  is called to get the   tadd which is added to the y position of the ball.
  getLAdd() is called to get the ladd which is added to the x position of the ball.
 
  The variable status returned from getStatus() determine that the game is active or
  game over or win in the game.
 
 
 In the functions getTAdd(),getLAdd() and getStatus() the ladd , tadd and staus   is calculated
by analysing the position of ball and padd.  If the ball is hit the left half of padd the ladd   will be +2.


If the ball is hit the right half of padd the ladd will be -2.  If the ball position come   near to the walls the ladd is multiplied with -1. Thus the ladd change to opposite value.  This will gives a good flow to ball.

  In the top when come near to the top wall or bricks the tadd is multiplied with minus.
  So the ball then move to downward  direction.When ball come near to a brick this the
  brick will be removed using remove() method.
 
  This is only a brief description.Hope that you can understand the core.

You can also read :-

Play wav file using HTML

Very simple Menu using Jquery Beginners Tutorial

 

Posted by at 1 comment:

Thursday 14 June 2012

Very simple Menu using Jquery Beginners Tutorial

This  article is to teach how to create drop down menu  in html.I am not going to design a
graphical pull down menu.  Instead I am trying to reveal the basic construction of pull down
menu.

  When creating menus using jquery only the hiding and pop up of menu is handled by jquery. The
actual layout is created using  css. Creating drop down menus in css means align a <ul> and
it's child <ul> using css,because the pull down menu is constructed using a <ul>.So code for
creating menu in html includes css and jquery.

You can see a demo of resultant menu here




Code


<html>
<head>

<style type="text/css">

*{    margin: 0;
    padding: 0}
    #menu{
        z-index:5;
    }
a{
text-decoration:none;
}
    #menu li
    {    float: left;
        list-style: none;
   
        }

    #menu li a
    {    display: block;
        }



        #menu li ul
        {
            position: absolute;
            display: none;

            }

        #menu li ul li
        {    float: none;
            display: inline
            }

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});

$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
</script>
</head>


<body>
<ul id="menu">
<li><a>Menu1</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://newprograminglogics.blogspot.com">My Blog</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="http://www.gmail.com">GMail</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
</ul><br>

</body>
</html>



Code description
                      The pull down menu is actually a  <ul>  that is unordered list. Here in the <body>
section I have placed a <ul>   with id="menu".    As seen in the demo above in this page,
here have two menus namely Menu1 and Menu2.

      This Menu1 and Menu2 are  links(<a>) placed in  <li> of <ul> with id="menu".  Besides this link
there have another <ul> in each <li>.  The  menu items are placed in the <li> of this child <ul>.

        This <ul> without applying  css  is displayed just like a list.   But using some simple css
commands we can convert it into a menu form.

*{    margin: 0;
    padding: 0}
This code is for remove margin and padding from all elements.



#menu{
        z-index:5;
    }

Is used to place the menu above all elements in page.   




a{
text-decoration:none;
}
Is use to remove the under line from links.



In the code segment :-
#menu li
    {    float: left;
        list-style: none;
   
        }
       
        float : left   place the li of ul side by side.In default it is from top to bottom,  that is vertically.       
        list-style: none removes the dots (.) from the front of each item.
       
       
       
        #menu li a
    {    display: block;
        }
       
        Is for display each item as a block.

       
       
        #menu li ul
        {
            position: absolute;
            display: none;


            }
            Here position: absolute is for place the menu items exactly  below  menu heading
            irrespect  of other elements in the page.
            display: none is for hide this contents initially.The menu items will be displayed only
            after mouse entered in menu heading.
           
           
       
        #menu li ul li
        {    float: none;
            display: inline
            }
           
            Here float: none is for remove the float to left property of child <ul>'s <li>, which is
            set in #menu li   by{    float: left}


Because here that does not require because the menu items should be displayed in  vertical manner.
display: inline set the menu items vertically.
   
   
   
                The alignment of menu is over.Now we go through the jquery  section which displays and hide
    the menu items.
   
    $("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});

      This code will display the child ul,that is our menu items.The parent <ul>s <li>s
mouseenter event is defined with setting child <ul>'s display property to inline.Note
that this is set to display:none initially in the css section.$(this).find(ul)
will get the child element.  .css() is a jquery library function used to change css
property of certain elements.
   
     One more thing  remain is  that we need to hide the menu item again when mouse   is come out from the menu items.        That is done by this code
     
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
     This is just like above code. mouseleave   event is used to detect the disappearence of mouse
pointer.      $(this).find('ul')    will give the child <ul> then display : none is used
to hide the menu items.

Thus our simple menu is begin to work.

You can also read :-

Simple Game Using Jquery
Facebook like pop up window using jquery
Introducing AJAX with a simple example program
Posted by at No comments:

Sunday 3 June 2012

Delete non empty directory in php

This article is to discuss how can delete any folder in php.Delete a directory in php is done by
the method rmdir().  But it work only if the directory is empty.That is it can delete empty directories only.   


            In php delete non empty directory is done by first delete contents of folder.
That is delete all files in a folder.Then delete the empty directory using rmdir().

This code will  describe how can php remove non empty directory.   

CODE

<?php
    del('new');

        function del($dir)
         {
            $result=array_diff(scandir($dir),array('.','..'));
             foreach($result as $item)
               {

     if(!@unlink($dir.'/'.$item))
    del($dir.'/'.$item);

                }
        rmdir($dir);
           }

?>



        Here I have defined a function with name del().   It has one parameter which is the  name of the directory to be delete.Here my directory name is 'new'.


        In the   del()    function defenition   $result=array_diff(scandir($dir),array('.','..'));
scandir()   is used to get the name of all files and folders in the directory provided.
array_diff(..,array('.','..'))   is used to remove the default '.' and '..' folders.  Then the remaining array is parsed using  a  foreach  loop.


        First assume the item is a file.So delete it using unlink().  If unlink() returns false  the item will be a directory.  So del()   function is called in  recursive manner with the sub folder name ($item).

 
        After the loop has executed rmdir($dir) will call.Now rmdir() can delete the directory
because the directory will be empty.   Hence delete directory with php is done.  

You can also read :-
Extend maximum execution time of php script
Posted by at 1 comment:
Subscribe to: Posts (Atom)

Search This Blog