Download Visit page

This is just a small project about css animation, html5 and javascript. This is not a finalized game. Its more like a playable demo. The main focus was the mobile platform. Make it work smooth an feel good on mobile platforms as well as on desktop.

You can download the full Game with commented Code. You may push it further an make a fully blown out html5 shuffle!!

css animations

CSS3 animations make it possible to animate transitions from one CSSstyle configuration to another. Triggered by the click or touch from the user. Here comes Javascript to change the position accordingly.

Make sure the css object will be animated. Also insert “translateZ(0)” to make sure the animations are hardware accelerated.

-webkit-transform: translateZ(0);
-webkit-transition:all 0.3s;
-moz-transition: all 0.3s;  /* FF4+ */
-ms-transition: all 0.3s;  /* IE10 */
-o-transition: all 0.3s;  /* Opera 10.5+ */
transition: all 0.3s;

Trigger the animation by changing some values in css via javascript.

function move(event) //This function is triggered by click or touch input
{
     //Get the position of the clicked object
     targetX = event.target.offsetLeft;
     targetY = event.target.offsetTop;

     //Get the position of the empty object
     emptyX=document.getElementById("empty").offsetLeft;
     emptyY=document.getElementById("empty").offsetTop;

     //Get the difference of the Positions above
     gotoY = emptyY - targetY
     gotoX = emptyX - targetX

     // update positions of empty && target
     // if the clicked object is not further away then one block and is not zero
     if((gotoX ==0 || gotoY ==0)&&(gotoX == 76 || gotoY == 76  || gotoX == -76 || gotoY == -76))
     {
          //move the empty object to the target position
          document.getElementById("empty").style.left = targetX +"px";
          document.getElementById("empty").style.top = targetY +"px";

          //move the target to the empty position
          event.target.style.left = emptyX +"px";
          event.target.style.top = emptyY +"px";

          //add an eventlistener to check after each move, if the puzzle is solved
          event.target.addEventListener( 'webkitTransitionEnd', moved, false ); //chrome, safari
          event.target.addEventListener( 'transitionend', moved, false );//firefox, ie
     }

     function moved()
     {
          //after the transition ended remove the eventlistener
          event.target.removeEventListener( 'webkitTransitionEnd', moved, false );
          event.target.removeEventListener( 'transitionend', moved, false );

          //and check if the puzzle is solved
          check();
     }
}

The way of animating dom elements with css makes it hardware accelerated on most platforms. Which make the animation look and feel smooth. Even on mobile platforms. Some of the elements shadow properties in css slows it down. This is a common problem with css animations and shadows. Just remove them for a even smoother animation.

mobile optimized

This game is perfect for mobile devices. Its not only css driven as shown above. It has also the ability to play it direct from Springboard(only iOS). With a custom icon and splash screen. To have this features in your html5 app you need the following lines in your html file. And of course all the icon images in place.

<!-- Make it handheldFriendly -->
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Set the path to the different icon with different resolutions -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="img/l/apple-touch-icon.png">

<!-- Most important line -->
<!-- Make it web app capable -> YES -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Change the color of the status bar in webApp mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Set the path to splash screen -->
<link rel="apple-touch-startup-image" href="img/l/splash.png">

conclusion

In just about a 150 lines of fully commented Javascript code. The result was actually great. It worked perfectly on any mobile device i’ve tested it on. Also no problems in any desktop browser.

tools