[SOLUCIONADO] Declaracion rechazada. ¿?

[mmiiqquueell]

Hola buenas. Acabo de registrarme ya que veo que el foro de JavaScript esta activo.

Bueno, estoy haciendo un juego (tontería) pero ya me sirve para aprender y practicar algunas cosas.

Lo que intento es hacer que una imagen se mueva de arriba a abajo de forma continua. Al principio lo hice mediante Keyframes del CSS pero Javascript no detecta la posición margin-top, siempre lo detecta en 0. Sin embargo buscando encontré que puedo decirle que se mueva usando el Style.Top. Con un Alert he podido comprobar que me detecta sin problemas la posición.

Ahora viene el problema. Le metido dentro de un Timer la función tal cual.

Código:

setInterval(function(){bid001()}, 1000);
				
	function bid001(){
		
		if (document.getElementById("bid01").style.top <= "650px") {
			document.getElementById("bid01").style.top = document.getElementById("bid01").style.top + "100px";
	
		}
		else if (document.getElementById("bid01").style.top >= "651px") {
			document.getElementById("bid01").style.top = "-30px";
		}
	}

Esto funciona 1 sola vez. La segunda vez debería seguir bajando la imagen pero en vez de eso me suelta este aviso:

Error al interpretar el valor para 'top'. Declaración rechazada.

En otros navegadores (utilizo Firefox) no marca errores o avisos pero hace lo mismo :(

Mi idea es mover la imagen y que pueda elegir cuando quiera que vuelva arriba mientras sigue desplazándose hacia abajo.


Espero haberme explicado y que me podáis ayudar.



También otra cosa. Como veis estoy usando el getElementById cuando podría meterlo en una variable para así no tener que poner tanto código, pues bueno aunque lo ponga en una variable me salta error de que no existe la variable :S. No entiendo nada. Tengo otros trabajos de clase en las que declaro variables de elementos con ID y funcionan y no se porque aquí no quiere pillarme la variable. Otras veces en vez de decirme variable is null me dice que falta " ; ". Hace 3 semanas que empece con Javascript así que soy un poco noob aun.

Este juego lo hago por mi cuenta y aunque le he pedido ayuda al profesor prefiero seguir con el temario de clase y aprender lo que enseña y dejar el juego para mi tiempo libre.

Un saludo y gracias de antemano.

[Alexis88]

Bienvenido a FDW.

El problema está en que estás intentando tomar el valor de la posición vertical del elemento con una propiedad que es establecedora, es decir, que solo debe de usarse para establecer un valor, por lo que, aunque en la hoja de estilos establezcas una posición vertical, la primera vez no la obtendrás, pero sí en los siguientes intentos si entre ellos estableces un valor pero en JavaScript en la propiedad style.propiedad. Para evitar esto, puedes leer directamente el valor indicado en la hoja de estilos mediante la colección de hojas de estilos styleSheets, luego a su propiedad cssRules y ya a partir de ahí, puedes acceder al valor de la propiedad con style.propiedad.

Código Javascript:

document.styleSheets[a].cssRules[b].style.propiedad
 

En donde a es el número de hoja de estilo en el documento en donde se encuentra el valor de la propiedad que deseas tomar del elemento en cuestión, mientras que b es el número de regla dentro de la hoja de estilos, o sea, el número de bloque en el cual se encuentran definidas las propiedades del elemento a modificar.

Otro error que noto que cometes es este:

Código Javascript:

document.getElementById("bid01").style.top + "100px"
 

De esa forma, estás concatenando valores ya que, si bien la primera vez no se detecta un valor para style.top, por lo cual se cumple la primera condición ya que comparas dos cadenas, una vacía y la otra que es '650px', terminas estableciendo el valor de 100 píxeles, pero a partir de la segunda en adelante, haces "100px" + "100px", lo cual resulta en "100px100px". Para evitar eso, debes de tomar el valor numérico de la propiedad, el cual puedes obtener utilizando la función parseInt, pero además, la suma se debe de completar de la forma + 100 + "px" porque si sumas un valor numérico con una cadena, se unirán en una sola cadena.

Dicho todo esto, una de las formas de hacer lo que buscas sería la siguiente:

Código Javascript:

if (parseInt(document.styleSheets[0].cssRules[0].style.marginTop) <= 650){
    document.styleSheets[0].cssRules[0].style.marginTop = parseInt(document.styleSheets[0].cssRules[0].style.marginTop) + 100 + "px";
}
else{
    document.styleSheets[0].cssRules[0].style.marginTop = "-30px";
}
 

Sin embargo, existen maneras más cortas (en cuestión de escritura). Una de ellas es tomando el valor computado de la propiedad del elemento, para lo cual debes de usar el método getComputedStyle, el cual es obtenedor (solo puedes obtener valores, no establecerlos) y para establecer los valores, puedes seguir usando las propiedades style.propiedad:

Código Javascript:

if (parseInt(getComputedStyle(bid01).marginTop) <= 650){
    bid01.style.marginTop = parseInt(getComputedStyle(bid01).marginTop) + 100 + "px";
}
else{
    bid01.style.marginTop = "-30px";
}
 

Y una manera aún más corta (siempre en cuestión de escritura) es utilizando la propiedad offsetTop (que también es solo obtenedora), la cual devuelve el valor numérico solamente, por lo que ya no es necesario obtener el mismo con parseInt:

Código Javascript:

if (bid01.offsetTop <= 650){
    bid01.style.marginTop = bid01.offsetTop + 100 + "px";
}
else{
    bid01.style.marginTop = "-30px";
}
 

Primera forma
Segunda forma
Tercera forma

Como verás, con cualquiera de estas tres formas puedes obtener el resultado deseado, aunque con la primera debes de tener cuidado ya que, si llegaras a trabajar con clases y estas afectan a más de un elemento, puedes terminar obteniendo resultados no deseados si solo pretendes modificar los estilos de un elemento en particular. Por cierto, quité la segunda condición porque se sobreentiende y, para el ejemplo, utilicé la propiedad marginTop, para establecer el margen superior con respecto al elemento anterior a este, pero si deseas establecer el margen con respecto al documento (sin importar los demás elementos), tienes que establecer una posición absolute para poder usar la propiedad top.

P.D.: También puedes obtener al elemento por su id escribiéndolo directamente, como puedes ver en los ejemplos y si no deseas repetir líneas de código, como en donde se toma el valor del margen superior, puedes guardarlo en una variable y reutilizar la misma.

Saludos

[mmiiqquueell]

Hola Alex, Sin duda una excelente respuesta. La primera opción no acabo de pillarla del todo, supongo que donde el [0] debo poner el numero de posición que esta el objeto en el CSS y el de CSSRULES no se si es lo mismo o no, en todo caso en 0 me mueve todo el body pero poniendo el numero del objeto contando desde 0 o 1 me dice error. Ten en cuenta que hace poco que he empezado con Javascript asi que no entiendo algunas cosas aun. Por supuesto ya sabia de antes programar phyton y VisualBasic pero esto es un poco diferente al declarar las funciones xD.

El segundo si me ha funcionado a la primera y con los resultados que yo deseaba de inmediato, con poner ( bid01.style.marginTop = "-30px";) al botón me manda la imagen arriba y no continua bajando que era lo que tenia de problema con el Keyframes que a pesar de hacer la función no me mandaba la imagen arriba.

El tercero es lo que estaba usando mediante el Keyframes pero como dices solo puedo obtener el resultado mientras que con el segundo puedo mandar la imagen arriba otra vez.

Por si pica la curiosidad, estoy probando de hacer un nivel del (Beatmania, DJ-Max, etc..) Juegos de música. Ya me gustaría hacer algo estilo SoundVoltex pero eso seria rayarse xD. Pero si, estoy haciendo estilo DJMAX, ya que me dedico al diseño 3D no tengo problema en crear texturas, de echo ya lo tengo todo montado y listo solo es programar y esta era la ultima parte que no lograba hacer funcionar lo cual te agradezco muchísimo :D.



Bueno, ahora como ultima pregunta me falta algo que ya me explico el profesor y que era un poco complejo y difícil.

Quiero que la suma de 100px que hace cada segundo lo pueda cambiar en base a un timer. Es decir Un timer estará contando todo el tiempo y tendrá un IF dedicado a cada pieza. Cada vez que el timer llegue a X tiempo haga que la suma de 100px cambie a 0 y que cuando llegue a otro valor mayor pase a 100. La idea es controlar que la imagen baje cuando yo le diga y después se quede arriba quieta hasta que la vuelva a llamar a pantalla.

Esto se que no es fácil puesto que me explico el profesor que para hacer esto era necesario primero quitarle el valor y luego ponérselo otra vez.

En todo caso no quisiera irme por las ramas, sin esto puedo hacerlo pero mandando la imagen mas arriba fuera del body para conseguir llamarla cuando quiera.

Bueno eso es lo único que me queda para poder seguir el juego, luego sera hacer la sincronización de cada pieza que como máximo serán 12, me preocupa el consumo de procesador por tanto timer que seguramente me pasara factura.

Vi que este Japones lo consiguió asi que yo también quise probarlo pero el lo hace de forma aleatoria y yo lo quiero hacer con un patrón siempre igual.

http://d.hatena.ne.jp/sheile/20090106/1231254753

y ahora he visto también este: http://jsdo.it/naoyashiga/bPdh

El que hago yo es este: https://www.youtube.com/watch?v=65Rf-g6rLIg

No haré las notas largas para evitar problemas y no liarme con tanto código :P.

Gracias de antemano nuevamente.

[Alexis88]

Por lo poco que entendí de lo que dijiste, puedes usar variables en las que irías acumulando valores por cada segundo transcurrido hasta que lleguen a un determinado valor en el que les asignes los valores iniciales, de esta manera, podrías llevar el control que necesitas.

Saludos

[mmiiqquueell]

Buenas Alex, bueno he consultado con mi profesor y me ha dicho que deberia meter todas las veces que necesito las (piezas por pantalla) en un array y luego con un timer llamarlas a pantalla y al acabar eliminarlas, pero no estoy muy seguro. Por ahora he metido un Timer que cada X tiempo me llama las notas y al superar el limite las notas se van fuera de la pantalla y no se ven hasta que son llamadas de nuevo. Vamos, todo el tiempo estan bajando tal y como pedi hasta que yo digo que se vayan a una posicion Y negativa para que aparezcan por arriba de nuevo.

Bueno necesito saber algo. A un Timer puedo ponerle una velocidad de coma flotante?

Ahora mismo las notas o teclas o piezas las estoy llamando con un timer cuya velocidad es (16.6666666666666..... infinito) he metido como 20 digitos despues de la coma puesto que no deberia ser notable en todo lo que dura la cancion, sin embargo me parece que no me pilla el coma flotante sino que me pilla solo el (16). Entonces la pregunta es obvia. Puedo poner la velocidad del timer con comas tal como es el 16.6666....?

Es que me hace no se si un retraso o un adelanto respecto a la cancion. al ser una cantidad minima pues no se nota, pero claro yo me estoy guiando por la cancion y no me cuadra la velocidad de pulsacion con la musica. Al principio las 5 primeras piezas si cuadran pero luego las siguientes se atrasa o se adelanta un poquito lo que hace que falle. Ahora he comprobado, se adelantan como si el "coma 6666..." no existiera, entonces no pilla comas. verdad?

Justamente es un video con 9000 fotogramas a una velocidad de 60 fotogramas por segundo, si le doy 16.666666.... entonces puedo utilizar el mismo tiempo de fotogramas para el timer que llama las notas pero si no puedo usar comas entonces no se como hacerlo para que cuadre :S a menos que pase el video a 50 FPs pero asi perderia informacion y tendria que reajustar toda la velocidad de las piezas y la precision :/ Joer... Intento hacer lo que no se hacer.

[Alexis88]

El temporizador solo toma la parte entera, no la parte decimal. Es bueno recordar que el tiempo está dado en milésimas de segundo, quizá que por ahí puedes ver la manera de adecuarlo a lo que necesitas.

Saludos

[mmiiqquueell]

Gracias de nuevo Alex.

Pues al final he grabado de nuevo el video a 100FPs con el O.B.S. que permite hasta 120 FPs reales sin tener en cuenta la tasa de la pantalla. Ahora me queda exportar todos los fotogramas y coger los necesarios y con esto tendre para dar un Timer que se actualizara cada 10 milesimas que iran a la par con los frames del video a precision exacta. Me toca tocar la precision de las teclas y las velocidades que me llevara unas cuantas horas pero bueno, la satisfaccion de programar es el resultado de conseguir nuevos conocimientos. :P

Por ahora eso es todo. Muchas gracias Alex.