car clash

by Chandana Thota

HTML

<div id="car1"></div>
<div id="car2"></div>
<div id="Mycar"></div>
<div id="car3"></div>
<span style="margin-left:400px;color:red;font-size:40px;" id="result">false</span>

CSS

#road
{
    position:absolute;
    left:100px;
    width:1200px; 
   height:1200px;
   // background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDyXjiY-GUobEOQmIbD1i72x__FIa2H0XhB6mnAcCYg75XmvkkMw');
    background-repeat:no-repeat;
}
#car1
{  
    position:absolute;
    width:50px;
    left:100px;
    height:50px;      
    background:url('http://www.adiumxtras.com/images/thumbs/clio_v6_1_3090_1991_thumb.png');
    background-repeat:no-repeat;
}
#car2
{  
    position:absolute;
    width:50px;
    height:50px;    
   left:200px; 
    background:url('http://rlv.zcache.com/car_top_view_illustration_card-r6a27bb851be54620aaeebe94d1e2976e_xvuat_8byvr_50.jpg');
    background-repeat:no-repeat;
}
#Mycar
{  
    position:absolute;
    top:200px;
    width:50px;
    height:50px;  
   left:200px;
    background:url('http://www.derbyshireguide.co.uk/travel/images/carview.gif');
    background-repeat:no-repeat;
}
    
#car3
{  
    position:absolute;
    width:50px;
    height:50px;  
   left:300px; 
    background:url('http://rlv.zcache.com/car_top_view_illustration_card-r6a27bb851be54620aaeebe94d1e2976e_xvuat_8byvr_50.jpg');
    background-repeat:no-repeat;
}

JavaScript

//Initializing score to zero
var score = 0;
//Loop for Car from bottom to top 
function loop() { 
    var car1StartPosition=450;
    var car1Distance=500;
    var car1TimeInterval=50000;
    //showing the image after hiding on click 
   $('#car1').show();
    //initializing the image to its position
	$('#car1').css({top:car1StartPosition}); 
    // Car moving from bottom to top 
    $("#car1" ).animate({ "top": -car1Distance }, car1TimeInterval, 'linear',
                        function() {loop();
        })

    
 //second car
    $('#car2').show();
	$('#car2').css({top:650}); 
    $("#car2" ).animate({ "top": "-=500" }, 50000 , 'linear',
                        function() {loop();
        })
    
    
    //Third Car
      $('#car3').show();
	$('#car3').css({top:550}); 
    $("#car3" ).animate({ "top": "-=500" }, 50000 , 'linear',
                        function() {loop();
        })
} loop();


$(document).keydown(function(pk){
var pos = $('#Mycar').position();
  if(pk.keyCode == '37'){
      $('#Mycar').css('left',pos.left - 100 + 'px');
  }
    if(pk.keyCode == '38'){      
     $('#Mycar').css('top',pos.top - 100 +'px');      
  }
    if(pk.keyCode == '39'){
           $('#Mycar').css('left',pos.left + 100 + 'px');
  }
    if(pk.keyCode == '40'){
         $('#Mycar').css('top',pos.top + 100 + 'px');
  }
    
    
      var result = collision($('#Mycar'), $('#car1'));
if(result == true){
    $('#Mycar').hide();
  $('#car1').css('background','url(http://tile.mapfluence.com/2.0/icons/icon_blast_black_64.png)').css('background-repeat','no-repeat');
    $('#car1').stop();
   
    
    setTimeout(fade_out, 200);
 function fade_out() {
  $("#car1").fadeOut().empty();
}
}
  });

//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 =...