butterfly game

by Chandana Thota

HTML

<!-- Butterfly Game-->
<!-- Background image -->
<div id="cloud">
 <!-- First Butterfly -->   
<div id="bFly1"></div>
     <!-- Second Butterfly -->
 <div id="bFly2"></div>
     <!-- Third Butterfly -->
    <div id="bFly3"></div>
     <!-- Fourth Butterfly -->
    <div id="bFly4"></div>
     <!-- Score -->
<div style="position:fixed;top:10px;right:60px;">
<span>Score: </span>
<span id="score">0</span>
</div>
    <!-- Score -->
</div>

CSS

#bFly1,#bFly2,#bFly3,#bFly4{
    cursor:pointer;
}

#bFly1{
    position:absolute;
	height:80px;
    width:140px;
background:url('http://www.wilsoninfo.com/butterfly/1-animated-butterfly-2.gif');
}
#bFly2{
    position:absolute;
	height:80px;
    width:140px;
background:url('http://www.wilsoninfo.com/butterfly/1-animated-butterfly-2.gif');
    left:150px;
}
#bFly3{
    position:absolute;
	height:80px;
    width:140px;
background:url('http://www.wilsoninfo.com/butterfly/1-animated-butterfly-2.gif');
    left:300px;
}
#bFly4{
    position:absolute;
	height:80px;
    width:140px;
background:url('http://www.wilsoninfo.com/butterfly/1-animated-butterfly-2.gif');
    left:450px;
}


#score{
    
color:red;
}
#cloud{
 height:600px;
width:600px;    background:url('http://th02.deviantart.net/fs70/PRE/i/2012/166/6/7/clouds_background_by_taylordylan-d53jwph.jpg')   
}

JavaScript

//Initializing score to zero
var score = 0;
//Loop for butterfly from bottom to top 
function loop() { 
    //showing the image after hiding on click 
    $('#bFly1').show();
    //initializing the image to its position
	$('#bFly1').css({top:450}); 
    // butterfly moving from bottom to top 
    $("#bFly1" ).animate({ "top": "-=500" }, 8000 , 'linear',
                        function() {loop();
        })
 //second butterfly
    $('#bFly2').show();
	$('#bFly2').css({top:650}); 
    $("#bFly2" ).animate({ "top": "-=500" }, 8000 , 'linear',
                        function() {loop();
        })
    //Third Butterfly
      $('#bFly3').show();
	$('#bFly3').css({top:550}); 
    $("#bFly3" ).animate({ "top": "-=500" }, 8000 , 'linear',
                        function() {loop();
        })
    //Fourth Butterfly
     $('#bFly4').show();
	$('#bFly4').css({top:350}); 
    $("#bFly4" ).animate({ "top": "-=500" }, 8000 , 'linear',
                        function() {loop();
        })
    
}
    loop();
$('#bFly1,#bFly2,#bFly3,#bFly4').click(function(){
				$(this).hide();
    score=score+10;
    $('#score').text(score);
});