de webmaster a webmaster

Lo que tenemos clasificado como ‘videojuegos

Impresionante juego bajo HTML5

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

Un juego sencillo pero molón, lástima que sea viernes y no esté el jefe en la ofi para enseñárselo…

Webmasters del mundo, alejaos del código, y del Dreamweaver los más nenas, para dedicar lo que queda de tarde, de día y de semana laboral para jugar a este juego mezcla de pong y space invaders desarrollado enteramente en HTML5 con un sonido y una gráfica tan sencilla como majestuosa, abstenerse IEs 7 y resto de seres inferiores.

http://sketch-out.appspot.com/

Blogueado por uvedobles.com alias uvedobles.com

January 21st, 2011 a las 5:50 pm

¿Seguro que Mario era fontanero?

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

¡Qué bueno! Aún quedando lejos de pretender otorgar más bombo innecesario a la noticia de la semana, posteo este gracioso gráfico donde el superhéroe con menos pinta de superhéroe de la historia se ve en semejante situación a la de los 33 mineros que han sido rescatados gracias al “ingenio de ingenieros”.

Sin quitar méritos, y ni un gramo de empatía hacia ellos hay que ser consciente de que en los tiempos que corren y con la tecnología que existe, estos mineros han estado afortunadamente alimentados, entretenidos, organizados y multimediados a partir del tercer día de su aislamiento, a partir de hay todo ha sido una muy incómoda y larga espera de dos meses, con incontables incomodidades, racionamientos, lejos de la familia pero sin perder el contacto con la humanidad y el respaldo de todos en forma de palabras, voces y mensajes, unos lazos de valor incalculable que otorgan esperanzas aún estando a 700 metros bajo tierra.

Considero que este rescate exitosa ha sido tratado con un exceso de morbo y bajo la fórmula de noticia fácil y robaminutos. Es ahora cuando florecen por doquier historias de minas y mineros, cosa que hoy me ha escandalizado tras conocer que en China, país con muchos chinos, mueren más de 2000 mineros al año por derrumbamientos y explosiones, en fin, mi aporte, mi objetivo con este post que se aleja de lo habitual de este blog es que este gran éxito mediático sirva para que se tomen medidas y podamos constatar una mayor seguridad y rigor en las minas de todo el planeta.

Blogueado por uvedobles.com alias uvedobles.com

October 16th, 2010 a las 3:56 pm

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

Pixels forever

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

Menuda oda audiovisual al pixel se ha currado nuestro vecino francés Patrick Jean, la materia, la antimateria y el píxel!

Patrick ha encumbrando a los clásicos pixelizados de los años 80 como Ocean, Ultimate, Psygnosis, Commodore, Space Invaders, Pacman, Frogger, Donkey, Tetris, Arkanoid, Bomb Jack, el siguiente vídeo no tiene desperdicio alguno y más si  pasas de los 30.

Sube el volumen, ponlo a pantalla completa, desconecta de tu teclado y disfruta como antaño, te verás cargando un juego como un ZX Spectrum para acabar… no, no! no expoilearé el vídeo.

Si alguien reconoce en el vídeo alguna referencia más a algún juego clásico o a alguno de los fabricantes de la época que no lo dude y que deje un comentario.

Blogueado por uvedobles.com alias uvedobles.com

April 14th, 2010 a las 9:49 am