Pelota que rebota
Publicado por Carlos (1 intervención) el 08/03/2018 05:07:58
Hola espero me puedan ayudar con este problema. Estoy haciendo un simulador de una pelota que rebota y le quise agregar cosas como una portería y que si se mete marque gool y de puntos.
Pero en el caso del "Equipo rojo" marca dos puntos pues el ciclo if se hace dos veces cual no entiendo como evitar que pase esto.
Todo esta bien con "azul" la lógica es si x == 0 && y >= 125 && y <= 175 marca gool 1 punto, pero en caso del "equipo rojo" si x == 480 && y >= 125 && y <= 175 en este caso no pasa nada pues 480 no puede ser, esta fuera del contenedor (no se porque) entonces siempre esta menos el tamaño de desplazamiento del balo, en este caso 5px entonces la lógica es si x == 475 && y >= 125 && y <= 175 y ahora si marca gool, pero dos veces 2 puntos.
El ciclo if se cumple dos veces pues el 475 se repite y se cumple pero si pongo si x == 476 && y >= 125 && y <= 175 ó x == 477 .. no pasa nada.
Me pueden ayudar a explicarme que pasa porque no funciona porque no acepta el 480px ya intente poner en vez 5px a 1px pero es igual marca dos veces. Espero me puedan ayudar, anexo código.
CSS
JS
HTML
Pero en el caso del "Equipo rojo" marca dos puntos pues el ciclo if se hace dos veces cual no entiendo como evitar que pase esto.
Todo esta bien con "azul" la lógica es si x == 0 && y >= 125 && y <= 175 marca gool 1 punto, pero en caso del "equipo rojo" si x == 480 && y >= 125 && y <= 175 en este caso no pasa nada pues 480 no puede ser, esta fuera del contenedor (no se porque) entonces siempre esta menos el tamaño de desplazamiento del balo, en este caso 5px entonces la lógica es si x == 475 && y >= 125 && y <= 175 y ahora si marca gool, pero dos veces 2 puntos.
El ciclo if se cumple dos veces pues el 475 se repite y se cumple pero si pongo si x == 476 && y >= 125 && y <= 175 ó x == 477 .. no pasa nada.
Me pueden ayudar a explicarme que pasa porque no funciona porque no acepta el 480px ya intente poner en vez 5px a 1px pero es igual marca dos veces. Espero me puedan ayudar, anexo código.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Simulador 6 */.publicoFutbol{
width: 500px; height: 100px;margin-left: 230px;
}#contenedor{
background-image: url("img3/campo.jpg");
width: 500px; height: 300px; margin: auto;background-color: #fff;
}#pelota{
width: 20px; height: 20px;}#audio{
display: none;}JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// Simulador 6
var x = 0;var xLimite = 0;var y = 0;var yLimite = 0;var azul = 0, rojo = 0;
function jugar(){
var ciclo = setInterval(mover, 30);
}function mover(){
//EJE X
if (xLimite == 0) {
document.getElementById('pelota').style.marginLeft = x+"px";
x += 5;
if (x >= 480) {
xLimite = 1; } }if(xLimite == 1) {
document.getElementById('pelota').style.marginLeft = x+"px";
x-=5;
if (x <= 0) {
xLimite = 0; } } //EJE Y
if (yLimite == 0) {
document.getElementById('pelota').style.marginTop = y+"px";
y += 5;
if (y >= 280) {
yLimite = 1; } }if(yLimite == 1) {
document.getElementById('pelota').style.marginTop = y+"px";
y-=5;
if (y <= 0) {
yLimite = 0; } } //JUEGO 500x por 300y
var audio = document.getElementById('audio');
if (x == 0 && y >= 125 && y <= 175) {
azul += 2;
audio.play();
}if (x == 475 && y >= 125 && y <= 175) {
rojo += 1;
audio.play();
}document.getElementById('marcador').innerHTML = "Equipo Azul: "+azul+" Equipo Rojo: "+rojo;
}HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<a name="sim6"></a>
<article class="sim6">
<header><h3>Simulador 6: ¡Juego Futbol!</h3></header>
<p class="usuario" id="saludo5">Hola </p>
<p class="usuario"> este es un simulador de pelota <br><br> Como jugar:</p>
<section>
<img class="publicoFutbol" src="img3/publico3.png">
<div id="contenedor">
<img id="pelota" src="img3/pelota.png">
</div>
<img class="publicoFutbol" src="img3/publico2.png">
<button id="jugar" onclick="jugar()">GO</button>
<label id="marcador"> - </label>
<audio id="audio">
<source src="musica/gol.aac" type="audio/aac">
</audio>
</section>
</article>
Valora esta pregunta
0