plane game

by Chandana Thota

HTML

<div id="cloud">
    <div id="bird"></div>
    <div id="bird1"></div>
    <div id="bird2"></div>
        <div id= "shooter"></div>
             <div id="bullet"></div>
    <div style="position:fixed;top:350px;right:60px;color:red;font-:                       ;size:30px;">
    <span>Score: </span>
    <span id="score">0</span>
</div>
</div>

CSS

#cloud{
   width:600px; 
   height:600px;
        background:url('http://previewcf.turbosquid.com/Preview/2013/10/29__10_07_42/Cloud01.jpge384d0b6-3893-4641-884d-53708ca5e2baLarge.jpg');
}
#bird{
    position:absolute;
    width:50px;
    height:50px;
    background-color:red;
    left:-100px;
    top:40px;
    background:url('http://www.bluebirdnut.com/images/Emoticons/CuteBlueBird.gif');
    
}
#bird1{
    position:absolute;
    width:50px;
    height:50px;
    background:url('http://www.bluebirdnut.com/images/Emoticons/CuteBlueBird.gif');
    
}
#bird2{
    position:absolute;
    width:50px;
    height:50px;
   top:30px; background:url('http://www.bluebirdnut.com/images/Emoticons/CuteBlueBird.gif');
    
}

#shooter{
    position:absolute;
    width:66px;
    height:98px;
    background-color:blue;
    top:300px;    background:url('http://www.cutmypic.com/uploads/title945459772.png');
    
}
#bullet{
    position:absolute;
    width:20px;
    height:20px;
    top:300px; 
    background-color:red;
    border-radius:20px;
}

JavaScript

var score = 0;
var result,result1;
//detecting divs collision
    function collision($div1, $div2) {
      var x1 = $div1.offset().left;
      var y1 = $div1.offset().top;
      var h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var w2 = $div2.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
        
      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
    }


function loop() {
 //moving first bird from left to right 
$('#bird').css({left:0}); 
    $( "#bird" ).animate({ "left": "+=400px" }, 7000 , 'linear',
                        function() {loop();
        })
 //moving second bird from left to right
    $('#bird1').css({left:"100px"});   
    $( "#bird1" ).animate({ "left": "+=400px" }, 5000 , 'linear',
                        function() {loop();
        })
     //moving second bird from left to right
    $('#bird2').css({left:"100px"});  
    $( "#bird2" ).animate({ "left": "+=400px" }, 4000 , 'linear',
                        function() {loop();
        })
}
    loop();


window.setInterval(function() {
  result = collision($('#bird'), $('#bullet'));
 result1 = collision($('#bird1'),$('#bullet'));
if(result == true){
        score=score+10;
        $('#bullet').css('top','300px');
        $('#score').text(score);
       
}
if(result1 == true){
    score=score+10;
    $('#bullet').css('top','300px');
    $('#score').text(score);
   
}
},20);
$("#shooter").click(function(){
        $('#bullet').css({top:"300px"});
         $( "#bullet" ).animate({ "top": "-=350px" }, 5000 ); 
});


$(document).keydown(function(pk){
var pos = $('#shooter').position();
  if(pk.keyCode == '37'){
      $('#shooter').css('left',pos.left - 10 + 'px');
  }
    if(pk.keyCode == '39'){      
     $('#shooter').css('left',pos.left + 10 +'px');      
  }
});