game

by Gaurav Katwal

HTML

<div id="score">1234</div>
<div id="wrapper">
   <div id="bow">B</div>
</div>

CSS

#wrapper{position:relative; background:#000; height:550px; width:100%; overflow:hidden;}
.bloon{width:50px; height:50px; background:#ff0000; position:absolute;}
#score{position:absolute; right:50px; top:8px; color:#fff; font-size:30px;}
#bow{position:absolute; left:0px; bottom:0px; color:#fff; width:50px; height:50px; background:#6C6AE4;}
.arrow{position:absolute; color:#fff; width:10px; height:10px; background:#6C6AE4;}

JavaScript

$(document).ready(function(){

var box = $('#wrapper');
var score = $('#score');
var bow = $('#bow');

var boxWt = $(box).width();
var boxHt = $(box).height();

var time = '1000';


// Bloons

$nob = 1;
var rendorBloon = setInterval(function(){ 
	bloons(boxWt, boxHt); 
    $nob++;
    if($nob >= 101){
      clearInterval(rendorBloon);
	}    
}, time);

function bloons(boxWt, boxHt){
    var bloonX = Math.floor((Math.random() * boxWt));
    var bloonPos = $('<div class="bloon" style="top:-50px; left:'+bloonX+'px">bl</div>');
	box.append(bloonPos);
	bloonPos.animate({'top': boxHt+50}, 10000, function(){
	   bloonPos.remove();	
	});
}




$("body").keydown(function(e){

// Moving Bow...
var bowLftPos = bow.offset().left - 50;

// alert(e.keyCode);...
if(e.keyCode == 37){
	if(bowLftPos <= 0 ){
		bowLftPos == 50;
	}
	else{
	  bow.css({ left: parseInt(bowLftPos)-10});
    }
}
else if(e.keyCode == 39){ 
	if(bowLftPos >= box.width()-50){
	   bowLftPos ==  box.width()-50;
	} 
	else{
	  bow.css({left: parseInt(bowLftPos)+10});
	}
}


// Append arrow...
var bowTopPos = bow.offset().top - 50;

if(e.keyCode == 13){
   var arrow = $('<div class="arrow" style="top:'+(bowTopPos+20)+'px; left:'+(bowLftPos+20)+'px">bl</div>');
   box.append(arrow);
   arrow.animate({'top': -50}, 2000, function(){
     arrow.remove();
   });
   
    

}



});



function collision(bloon, arrow){
  var arrowX = arrow.offset().left;
  var arrowY = arrow.offset().top;
  var arrowH = arrow.outerHeight(true);
  var arrowW = arrow.outerWidth(true);
  var a1 = arrowY + arrowH;
  var a2 = arrowX + arrowW;

  var bloonX = bloon.offset().left;
  var bloonY = bloon.offset().top;
  var bloonH = bloon.outerHeight(true);
  var bloonW = bloon.outerWidth(true);
  var b1 = bloonY + bloonH;
  var b2 = bloonX + bloonW;

  //console.log(a1 + '-' + a2 + '-----'+ b1 + '-' + b2);  
}

});