car clash

by Chandana Thota

HTML

<div id="road">
    <div id="car1"></div>
<div id="car2"></div>
<div id="car4"></div>
<div id="car3"></div>
</div>

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:100px;
    height:160px;      
    background:url('http://www.online-image-editor.com/index.cfm?fa=download_file&image_path=http://imagehost4.online-image-editor.com/oie_upload/images/18194920Vlw6vqz/18195044LtA9FBS6.jpg');
    background-repeat:no-repeat;
}
#car2
{  
    position:absolute;
    width:100px;
    height:160px;    
   left:150px; 
    background:url('http://www.online-image-editor.com/index.cfm?fa=download_file&image_path=http://imagehost4.online-image-editor.com/oie_upload/images/18194920Vlw6vqz/18195044LtA9FBS6.jpg');
    background-repeat:no-repeat;
}
#car4
{  
    position:absolute;
    width:100px;
    height:160px;  
   left:450px;
    background:url('http://www.online-image-editor.com/index.cfm?fa=download_file&image_path=http://imagehost4.online-image-editor.com/oie_upload/images/181954204hISj8Lp5/18195614FL8i3021.jpg');
    background-repeat:no-repeat;
}
    
#car3
{  
    position:absolute;
    width:100px;
    height:160px;  
   left:300px; 
    background:url('http://www.online-image-editor.com/index.cfm?fa=download_file&image_path=http://imagehost4.online-image-editor.com/oie_upload/images/18194920Vlw6vqz/18195044LtA9FBS6.jpg');
    background-repeat:no-repeat;
}

JavaScript

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