Fecha y hora actual: Sábado 24 Ago 2019 04:14
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Problemas Ejercicio fronton

Responder al Tema

Índice del Foro > JavaScript > Problemas Ejercicio fronton

Autor Mensaje
tollis



Registrado: 06 Abr 2014
Mensajes: 4

Mensaje Publicado: Lunes 30 Nov 2015 23:32

Título del mensaje: Problemas Ejercicio fronton

Responder citando

Buenas Gente,

Estoy teniendo problemas con un ejercicio de javascript, el ejercicio consiste en: "Realizar un juego del frontón con una imagen rebotando en el borde izquierdo o superior de la ventana, o en una barra lateral situada a la derecha Y en una barra inferior móvil.

Para realizar este ejercicio puedes partir del 7.2
Esta barra inferior móvil se desplazará de derecha a izquierda y de izquierda a derecha, sin pasar tanto del borde izquierdo de la ventana como de la barra lateral.
El desplazamiento a la izquierda de dicha barra se produce al pulsar la tecla z (código ascii = 122) y a la derecha al pulsar la tecla x (código ascii = 120).
Así cuando la imagen del balón choca con esta barra rebota hacia arriba y cuando la pelota no contacte con la barra y la rebase se visualizará un mensaje indicando que la partida concluyó y parando la ejecución del script.

Esta aplicación se realizará solamente para navegadores modernos utilizando getElementById para situar las diferentes capas:
Si encuentras problemas o dificultades en la realización del ejercicio, no tengas duda en preguntar al tutor o incluso enviarle el código que no funciona como debe, para que lo vea y te ayude en la resolución de esta actividad. No obstante, ten en cuenta que no se trata de un ejercicio de autoevaluación, sino de evaluación por parte del tutor, por lo cual debes intentar resolverlo por tu cuenta

Nota:
1- Como en el ejercicio 7.2, es conveniente que tanto las posiciones x e y del balón, como las posiciones x e y de la barra se sitúen en variables con las que se calculen las posiciones y posteriormente se trasladen a la capa.
2- El contacto entre balón y barra sólo has de analizarlo cuando la pelota baje. Para ello te servirá la variable que has debido definir y que controlaría este tipo de movimiento en la pelota.
"
Vamos tipo ping pong solo que contra la pared, pues bien estoy realizandolo poco a poco pero creo que me estoy liando, os pongo el codigo que llevo

Código:

<HTML>
<HEAD>
<TITLE>Ejercicio 7.2</TITLE>
<STYLE TYPE="text/css">
#balon {
position:absolute;
width: 30;
height: 30;
}
#rectangulo {
background-color: blue;
position:absolute;
top:5;
left:5;
width: 550;
height: 385;
}
</STYLE>
<SCRIPT language=javascript>
var y=0;         
var x=0;
var barray=0;
var controlY=1;
var controlX=1;
var velocidad=1;
var control = 0;
var control2 = 0;
var controlbarra = 0;
var controlbarra2 =0;
window.onload = pulsar;
window.onload = mover;


function mover(){
//Eje Y
if(controlY==1){
y+=velocidad;
}else{       
y-=velocidad;
}
if(y<=0){
controlY=1;
y=0;
}
else if(y>=document.getElementById("rectangulo").offsetHeight-30)
{

controlY=0;
y=document.getElementById("rectangulo").offsetHeight-30;
}

if(controlX==1){
x+=velocidad;
}
else{       
x-=velocidad;
}
if(x<=0){
controlX=1;
x=0;
}
else if(x>=document.getElementById("rectangulo").offsetWidth-30)
{
controlX=0;
x=document.getElementById("rectangulo").offsetWidth-30;
}

document.getElementById("balon").style.left=String(x)+"px";
document.getElementById("balon").style.top=String(y)+"px";
}

function pulsar(e)
{
document.onkeypress=pulsar;
var mievento=e || window.event;
var codigotecla = mievento.charCode || mievento.keyCode;
letra=String.fromCharCode(codigotecla);
leftbarra = parseFloat(document.getElementById("barra").style.left);
if ( leftbarra >= 5 )
{
controlbarra=1;
}
else
{
controlbarra=2;
}
if (leftbarra < anchorectangulo - barra)
{
controlbarra2=1;
}
else
{
controlbarra2=2;
}
if (codigotecla == 122 && controlbarra==1)
{
barray= barray-14;
}
else if (codigotecla == 120 && controlbarra2==1 )
{
barray= barray+14;
}
document.getElementById("barra").style.left= barray +"px";;
}

var intervalo=setInterval("mover()",6);
</SCRIPT>
</head>
<BODY>
<DIV id="rectangulo">

<img src="balon.gif" alt="balon" id="balon" style="position:relative; "/>
<img src="barra1.gif" alt="barra" id="barra" style="position:absolute; width:80; height:30; top:325px; left:230px;"/>

</DIV>
</BODY>
</HTML>

Pues bien creo que estoy realizando mal el movimiento del balón, no se como comprobar cuando baje para hacer que choque contra la barra, la cual no se esta moviendo... no se, creo que estoy dando palos de ciego, a ver si me podríais decir que cambiar o que mejorar....

Muchas gracias de antemano.

Saludos

Volver arriba
Ver perfil del usuario Enviar mensaje privado
WhiteSkull
CoAdmin


Registrado: 20 Mar 2009
Mensajes: 3136
Ubicación: y*width+x

Mensaje Publicado: Martes 01 Dic 2015 20:52

Título del mensaje: Problemas Ejercicio fronton

Responder citando

OMG!! El único comentario es:
Código:
//Eje Y


Bueno, el tema es que seguro te pusiste a copiar código como loco sin saber yo creo. Lo normal, es que vayas poco a poco y eso se traduce en, primero implemento una pelota, implemento sus peculiaridades, veo que rebota y luego paso a lo siguiente.

Código:
...
var CONTROL_HACIA_ABAJO=1;
var CONTROL_HACIA_ARRIBA=0;
var CONTROL_HACIA_DERECHA=1;
var CONTROL_HACIA_IZQUIERDA=0;
var LIMITE_PANTALLA_Y= 385;
var LIMITE_PANTALLA_X=550;

function mover(){
  //Eje Y
  if(controlY==CONTROL_HACIA_ABAJO){
    if (y<LIMITE_PANTALLA_Y) y+=velocidad; else controlY=CONTROL_HACIA_ARRIBA;
  }else{       
    if (y>0) y-=velocidad; else controlY=CONTROL_HACIA_ABAJO;
  }
  // Eje X
  if(controlX==CONTROL_HACIA_DERECHA){
    if (x<LIMITE_PANTALLA_X) x+=velocidad; else controlX=CONTROL_HACIA_IZQUIERDA;
  }else{       
    if (x>0) x-=velocidad; else controlX=CONTROL_HACIA_DERECHA;
  }
 
  /*if(y<=0){
    controlY=1;
    y=0;
  } else if(y>=document.getElementById("rectangulo").offsetHeight-30) {
  controlY=0;
  y=document.getElementById("rectangulo").offsetHeight-30;
  }

  if(controlX==1){
    x+=velocidad;
  } else{       
    x-=velocidad;
  }
 
  if(x<=0){
    controlX=1;
    x=0;
  } else if(x>=document.getElementById("rectangulo").offsetWidth-30) {
    controlX=0;
    x=document.getElementById("rectangulo").offsetWidth-30;
  }
*/
  document.getElementById("balon").style.left=String(x)+"px";
  document.getElementById("balon").style.top=String(y)+"px";
}
...



Código:
#balon {
  top:325px; left:230px;
  position:absolute;
  width: 30px; /* Siempre indicar la unidad, pixels, pulgadas, porcentaje... */
  height: 30px; /* Siempre indicar la unidad, pixels, pulgadas, porcentaje... */
}

#rectangulo {
  background-color: blue;
  position:absolute;
  top:5;
  left:5;
  width: 550px; /* Siempre indicar la unidad, pixels, pulgadas, porcentaje... */
  height: 385px; /* Siempre indicar la unidad, pixels, pulgadas, porcentaje... */
}


Código:
...
<DIV id="rectangulo">

<img src="balon.gif" alt="balon" id="balon"/>
<img src="barra1.gif" alt="barra" id="barra"/>

</DIV>
...


Vete despacio, vete implementando, comprobando y luego cuando funcione lo implementado agregas una nueva implementación.

PD. Si crece mucho el fichero HTML sepáralo en tres ficheros, uno para el HTML, otro para CSS y otro para el JS.

Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 2 Horas

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Existen problemas al descargar musica desde you...

SusanaP Tu PC 2 Martes 26 Mar 2019 19:22 Ver último mensaje
El foro no contiene ningún mensaje nuevo

DUDA EJERCICIO

Rodrigo Perez Perez Java 2 Miércoles 14 Nov 2018 15:55 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Base Datos Access Problemas Conexion/Reporte

ce_1187@hotmail.com Visual Basic .NET 0 Jueves 27 Sep 2018 22:31 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Problemas de entendimiento :D

s3v3r1t0 C, C#, Visual C++ 2 Martes 29 Dic 2015 16:14 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Ayuda Problemas Programación Java

Super1 Java 1 Miércoles 23 Sep 2015 20:27 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,