desafios javascript 2012

[caricatos]

Hola:

Cada tanto realizamos algún desafío en este foro.

Propuestas para nuevos desafíos
Mini-desafío: Obtener el número 1000 de la serie de Fibonacci
Nuevo Desafío: Transición entre 2 imágenes
Desafios Javascript, ronda 2

Sé que hay más casos, pero la propuesta es para el futuro, así que supongo que son suficientes referencias para rescatar desafíos que no han llegado a producirse.

Por mi parte, una de mis propuestas era obtener el número 100! (factorial de 100)...

Aquí recogeremos nuevas propuestas.

Espero que alguna se pueda llevar a cabo.

Saludos

[Aijoona]

Veo si encuentro algún otro desafío para agregar :)

[hackjose]

Estaria bien un concurso de juegos html5

Que cada quien haga uno diferente, o ponemos uno y ver cual tiene mejor funcionalidad.

Para empezar un juego sencillon, algo que no tome mucho tiempo para atender las tareas de diario

Saludos

[caricatos]

Hola:

Suena bien lo de html5, pero tal vez sea mejor proponer algo que valga en cualquier formato.

De todos modos, también tiene interés desafíos multi-foros. por ejemplo, propuestas Ajax.

Saludos

[cvander]

Ya que mencionan el tema de los videojuegos y html5, algo super útil hoy en javascript son muchos proyectos de librerías que se presentan (modernizr, raphael, etc.) Todo esto puede ser usado de base para crear algún proyecto e incluso promoverlo desde la comunidad individual de cada librería.

[Albuss]

¿que tal algo relacionado con la libreria WebGl?

[Ex_shadow]

Desafio javascript? Intenta resolver todas las incompatibilidades con ie 6 , 7, 8 css3 xD

o si se puede crear un javascript para hackear algun misil y dirijirlo a las oficinas de microsoft...

[locomian]

Me gusto la idea del juego html5, puede ser usando melonjs es bastante fácil y rápida, ademas podemos crear un buen tuto en español.

[caricatos]

Hola:

Me gusta la idea de los juegos, y las librerías que plantean se ven interesantes; aunque hasta ahora no veo propuestas concretas.

Sobre esas ideas, si son muy sofisticadas pueden llegar a asustar a los candidatos a participar, así que espero que sean propuestas moderadas.

Sobre html5, aunque no lo he trabajado aún (¡ya es hora!), me parece muy interesante, sobre todo el tema de las imágenes svg (aunque también se muestran bien en html4 (no quiero debatir si es correcto o no).

Por esa razón se me ocurre otra propuesta: un generador de polígonos y estrellas svg. Ya había hecho algo en este apunte: SVG: Estrellas, donde puede apreciarse la relativa sencillez de la codificación...

Para terminar, reitero que se hagan propuestas concretas. Hasta ahora las que parecen serlo son las 2 mías:

1. Factorial de 100
2. Generador de figuras svg

Saludos

[Aijoona]

El de factorial:

Código Javascript:

(function f(i) {
    return i > 1 ? i * f(i - 1) : 1;
})(100); // 9.33262154439441e+157
 

[caricatos]

Hola:

Iniciado por Aijoona

El de factorial:

Código Javascript:

(function f(i) {
    return i > 1 ? i * f(i - 1) : 1;
})(100); // 9.33262154439441e+157
 

Supongo que la respuesta es para "calentar" el tema

No sé si viste la resolución de la serie de fibonacci, donde el resultado se trataba de un entero (nada de notación científica)... además, la implementación javascript de operaciones matemáticas es muy "poco" precisa, así que tal como pasó con fibo(1000) sería interesante obtener el resultado en otro lenguaje (en aquel reto era python).

Saludos

[Dradi7]

Bueno

En Ruby seria algo como esto, parecido mucho a phyton
Claro que en ruby si te da el numero entero sin notacion científica en el cual JavaScript no

Código Python:

def fact(n)
    raise ArgumentError, 'El parametro no es de tipo numerico' unless n.is_a? Numeric  
    n==0 ? 1 : n * fact(n-1)
end
 

Para ejecutarlo

Código Python:

puts fact(100)
 

Resultado

Código Python:

93326215443944152681699238856266700490715968264381621468592963895217599993229915608941463976156518286253697920827223758251185210916864000000000000000000000000
 

[hackjose]

Se me ocurre el juego de pong o el de carritos de tetris http://www.juegosdeflash.net/wp-cont...de-Aviones.jpg

saludos

Aparte de esto a alguien le interesaria hacer equipo para crear una guia para maestros del web de CSS3

[caricatos]

Hola:

Ya he conseguido con javascript el 1000!:

40238726007709377354370243392300398571937486421071 46325437999104299385123986290205920442084869694048 00479988610197196058631666872994808558901323829669 94459099742450408707375991882362772718873251977950 59509952761208749754624970436014182780946464962910 56393887437886487337119181045825783647849977012476 63288983595573543251318532395846307555740911426241 74743493475534286465766116677973966688202912073791 43853719588249808126867838374559731746136085379534 52422158659320192809087829730843139284440328123155 86110369768013573042161687476096758713483120254785 89320767169132448426236131412508780208000261683151 02734182797770478463586817016436502415369139828126 48102130927612448963599287051149649754199093422215 66832572080821333186116811553615836546984046708975 60290095053761647584772842188967964624494516076535 34081989013854424879849599533191017233555566021394 50399736280750137837615307127761926849034352625200 01588853514733161170210396817592151090778801939317 81141945452572238655414610628921879602238389714760 88506276862967146674697562911234082439208160153780 88989396451826324367161676217916890977991190375403 12746222899880051954444142820121873617459926429565 81746628302955570299024324153181617210465832036786 90611726015878352075151628422554026517048330422614 39742869330616908979684825901254583271682264580665 26769958652682272807075781391858178889652208164348 34482599326604336766017699961283186078838615027946 59551311565520360939881806121385586003014356945272 24206344631797460594682573103790084024432438465657 24501440282188525247093519062092902313649327349756 55139587205596542287497740114133469627154228458623 77387538230483865688976461927383814900140767310446 64025989949022222176590433990188601856652648506179 97023561938970178600408118897299183110211712298459 01641921068884387121855646124960798722908519296819 37238864261483965738229112312502418664935314397013 74285319266498753372189406942814341185201580141233 44828015051399694290153483077644569099073152433278 28826986460278986432113908350621709500259738986355 42771967428222487575867657523442202075736305694988 25087968928162753848863396909959826280956121450994 87170124451646126037902930912088908694202851064018 21543994571568059418727489980942547421735824010636 77404595741785160829230135358081840096996372524230 56085590370062427124341690900415369010593398383577 79394109700277534720000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 000000000000000000

...¡o era el de 100!...

93326215443944152681699238856266700490715968264381 62146859296389521759999322991560894146397615651828 62536979208272237582511852109168640000000000000000 00000000

Sobre los códigos, espero que se formalice el desafío y nos ponemos manos a la obra (intentaré poner el código algo bonito )

Saludos

[hackjose]

En cuanto al juego de pong, este es mi avance.
No es un super avance pero lo posteo para que se vea actividad

Codigo

Código HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Juego Pong</title>
    <script type="text/javascript">
    
    var X1 = 0, Y1 = 40, X2 = 110, Y2 = 0;
    var canvas = null, ctx = null;
    var PAUSE = true;
    var lastKey = null;
    
    window.addEventListener('load',function(){canvas = document.getElementById('canvas');canvas.style.background = "#000";ctx = canvas.getContext('2d');
    paint(ctx);ejecutar();},false);
    
    document.addEventListener('keydown',function(evt){lastKey = evt.keyCode;ejecutar();},false);
    
    function paint(ctx){
    ctx.fillStyle = "#F00";
    ctx.fillRect(0,0,10,60);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(X1,Y1,10,20);
    
    ctx.fillStyle = "#F00";
    ctx.fillRect(110,0,10,60);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(X2,Y2,10,20);
    }
        
    function ejecutar(){
    
        if(lastKey == 13)
        PAUSE = !PAUSE;
        
        if(PAUSE)
        {
            document.getElementById("pause").innerHTML = "PAUSE";
            
        }
        else
        {
            document.getElementById("pause").innerHTML = "";
        
            if(lastKey == 37)
            {
                if(Y1 > 0)
                Y1 -= 2;
                ctx.fillStyle = "#F00";
                ctx.fillRect(0,0,10,60);
                ctx.fillStyle = "#0F0";
                ctx.fillRect(X1,Y1,10,20);
            }
                
            if(lastKey == 39)
            {
                    if(Y1 < 40)
                    Y1 += 2;
                    ctx.fillStyle = "#F00";
                    ctx.fillRect(0,0,10,60);
                    ctx.fillStyle = "#0F0";
                    ctx.fillRect(X1,Y1,10,20);
            }
                
            if(lastKey == 38)
            {
                if(Y2 > 0)
                Y2 -= 2;
                ctx.fillStyle = "#F00";
                ctx.fillRect(110,0,10,60);
                ctx.fillStyle = "#0F0";
                ctx.fillRect(X2,Y2,10,20);
            }
                
            if(lastKey == 40)
            {
                if(Y2 < 40)
                Y2 += 2;
                ctx.fillStyle = "#F00";
                ctx.fillRect(110,0,10,60);
                ctx.fillStyle = "#0F0";
                ctx.fillRect(X2,Y2,10,20);
            }
        
        }
    }
    </script>
</head>
<body>
    <canvas id="canvas" width="120" height="60"></canvas>
    <p id="pause"></p>
</body>
</html>
 

Saludos

[Aijoona]

Que te parece colgarlo en jsFiddle / jsbin para poder ejecutarlo?

[hackjose]

Iniciado por Aijoona

Que te parece colgarlo en jsFiddle / jsbin para poder ejecutarlo?

Ok gracias por la info, habia visto que en maestros del web usaste esta herramienta.

Dejo el link http://jsfiddle.net/veDRG/

[Fylux]

Yo propongo hacer un juego basado en Tiles(Como se hacen Pokemon o Zelda). Aquí hay un buen tutorial: http://www.jlabstudio.com/webgl/tutoriales-javascript/

Sobre juegos en WebGL recomiendo la librería three.js y algunas cosas interesantes hechas con WebGL:
http://mrdoob.com/projects/voxels/
http://redshootinghood.info/
http://inear.se/beanstalk/
https://developer.mozilla.org/media/uploads/demos/a/z/azakai/3baf4ad7e600cbda06ec46efec5ec3b8/bananabread_1347483738_demo_package/index.html

También añado que los juegos hechos en WebGL rinden mucho más que los que están hechos con Js normal.

Saludos.

[hackjose]

Iniciado por Fylux

Yo propongo hacer un juego basado en Tiles(Como se hacen Pokemon o Zelda). Aquí hay un buen tutorial: http://www.jlabstudio.com/webgl/tutoriales-javascript/

Sobre juegos en WebGL recomiendo la librería three.js y algunas cosas interesantes hechas con WebGL:
http://mrdoob.com/projects/voxels/
http://redshootinghood.info/
http://inear.se/beanstalk/
https://developer.mozilla.org/media/...age/index.html

También añado que los juegos hechos en WebGL rinden mucho más que los que están hechos con Js normal.

Saludos.

Gracias por la info, estan super los enlaces

[patkoala]

Aquí esta mi propuesta sobre el Pong:
http://jsfiddle.net/dHjsp/embedded/result/
Y ahora estoy programando aquel juego en el que un avión/ovni pasaba por encima de rascacielos y tenía que ir destruyendolos para no chocar(no, no recuerdo el nombre )

Hacía ya un tiempo que no programaba por no encontrar retos o experimentos interesantes, ¡Gracias!

[hackjose]

Pongo otro avance mas, por cierto se juega con las teclas de direccion(las teclas que tienen flechitas)

Enlace http://jsfiddle.net/veDRG/2/

[Panino5001]

hackjose no me funciona el control por teclado (PC, Firefox/Chrome)

[hackjose]

Iniciado por Panino5001

hackjose no me funciona el control por teclado (PC, Firefox/Chrome)

Panino5001 ya lo probe y funciona en chrome, firefox, opera, safari e internet explorer 9.

Cuando entras el juego esta pausado y debes despausarlo con enter

pause->enter

barra izquierda se mueve con las flechas izquierda y derecha

barra derecha se mueve con las flechas arriba y abajo

Saludos

[hackjose]

Creo que ya lo acabe

http://jsfiddle.net/veDRG/3/

[Aijoona]

Más tarde meto mano y lo mejoramos un poco :)

EDIT: Mi fork (en progreso!), http://jsfiddle.net/Aijoona/hjgVm/

[caricatos]

Hola:

Parece que hay interés en el juego "Pong", así que podemos formalizar el desafío... Espero que se presenten los interesados, y me gustaría que se planteasen las condiciones (no las tengo claras).

Sobre mi propuesta del factorial, ya que no hay interesados voy a mostrar mi resultado:

Código:

function factorial(n)	{

	function revés(cadena)	{
	/*
		arreglo = cadena.split("");
		resultado = "";
		while (arreglo.length > 0) resultado += arreglo.pop();
		return resultado;
	*/
		return cadena.split("").reverse().join("");
	}

	function f(x){
		_resultado = "1";
		for (i = 2; i <= x; i++)	{
			_acumulado = "";
			_sumar = 0;
			for (j = 0; j < _resultado.length; j++)	{
				_digito = "0123456789".charAt(_resultado[j]) * i + _sumar;
				_resto = _digito % 10;
				_sumar = parseInt(_digito / 10);
				_acumulado += _resto.toString();
			}
			if (_sumar > 0) _acumulado += revés(_sumar.toString());
			_resultado = _acumulado;
		}
		return revés(_resultado);
	}
	if (n == 1)	return n
//	else	return n * factorial(n - 1);
	else	return f(n);
}

Tal vez pueda mejorarse, si alguien cree que puede, también se puede plantear otro desafío.

Saludos

[marlanga]

Iniciado por Fylux

Yo propongo hacer un juego basado en Tiles(Como se hacen Pokemon o Zelda). Aquí hay un buen tutorial: http://www.jlabstudio.com/webgl/tutoriales-javascript/

Yo soy el autor de ese blog aunque hace mil años que no lo actualizo, por diversos motivos (sobre todo, vagancia). Tengo pendiente uno de Tiles con perspectiva isométrica (que tengo casi hecho ej. https://dl.dropbox.com/u/13486967/ti...bos/index.html) aunque como se puede ver, tengo unos problemillas con el buffer de profundad (en concreto, debido a su ausencia )

Pero ahora me paso por aquí porque quería hacer mi propia versión del pong, usando vectores, lo que permite un control mucho más preciso de la bola, y que cuando le pego con una esquina de la pala, le modifico el ángulo de salida (concretamente, cuanto más lejos está el centro de la pala con el centro de la bola, más variación de ángulo le meterá).

http://jsfiddle.net/marlanga/82uJH/

Los controles son W y S para el jugador 1, y los cursores para el jugador 2.

Dejo pendiente el reseteo de la partida cada vez que un jugador marca (básicamente, situar la bola en el centro y darle un ángulo de salida al azar) y para hacer más difícil la partida, incrementar la velocidad de la bola un poco cada vez que choca en una pala.

[Fylux]

Iniciado por marlanga

Yo soy el autor de ese blog aunque hace mil años que no lo actualizo, por diversos motivos (sobre todo, vagancia). Tengo pendiente uno de Tiles con perspectiva isométrica (que tengo casi hecho ej. https://dl.dropbox.com/u/13486967/ti...bos/index.html) aunque como se puede ver, tengo unos problemillas con el buffer de profundad (en concreto, debido a su ausencia )

Pero ahora me paso por aquí porque quería hacer mi propia versión del pong, usando vectores, lo que permite un control mucho más preciso de la bola, y que cuando le pego con una esquina de la pala, le modifico el ángulo de salida (concretamente, cuanto más lejos está el centro de la pala con el centro de la bola, más variación de ángulo le meterá).

http://jsfiddle.net/marlanga/82uJH/

Los controles son W y S para el jugador 1, y los cursores para el jugador 2.

Dejo pendiente el reseteo de la partida cada vez que un jugador marca (básicamente, situar la bola en el centro y darle un ángulo de salida al azar) y para hacer más difícil la partida, incrementar la velocidad de la bola un poco cada vez que choca en una pala.

Oh, siempre he buscado una forma de contactar contigo.
Desde luego tus tutoriales son muy buenos, y creo que mucha gente te lo agradecería. Yo tengo pensado hacer próximamente un curso de juegos en JavaScript y tu blog me ha ayudado mucho.

Saludos.

PD: No sabía que vivíamos en la misma provincia.

[marlanga]

¿Tienes pensado impartir, o asistir a un curso de videojouegos? Me interesaría saber más acerca de ese curso, donde se imparte, si es asistencial, o a distancia, de pago, etc.

Y volviendo al pong, anoche no pude dormir sabiendo que había dejado un juego incompleto a la vista de todos.

Probablemente cree un breve tutorial en mi blog acerca de cómo lo he hecho (para explicar el apasionante mundo de usar vectores para mover a las entidades de los juegos).

Y vualá. Ahora la pelota acelera cuando choca con las palas, cuando se marca un gol se resetea la partida, y además, como gran extra, le he añadido SONIDOS.


http://jsfiddle.net/marlanga/82uJH/7/

Acelerar la bola tiene un problemilla. Cuando la bola alcance mucha velocidad, es posible que entre frame y frame, recorra más distancia en ese tiempo delta transucrrido que el ancho de la pala. Es decir, es posible que "atraviese" la pala. Evitar ese problema es jodido, asi que lo que he hecho ha sido "posponerlo" un rato. En vez de mover la pelota el tiempo transcurrido desde el último movimiento, lo que hago es dividir ese tiempo en varios segmentos, y mover la pelota poco a poco. Por ejemplo, si el último movimiento tardó 40 milisegundos, y lo divido en trozos de 2 milisegundos, en ver de mover la pelota una sola vez la distancia que haya recorrido en 40 milisegundos, lo que haré es mover la pelota 20 veces la distancia que haya recorrido en 2 milisegundos. Así los saltos entre movimiento y movimiento no serán tan grandes, y tendrá que alcanzar 20 veces más velocidad para atravesar la pala, algo que nunca ocurrirá pues a no ser que jueguen 2 chinos, la pelota nunca irá tan rápido porque antes habrá perdido el match alguno de los jugadores.

Sin embargo, si entrais al juego y no moveis las palas, verás que al final, la pelota "atravesará" una de las palas, pero a una velocidad absurda.

[caricatos]

Hola:

Se me ocurren algunas cosas más, aunque tal vez algo sofisticado... de todos modos, ahí va:

Un reloj analógico en svg y/o canvas (yo me apuntaría en svg). Ya tenía uno con html/javascript: Reloj Analógico.
También con svg/canvas un calendario "navegable" (también podría ser con html/javascript).
Y algo que se me ocurrió últimamente es un chequeador de sitemaps (o tal vez feeds)... al ser un xml, bien podría usarse Ajax. No solo chequear que enlacen correctamente, sino controlar también imágenes y otras alternativas válidas (aunque partícularmente solo llegué a interesarme en las imágenes)

Y sobre el !100, otro reto podría ser operaciones básicas de números grandes; por ejemplo de unos cincuenta (50) dígitos.

Saludos