Friday, April 30th, 2010

Want Web games on all things iTouch? Scripty 2.

Category: Prototype, Scriptaculous

Thomas Fuchs has a detailed post on building a Flash-y game with scripty2 where he walks through a memory game.

Everything is shown, from game logic all the way to the smooth animations and easings:

javascript

  1. // animate cards to go to new positions
  2. cards.inGroupsOf(4).each(function(group, x) {
  3.   group.each( function(card, y){
  4.     flip(card, 'back.png');
  5.     card.morph('opacity:1;left:'+(x*SIZE)+'px;top:'+(y*SIZE)+'px', {
  6.       duration: duration || 0.5, transition: 'easeInOutQuint'
  7.     });
  8.   });
  9. });
  10.  
  11. // flip card animation
  12. function flip(element, image){
  13.   var img = element.down('img');
  14.   img.morph('width:0px;left:70px;', {
  15.     duration: .2, transition: 'easeInCubic',
  16.     after: function(){
  17.       if(image) img.src = image;
  18.       img.morph('width:140px;left:0px', {
  19.         duration: .2, transition: 'easeOutCubic'
  20.       });
  21.     }
  22.   });
  23. }

Very detailed indeed…. awesome.

Posted by Dion Almaer at 10:47 am
Comment here

++++-
4.8 rating from 5 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.