0

Olá, sou um estudante de informática e fiz um jogo com html, css e javascript. Infelizmente quando criei o placar acabei tendo um problema que acredito que possa ser de sobreposição. O programa exibe o placar certo antes de clicar no boneco, porém, na parte da soma ele sempre exibe errado. Agradeço desde já, abaixo o programa:

Jogo_cordova1.html

   !DOCTYPE html>
<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/jogo_cordova.css">
        <title>Jogo - Cordova</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.move').click(function(){
                    var g = 0;
                    var r = 400;
                    var i = 0;
                    var y = 0;
                    var t = 0;
                    var div = document.getElementById("bolt3");
                    div.innerHTML = '000' + i;
                    while (g <= 100){
                        r -= 3;
                        $('.in, .bolt2').animate({'top':'10%'}, 0, 'linear', function(){
                            $('.in, .bolt2').css('display', 'block');
                        });
                        var d = Math.floor(Math.random() * (74 + 1) + 26);
                        if(d < 28){
                            $('.in, .bolt2').animate({'left':'26%'}, 0, 'linear');
                        }
                        else if(d < 30){
                            $('.in, .bolt2').animate({'left':'30%'}, 0, 'linear');
                        }
                        else if(d < 35){
                            $('.in, .bolt2').animate({'left':'36%'}, 0, 'linear');
                        }
                        else if(d < 45){
                            $('.in, .bolt2').animate({'left':'40%'}, 0, 'linear');
                        }
                        else if(d < 50){
                            $('.in, .bolt2').animate({'left':'43%'}, 0, 'linear');
                        }
                        else if(d < 55){
                            $('.in, .bolt2').animate({'left':'48%'}, 0, 'linear');
                        }
                        else if(d <= 60){
                            $('.in, .bolt2').animate({'left':'52%'}, 0, 'linear');
                        }
                        else if(d < 65){
                            $('.in, .bolt2').animate({'left':'60%'}, 0, 'linear');
                        }
                        else {
                            $('.in, .bolt2').animate({'left':'68%'}, 0, 'linear');
                        }
                        $('.in, .bolt2').animate({'top':'75%'}, r, 'linear', $('.bolt2').click(function(){
                            i += 1;
                            if(i < 10){
                                div.innerHTML = '000' + i;
                            }
                            else if(i < 100){
                                div.innerHTML = '00' + i;
                            }
                            else if(i < 1000){
                                div.innerHTML = '0' + i;
                            }
                            else{
                                div.innerHTML = i;
                            }
                        }));
                        g += 1;
                    }
                });
                $('.move1').click(function(){
                    window.location.href = "Jogo_cordova.html";
                });
            });
        </script>
    </head>
    <body>
        <li class='move'><a>PLAY</a></li><br/><br/>
        <li class='move1'><a>MENU</a></li>
        <div class='bolt'></div>
        <div class='bolt1'></div>
        <div class='bolt2'></div>
        <div class='bolt3'><p id='bolt3' name='bolt3'></p></div>
        <img class='in' src='img/logo.png'></img>
    </body>
</html>

Jogo_cordova.css

body{
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #436EEE;
    z-index: 1;
}
div#menu{
    position: relative;
    left: 34%;
    margin-top: 18%;
    width: 30%;
    height: 20%;
    z-index: 2;
}
li{
    position: relative;
    font-size: 50pt;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background-color: #EEE9E9;
    width: 100%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 6px;
    cursor: pointer;
}
a{
    position: relative;
    color: black;
    text-decoration:none;
}
div#menu1{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .0;
    -moz-opacity: .0;
    filter: alpha(opacity=0);
    z-index: 1000;
    display: none;
}
div#menu2{
    position: fixed;
    top: 20%;
    left: 30%;
    width: 40%;
    height: 60%;
    background-color: #fff;
    z-index: 1001;
    display: none;
}
p#menu3{
    position: relative;
    left: 20%;
    top: 10%;
    width: 70%;
    height: 50%;
    background-color: white;
    font-size: 14pt;
}
h2#menu4{
    position: relative;
    left: 35%;
    top: 10%;
    width: 35%;
    background-color: white;
    font-size: 24pt;
}
.close{
    float: right;
    margin-right: 5%;
    cursor: pointer;
    font-size: 14pt;
}
.bolt{
    position: absolute;
    left: 20%;
    top: 10%;
    width: 60%;
    height: 80%;
    background-color: #fff;
}
.bolt1{
    position: absolute;
    left: 25.5%;
    top: 75%;
    width: 50%;
    height: 15%;
    background-color: #000;
    z-index: 1002;
}
.in{
    position: absolute;
    width: 7%;
    height: 15%;
    left: 25.5%;
    top: 10%;
    display: none;
}
.bolt2{
    position: absolute;
    width: 7%;
    height: 15%;
    left: 25.5%;
    top: 10%;
    z-index: 1001;
    background-color: #000;
    opacity: 0;
    cursor: pointer;
    display: none;
}
.move{
    position: absolute;
    font-size: 14pt;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background-color: #EEE9E9;
    width: 10%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 6px;
    cursor: pointer;
    top: 10%;
    left: 5%;
}
.move1{
    position: absolute;
    font-size: 14pt;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background-color: #EEE9E9;
    width: 10%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 6px;
    cursor: pointer;
    top: 15%;
    left: 5%;
}
.bolt3{
    position: absolute;
    width: 4.1%;
    height: 10%;
    left: 20%;
    top: 10%;
    z-index: 1001;
    background-color: #000;
    color: #fff;
    font-size: 20pt;
}
p#bolt3{
    position: relative;
    left: 5%;
}

Imagem/boneco

inserir a descrição da imagem aqui

1 Resposta 1

1

O modo que você estava fazendo a contagem estava errado. A função animate espera no 4º parâmetro uma função para ser executada ao completar a animação, mas no caso você tentava associar o click na nave ali.

Criei um pen no CodePen com o seu código e fiz algumas modificações, que você pode ver completo aqui (pode mudar a visão para editor para ler os fontes modificados): https://codepen.io/dudaskank/full/jvMjoO/

Vou comentar as alterações que fiz para funcionar o jogo:


Tamanho do texto do placar

Estava grande demais e não cabia na área destinada, então só diminuí a fonte no CSS:

p#bolt3 {
  position: relative;
  left: 5%;
  font-size: 1rem;
}

Variável para a nave e função do click ajustada

O seletor da nave era usado em diversos pontos, simplifiquei a coisa e guardei numa variável, assim não perde tempo procurando ele em outros pontos.

A função do click original estava em um local errado, coloquei ela logo no início do javascript e, ao invés de contar e atualizar o placar, seta uma flag no próprio elemento informando que clicou nela. Mais para frente será utilizada.

  var nave = $(".in, .bolt2");
  nave.click(function() {
    console.log('acertou');
    $(this).data('acertou', true);
  });

Novo jogo - resetando animação atual e mudando uns números

Se você clicar em jogar durante um jogo correndo, originalmente precisa esperar o jogo acabar para depois começar o outro jogo. Chamando o método finish ele finaliza as animações atuais imediatamente, ficando pronto para o próximo jogo na mesma hora.

Mudei também os números pra deixar mais fácil pra eu jogar (easy mode?) e removi variáveis não usadas. Também simplifiquei os ajustes para o left da nave, usando um vetor com os valores possíveis, e modificando direto com a função css do jQuery.

$(".move").click(function() {
  // para as aminações atuais e começa de novo
  nave.finish();
  // vetor com os percentuais do 'left'
  var vetLeft = [ '26%', '30%', '36%', '40%', '43%', '48%', '52%', '60%', '68%' ];
  var g = 1;
  var r = 2000;
  var i = 0;
  var div = document.getElementById("bolt3");
  // primeiro, concateno '000' com o valor de i, e em seguida pego apenas os 4 últimos caracteres da string resultante
  // bem mais simples do que o monte de if's
  div.innerHTML = ('000' + i).slice(-4);
  while (g <= 5) {
    r -= 100;
    nave.animate({'top':'10%'}, 0, 'linear', function(){
      nave.css('display', 'block');
      // troquei aquele monte de if/animate por estas duas linhas
      var leftPct = vetLeft[Math.floor(Math.random()*vetLeft.length)];
      nave.css("left", leftPct);
    });
    // continua...

Hora de contar o placar

Para finalmente contar o placar, usei a 2ª forma documentada da função animate, onde passo as propriedades que serão animadas e as opções. Dentre as opções, está a progress, que chama uma função em cada quadro da animação. Aqui, verifico o flag do elemento nave, somo e já atualizo o placar. Lembre de setar para falseo flag aqui, senão em cada passo somará um ponto.

    // continuando...
    nave.animate(
      { top: "75%" },
      {
        duration: r,
        easing: "linear",
        progress: function () {
          // durante a animação, verifica se o flag da nave foi setado pelo evento de clique
          if (nave.data('acertou')) {
            i += 1;
            div.innerHTML = ('0000' + i).slice(-4);
            nave.data('acertou', false);
          }
        },
      }
    );
    g += 1;
  }
});

FIM

Espero que consiga entender o que ajustei, e boa sorte no desenvolvimento de jogos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .