BalloonShooter

A simple game build to show wath jquery can do

by edgardleal

HTML

<div class="player"></div>
<span class="arrows"></span>

CSS

.ball{
    width : 30px;
    height : 50px;
    border : solid 2px;
    position : fixed;
    border-radius : 18px;
}
.player{
   height : 50px;
   width : 30px;
   background : black; 
    position : fixed;
    left : 500px;
}
.arrow{
   position : fixed;
    height : 2px;
    border : solid 1px;
    width : 50px;
}

.score, .arrows{
   width : 50px;
   height : 27px;
   border-radius : 5px;
   border : solid 1px;
   position : fixed;
    text-align : center;
}

.arrows{
    margin-left : 70%;
    
}

JavaScript

var colors = ["blue","red","yellow","green"];
var deslocamentoDoJogador = 50;
var velocidadeDaFlexa = 500;
var quantidadeDeBolas = 7;

var pontos =  $('.score').text(); 
var player = $(".player");
var disparando = false;
var arrow = $("<div style='' class='arrow'></div>");

//init
pontos = 0;

function newBall(){
   var color = colors[Math.round(Math.random() * colors.length)];
    var left = Math.round(Math.random() * 200) + 20;
    var b = $("<div style='background:" + color +
              "; top:500px;left : " + left + 
              "px' class='ball'></div>"); 
    b.appendTo('body').animate({"top": "-60"},5500,
                               function(){
                                 b.remove();
                                   newBall();
                               });
}

function incrementarPontos(ball){
    pontos = parseInt(pontos); 
    console.log(pontos);
    if(ball.css('background-color') === 'red'){
        pontos -= 1;
    }else{
        pontos += 1;
    }
    $('.score').text(pontos);
}

function dispararFlexa(){
    if(disparando) {
        console.log('Flexa  indisponivel');
        return;
    }
    disparando = true;
    arrow = $("<div style='' class='arrow'></div>");
    arrow.offset({"left": player.offset().left,
              "top" : player.offset().top + 25})
    .appendTo('body')
    .animate({"left": -40},{
        step : function(now , fx){
            $(".ball").each(function(index, ele){
               var ball = $(ele);
               var p = ball.position();
               var p2 = arrow.position();
               if(p2.left + 30 >= p.left && p2.left <= p.left + 30)
                   if(p2.top >= p.top && p2.top <= p.top + 50)
                       ball.stop().hide('explode', function(){
                          ball.stop().remove();     
                           arrow.stop().remove();
                          // if(disparando)
                             incrementarPontos(ball);
                          ...