Trying to create a placard with javascript

Question

Trying to create a placard with javascript

Navigation

#1 by (1 votes)

0

Hello, I'm a computer student and I made a game with html, css and javascript. Unfortunately when I created the score I ended up with a problem that I believe may be overlapping. The program displays the right score before clicking the doll, but in the sum portion it always displays wrong. Thanks in advance, below the program:

Game_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><scriptsrc="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>

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%;
}

Picture / doll

javascript html css

asked by anonymous 29.08.2018 / 16:37

1 answer

Query problem [duplicate] Sort vector from lowest to highest

score 1 · Accepted Answer

The way you were doing the counting was wrong. The function animate expects in the 4th parameter a function to be executed when completing the animation, but in case you tried to associate the click on the ship there.

I created a pen in CodePen with your code and made some modifications, which you can see complete here (you can change the view for editor to read the modified fonts): link

I will comment on the changes I made to the game:

Scale text size

It was too big and it did not fit in the intended area, so I only decreased the font in CSS:

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

Ship variable and click function set

The selector of the ship was used in several points, simplified the thing and kept in a variable, so do not waste time looking for it in other points.

The original click function was in the wrong place, I placed it right at the beginning of the javascript, and instead of counting and updating the scoreboard, you flag a flag in the element itself and then click it. More forward will be used.

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

New game - resetting current animation and changing numbers

If you click on play during a running game, you must wait for the game to finish and then start the other game. Calling the method finish it ends the current animations immediately, getting ready for the next game at the same time.

I also changed the numbers to make it easier for me to play (easy mode?) and removed unused variables. I also simplified the settings for the left of the ship, using a vector with the possible values, and modifying directly with the function css 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...

Time to count the score

To finally count the score, I used the 2nd documented form of the animate function, where I pass the properties that will be animated and options. Among the options, is progress , which calls a function in each frame of the animation. Here, I check the flag of element nave , somo and I already update the scoreboard. Remember to set the flag to%% of the flag here, otherwise at each step you will add a point.

    // 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;
  }
});

END

I hope you can understand what I have set, and good luck in game development.