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