Blog

Joe's Food Blog
El juego del encargado del almacén "Sokoban", para ganar sólo tienes que empujar las cajas hasta los lugares marcados. sobre Sokoban

Para mover las cajas utilice las teclas: Left = ← , Up = ↑, Right = → y Down = ↓ .
La tecla "M" para volver al menú principal. Click en el botón Zoom para maximizar y minimizar la pantalla del juego.

Zoom

Sokoban game.
Estaba creando una aplicación y necesitaba paginar resultados, busqué algo similar a google y no encontré mucha información, modifique algunos ejemplos de la web y el resultado + ó - me dejo satisfecho o.0!

ver DEMO   Código



function paginar(actual, total, por_pagina, enlace, maxpags) {
  var  texto = '<div class="pagination" id="navePage"><ul>'; 
  var total_paginas = Math.ceil(total/por_pagina);
  var anterior = actual - 1;
  var posterior = actual + 1;
  var med = maxpags/2;
  var minimo = 0; 
  if( (actual + med) >= total_paginas) {
   minimo = Math.max(total_paginas - maxpags + 1,1);
  }
  else {
   minimo = ( (actual-med)>0 )? actual - med : 1; 
  }   
  var maximo = 0;  
  if (actual > 1) 
   texto += '<li><a href=?' + anterior + enlace + ' title="Back"><<</a></li>';
  maximo = Math.min(minimo + maxpags - 1, total_paginas);
  for (var i=minimo; i <= maximo; i++) {
   if(i == actual) {
    texto += '<li class="active"><a href="?="><b>' + actual + '</b></a></li>';
   }
   else {
    texto += '<li><a href=?'+ enlace + i + '>' + i +'</a></li>';
   }
  }
  if(actual < total_paginas ) 
   texto += '<li><a href=?' + enlace + posterior + ' title="Next">>></a></li>';
  texto += '</ul></div>';
  return texto;
 }

Código completo

El resultado:

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Imagen 5


CSS del slide.

  .rotating-item{
  width:640px; height:480px;
  display:none; margin:auto; 
  border:2px solid #999; 
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);  
 }
 .rotating-item img{
  width:640px; height:480px; border-radius: 8px;
 }
 .rotating-item p{ 
  position:relative;
  background: rgba(0,0,0,0.6);
  width:400px;
  color:#fff; font-size:18px; font-style:italic;
  margin-top:-45px;
  padding:5px;
  text-align:center;
 }

Divs con las imágenes de nuestro slide.

<div class="rotating-item" style="display:block;">
   <img src=" "/>
   <p>Imagen 1</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 2</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 3</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 4</p>
</div>
<div class="rotating-item">
   <img src=" " />
   <p>Imagen 5</p>
</div>   

Script del bucle infinito para nuestro Slide.

 var itemInterval = 5500;
 var infiniteLoop;
 var fadeTime = 1000;
 var currentItem = 0;
 var numberOfItem = 5;

 setTimeout(function(){
      myFunc();
      infiniteLoop = setInterval(myFunc, itemInterval);
 }, 1000);

 // inicia bucle
 function myFunc() {
    $(".rotating-item").eq(currentItem).fadeOut(fadeTime,
     function() {
       // set counter
       if (currentItem == numberOfItem -1) currentItem = 0;
       else { currentItem++; }       
       $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
    });     
 }

En realidad es una versión del Tetris en 2.5D, para mover las piezas se utilizan las teclas: Left = ← , Up = ↑, Right = → y Down = ↓ .
Enter = pausa y la tecla m para volver al menú principal.

Click en el botón Zoom para maximizar y minimizar la pantalla del juego.

El fondo musical es el tema: Breathe In Breathe Out de Singleton.



Zoom

Tetris 3d game.
Para mi versión del juego de Tetris, intenté crear un contenedor que se asemeje a un smartphone, el resultado más o menos me dejo satisfecho (o.0!), así que en este tutorial enseñaré como hacerlo.

Resultado final: 



Tetris Processing




Descargar el ejemplo (sólo espere 5 seg y click en saltar publicidad)

Paso 1: Crearemos el borde de nuestro smartphone.

Utilizaremos esta herramienta Ultimate CSS Gradient Generator que genera el codigo CSS. Para utilizar la herramienta seleccionamos un color y graduamos como lo haríamos con cualquier editor de imágenes.  














El codigo que nos genera lo agregamos a la clase borde.

.borde{
 margin-left: auto;
 margin-right: auto; 
 border-radius:40px;
 box-shadow:0px 10px 30px #A2A2A2;
 border: 1px solid #666;
/*------- degradado diagonal -------*/
background: #959595; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #959595 0%, #ededed 24%, #2d2d2d 54%, #b2b2b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(24%,#ededed), color-stop(54%,#2d2d2d), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* IE10+ */
background: linear-gradient(135deg,  #959595 0%,#ededed 24%,#2d2d2d 54%,#b2b2b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#b2b2b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Paso 2: Sigue el contenedor de nuestra pantalla.

.contenedor{
margin:5px;
border: 1px solid #444;
border-radius:28px;
margin-top:10px;
border-bottom-left-radius: 38px;
border-bottom-right-radius: 38px;
/*--- degradado diagonal ---- */
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(135deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
     
Paso 3: Ahora nuestra pantalla touch screen. Esto es más sencillo.  

.pantalla{
  margin: 0px 15px 30px 15px;
  border: 0px solid #999;
  background: #000000;
}

Codigo de nuestro smartphone, podemos agregar al div pantalla, una imagen o como en el juego de tetris un objeto canvas.

<div class="borde"> 
 <div class="contenedor">
  <div class="caption"><p>Tetris Processing</p></div>
  <div class="pantalla" style="height: 496px; width: 310px;">
<!--   <img src="imagen.png" />  -->
  </div>
 </div>
</div> 
 
Descargar el ejemplo (sólo espere 5 seg y click en saltar publicidad)
Versión de tetris en 2d. Como no tenía un celular, me hice uno, intenté simular un smartphone.