de webmaster a webmaster

Lo que tenemos sobre la etiqueta ‘juego’

Motor para videojuegos bajo HTML5 y JavaScript

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Impact HTML5 Game Engine es un motor de videojuegos desarrollado por Dominic Szablewski de PhobosLab denominado http://impactjs.org/ que todavía, durante este mes de septiembre, aún no está disponible para la descarga, pero promete y mucho.

Permite animación, audio, sincronización de eventos, marcadores, editor de niveles y compatibilidad, mucha compatibilidad pues no precisa Flash utiliza tecnologías HTML5 y JavaScript. Lo primero que se viene a la cabeza es si funcionará con iPhone, iPod e iPad, y Android, debería, pero según cuenta Dominic, bajo iPhone 3G sólo da unos tristes 12 fps además de que tiene problemas con el audio, bajo Android o los nuevos iPhones e iPads todavía no lo ha probado, así que de momento no lo podemos afirmar.

Puedes dejarles tu email en su página web para que te avisen cuando esté disponible. y lo mejor de todo, durante la espera puedes echarte unas partidas al videojuego Biolab Disaster, una demo realizada enteramente por el creador de este game engine.

Biolab Disaster es un videojuego de plataformas con mucho sabor a pixel y una excelente jugabilidad.

Lo más interesante de este post es que te traemos un vídeo realizado por su autor con el “¿Cómo se hizo?”, no te lo pierdas empieza flojo, pero luego nos muestra parte del código, ideal para tomar buena nota.

La potencia de JavaScript en un 1Kb.

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Impresionante es lo que podemos ver y tocar en la web “1K” donde se celebra el concurso de “demos técnicas” realizadas en JavaScript y cuya premisa es que no superen un KA.

Hay de todo y muchas de ellas son excelentes, incluso un juego de ajedrez y un juego de plataformas estilo Mario, entrañable personaje videojuegil que ayer cumplió 25 años, todas estas demos están metidas en tan sólo 1Kb. de memoria.

Parece increíble, aunque amigos… no quisiera yo contar la historia de cuando antes de jugar me cascaba ochenta y pico líneas de código Basic a pelo, porque no existían pendrives ni discos duros ni siquiera disquettes o unidades de cassete en aquel venerable Sinclair ZX81 de exactamente 1Kb. de memoria y eso sin contar que la teclas que tenía eran duras, duras, planas con un sistema de membrana con sonido de rana… que tiempos!

¿Así que, a qué esperas para alucinar? http://js1k.com/demos

Por si fuera poco la visita de ese enlace os copypasteamos a continuación el código del juego de plataformas que hemos comentado, eso sí, para un mayor entendimiento os lo mosstramos sin comprimir y comentado, es decir ocupa más de una KA, es una long version ideal para aquellos que ven en el JavaScript el lenguaje de las videoconsolas del futuro, es decir, de las PlayStation 4 parriba… 😉 :

canvas=document.body.children[0];
screen_height=time=150;
last_height=screen_width=canvas.width=800;
unit=dead=50;
heights=[];

// The abbreviation loop, initializing the variabled needed by the key-handlers on the side.
for(prop in context=canvas.getContext('2d'))
  context[prop[jump=speed_x=speed_y=0]+(prop[6]||'')]=context[prop];

setInterval(function(){
  if(dead)
    // initialize the player position, score, and heightmap
    for(x=405,i=y=score=0;i<1e4;)
      // (screen_width is reused as the off-the-screen height of gap blocks)

      // a block can be a gap if its index is <9, or if the last block was no gap. after this test,
      // a random number is compared to .3 to determine whether an actual gap is generated, or a
      // regular random height.
      last_height=heights[i++]=
        i<9|last_height<screen_width&Math.random()<.3?screen_width:Math.random()*unit+80|0;

  // silly formula to create parabolic movement based on the time
  plant_pos=++time%99-unit;plant_pos=plant_pos*plant_pos/8+20;

  y+=speed_y;
  // only move horizontally if that doesn't take us deep underground (x/unit|0 fetches the index of
  // the block below an x coordinate)
  x+=y-heights[(x+speed_x)/unit|0]>9?0:speed_x;
  // compute final player height index, and ground level under it
  ground=heights[player_index=x/unit|0];
  // adjust y and speed_y based on whether we are on the ground or not
  speed_y=y<ground|speed_y<0?speed_y+1:(y=ground,jump?-10:0);

  // we'll need the context a lot
  with(context){
    A=function(color,x,y,radius){
      // a is the abbreviated form of arc
      radius&&a(x,y,radius,0,7,0);
      // if color is not a gradient object (we set a P property in gradient objects), it is an index
      // into a set of colors
      fillStyle=color.P?color:'#'+'ceff99ff78f86eeaaffffd45333'.substr(color*3,3);
      // f for fill, ba for beginPath
      f(); ba();
    };

    // now loop over visible, or close to visible, blocks, and draw them and their clouds
    for(dead=i=0;i<21;i++){
      // this loop is reused for drawing the background/rainbow, which consists of seven concentric
      // circles. there's no good reason why interleaving clearing the screen with drawing the
      // screen's contents should work, but in this case it does
      i<7&&A(i%6,screen_width/2,235,i?250-15*i:screen_width);

      // we start drawing 5 units in front of the player (first four will be off-screen, needed just
      // for clouds)
      height_index=player_index-5+i;

      scroll_pos=x-height_index*unit;
      // since player screen position is fixed, we can use scroll position for collision detection.
      // this variable indicates whether the player is in the 'middle' of the current block
      player_in_middle=scroll_pos>9&scroll_pos<41;

      // ta for translate. move to start of block to make other drawing commands shorter
      ta(unit-scroll_pos,0);
      // cL for createLinearGradient, for the ground/grass gradient
      gradient=cL(0,height=heights[height_index],0,height+9);
      // if height is divisible by 6, there's a coin here. draw it. if the player is standing on the
      // ground, in the middle of this unit, pick up the coin
      height%6||(A(2,25,height-7,5),y^ground||player_in_middle&&(heights[height_index]-=.1,score++));

      // abbreviate, since we need this twice (and use it again to test whether a value passed to A
      // is a gradient)
      gradient.P=gradient.addColorStop;
      // this implements sinky terrain---when the index is divisible by 7, we use a different color,
      // and do the sinking if the player is standing here
      gradient.P(0,height_index%7?'#5e1':(height_index^player_index||y^height||
                                          (y=heights[height_index]+=plant_pos/99),'#a59'));
      // brown earth color for the bottom of the gradient
      gradient.P(1,'#b93');

      // this draws the clouds
      height_index%4&&A(6,time/2%200,9,height_index%2?27:33);

      // draws the terrain block. m is moveTo, qt is quadraticCurveTo, l is lineTo
      m(-6,screen_height);qt(-6,height,3,height);l(47,height);qt(56,height,56,screen_height);A(gradient);

      // draw deco trees or piranha plant (height==screen_width for gap blocks), check for collision
      // with plant
      height_index%3?0:height<screen_width
        ?(A(gradient,33,height-15,10),fc(31,height-7,4,9))
        :(A(7,25,plant_pos,9),A(3,25,plant_pos,5),fc(24,plant_pos,2,screen_height),
          dead=player_in_middle&y>plant_pos-9?1:dead);

      // undo block-local translation
      ta(scroll_pos-unit,0)
    }

    // draws the player, using the speed to adjust the position of the iris
    A(6,unit,y-9,11);
    A(5,iris_x=unit+speed_x*.7,iris_y=y-9+speed_y/5,8);
    A(8,iris_x,iris_y,5);

    // color is already dark from eye pupil, draw score with this color
    fx(score+'¢',5,15)
  }

  // check whether the player has fallen off the screen
  dead=y>screen_height?1:dead
},unit);

onkeydown=onkeyup=function(e){
  // if this is a keydown event, new_val gets the value 4, otherwise 0
  new_val=e.type[5]?4:0;
  e=e.keyCode;

  // give jump a truthy value if up was pressed, falsy if up was released
  jump=e^38?jump:new_val;

  // similar for speed_x, inverting new_val if left is pressed
  speed_x=e^37?e^39?speed_x:new_val:-new_val
}

Blogueado por uvedobles.com alias uvedobles.com

September 14th, 2010 a las 7:32 am

Cómo añadir un botón para compartir con Facebook

han cantado bingo! ahora deja tu respuesta

Hay bastante formas para añadir botones para compartir mediante Facebook un enlace de una página web por ejemplo la tuya propia para proporcionarle caracteristicas autobomberas, de autobombo, pues bien de todas las formas que existes hoy nos quedamos con esta que te presentamos, por el momento, ya que cuenta con una integración bajo la tecnología “más fácil imposible”, se trata de un iframe, hay está el truco del almendruco, pero bueno, hoy con el calor que hace no estamos muy puristas y preferimos pasar de APIs y otras infernalidades que provocan dolor de cabeza al pasar de 30 grados así que si quieres probar que tal funciona eso de compartir en Facebook alguna de nuestras webs haz como nosotros y luego ya integrarás más.

Para nuestros experimentos con gaseosa hemos elegido nuestra web amiga http://miMac.es especialista en juegos para mac.

Al pie de página, justo antes de cerrar el </body> hemos insertado nuestro código del iFrame para que aparezca un botón “Me gusta” con un contador de gente a la que le gusta nuestra página dedicada a Mac, puedes ver el resultado en cualquier página de miMac.

Y ahora el código:


Aquí tienes explicadas las diferentes variables y los valores que pueden tomar:

  • href – Aquí tienes que declarar la URL que quieres compartir en Facebook.
  • layout – Aquí el estilo del botón, que puede tener los siguientes valores: standard o button_count
  • show_faces – Con esta variable puedes mostrar o no el avatar de quienes del gusta la anotación. Valores: true o false.
  • width – El ancho que quieres darle al iframe.
  • action – El texto que quieres que salga en el botón, los posibles valores son: like o recommend.
  • font – El tipo de letra.
  • colorscheme – El esquema de colores, los valores posibles son: light, dark o evil.

En otro post buscaremos lo mismo pero para Twitter.

Blogueado por uvedobles.com alias uvedobles.com

July 13th, 2010 a las 11:38 am

Jobs, danos el Flash de cada día

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Erre que erre los de Apple, primero pasan de Flash durante dos años en su fofono de la muerte, luego dicen que su tablet de la muerte tampoco incluirá el plugin porque si esto, o si lo otro y venga a tirar balones fueras, la batería, el consumo, la seguridad, mentiras como pianos, ostias! que no somos tontos lo que os pasa es que si Flash ve la luz en vuestros dispositivos ultracerrados y elitistas se os acaba el pan vuestro de cada día, porque señores, con Flash se pueden hacer muchos pero que muchos de los miles de juegos como esos que pupulan por la appStore a 0,79 eurillos y que son un nutriente más que consolidado, superando a muchas de las otras divisiones de Apple.

Decidlo así, que no lo abrís porque os fastidia el negocio y volveré a creer en vosotros, los de la manzana mordi…podrida… ¿Será ese gusano el mismísimo Android?

Así que ni corto ni perezoso me hago eco de la iniciativa que han tenido los de http://sosapplesos.com/

Si bien puede ser un poco malsonante y soez contra el Dios Steve, que le den, por pinocho, que no todos somos tan tontos.

La inicitiva de SOS aplicable para páginas web made in Flash, hace que tras detectar que el visitante usa un privativo iPhoneo iPad, le muestra un mensaje diciendo que el que hay detrás del aparatito te odia…

Desde hace unos tres años me desilusioné con Flash, por temas de SEO por que era caro, y lo acabé abandonando cuando tiempo a, fui uno de los que primero le metió mano, cuando el plugin apenas alcanzaba el 30% de los navegadores del planeta, ahora paso de él y no desarrollo nada con Flash, soy de Ubuntu y lastimosamente no hay alternativa para desarrollar en Flash, pero lo que está haciendo Apple me parece un abuso de poder y un insulto a la libertad de la gente.

Si nos pusiésemos de acuerdo y esto lo aplicáramos sistemáticamente en todos los blogs del planeta, con o sin Flash seguro que Apple recibiría tal aluvión de críticas y reclamaciones por parte de usuarios descontentos con el producto que esta debería permitir sí o sí el plugin de Flash.

¿Alguien se va a comprar el iPad este viernes?

Blogueado por uvedobles.com alias uvedobles.com

May 26th, 2010 a las 4:49 pm

Dándole vueltas a una tienda de aplicaciones web

sin comentarios, by the moment porfaplis, deja uno que "é grati"

Vamos a ver, antes que nada y aunque en ocasiones este artículo pueda girar en torno a la posible noticia sobre la futura tienda de aplicaciones de Google quiero aclarar que Google no ha inventado absolutamente nada, al menos en lo referente a tiendas online de software con pago por descarga.

Desconocemos aunque aplaudimos al programador, inventor o businessman que un buen día se levantó por la mañana y dijo tras bostezar con alarido incluído: ¡Voy a vender mis aplicaciones a través de la red! ¡Pago por descarga!

Si bien creo que esto debe haber sido un pensamiento más bien común, simultáneo y global en cientos de personas relacionadas con la venta de software y el uso diario de internet, pues es una extensión lógica de ambos mundos cuyo punto de cruce no es otro que el pago por descarga. Así que sin atribuir la excelente idea a nadie en concreto podemos dar gran parte del mérito a la propia y en exceso popular Apple con su famosa AppStore; un cruce a medio camino entre lo que un día fue la iTunes Store y un servicio de descarga de aplicaciones como Softonic pero enfocado a su dispositivo cerrado a cal y canto, que no es otro que el ya no tan excelente iPhone, por cierto, hoy he soñado que manchaba su pantalla con pegamento por descuido y que el dispositivo literalmente se deshacía, momento en el que decidí que era el instante perfecto para comprar un flamante y nuevo smartphone equipado con Android, si bien tras despertar y mirar la cuenta bancaria decidí aplazarlo por tiempo indefinido, malditos lectores que no clickais en la public… 😉 ¡Lo siento, lo tenía que decir! Un clic por el amor del byte

Tras esta interesante auqnue pedigüeña reflexión que no nos lleva a nada o más bien nos lleva a no se que página de no se que que no interesa absolutamente a nadie más que a mi, por lo del click y al alto y desconocido porcentaje que se llevan los chicos de Mountain View, es decir el todopoderoso Google, por lo del click, vamos a intentar darle algo de semántica y provecho real a este post que hoy parece me encuentro algo más que  espeso, ya que como en muchas ocasiones tras enterarte de una noticia que consideras bomba o de máximo interés para tí, como la de la semana pasada cuando Google dijo al mundo, voy a crear una webstore, corrí a mi registrador de dominios de turno a comprar algo relacionado.

Encontré un dominio y sin pensármelo lo compré, a coste de retrasar un poco más la compra de mi soñado nuevo smartphone, no se, ¿os parece a vosotros bueno?

webappstore.org

A mi sí y no, no está mal pero lo del .org la filosofía .org que hay detrás, y que no dudaré en olvidar, no casa en demasía con lo store con un marcadísimo caracter comercial, además que con las estadísticas en la mano visitamos cada día menos .org, es como algo de antiguo y rancio, así que no se si he tirado los 9 dólares que me ha costado este dominio, aún así debo de darle algunas vuelta de tuerca más.

Al principio realmente creía que había contratado un buen dominio, tanto que videollamé a un gran amigo y colega, Pedro de xperiments.es y tras contárselo el me dijo ok! es bueno. Transcurrido un día Pedro me llama y me cuenta que ha encontrado libre:

webapp.es

¡Qué Kb.! (Y no me refiero a kilobytes), ese si que es bueno, aunque limitas a su uso en España y latinoamérica, somos muchos y ese dominio corto de seis letras y con la semántica perfecta vale mucho. Eso sí lo valdrá si detrás hay algo un modelo de negocio y de monetización que funcione…

¿Pero el qué?

Es aquí el punto de partida de mis pensamientos en este lunes festivo en Barcelona, que puedo, o podemos meter en nuestras flamantes y vacía tiendas de aplicaciones web, algo que genere ingresos para escapar de los tentáculos de la crisis mundial saliendo airoso y lleno de, esta vez sí, kilobytes.

¿Nos adelantamos a la todopoderosa y hacemos algo?

Eso estaría muy bien, pues quien golpea primero golpea dos veces, y aunque no es fácil, Google es cada día que pasa má granítica y calcárea convirtiéndose en una empresa lenta de reflejos que plasma sus ideas con pasmosa lentitud.

¿Cansina publicidad?

No te engañes, al igual que este blog, el CTR es bajísimo porque salvo pocos que dan sus gracias con esporádicos clics los avezados webmasters se los saltan y hoy por hoy no creo que difiera mucho un webmaster de un usuario de webapps, en el futuro sí, todos pasarán por las webapps pero, ¿Es el futuro un periódo de 10 años?

Simples y meros prescriptores

Es como la publicidad, realmente es publicidad pero donde en lugar de ser tan sólo editores somos prescriptores o referenciadores de las ofertas de otros.

Bueno aquí entran en juego muchos, pero mirad el caso de appsto.re que es de lo que nos toca en este artículo y donde a pesar de no tener prácticamente contenido propio poseen un PageRank de 5 por lo que seguro que tiene muchas visitas. Este gran PR puede ser a que por ejemplo ha sido mencionado en la conocidísima Smashingmagazine .

Un PR5 desde luego que es para estudiarlo.

Vender accesos a aplicaciones de terceros

Qué sentido tiene cuando cada webapp ya tiene su propia página de venta, ¿convertirnos en un motor de preescriptores? Ahora bien, para ello hemos de ser capaces de generar suficiente tráfico de usuarios, no avezados y que nos salten para ir directamente a la web de la webapp o bien negociar unos precios más económicos con cada propietario de la webapp. Me huele que el camino real es por aquí, ahora bien deben existir otros caminos y métodos para hincar el diente ante la que para mi es una nueva oportunidad de futuro para los pequeños programadores de aplicaciones web.

¿Alguien tiene alguna otra idea? ¡Unámonos!

Blogueado por uvedobles.com alias uvedobles.com

May 24th, 2010 a las 9:06 am