I have a small assignment to create something like slot machine with spinning pictures. I have to use HTML5 Canvas. I would like to hear some opinions how this can be made simply and performantly.

There are symbols that would be spinning vertically while only 2 would be fully visible, next 2 are partially hidden and remaining 2 are not visible at all.

I have chosen CreateJS suite, but I have no experience with that, so I am just trying to figure it out. I made this for the start...

var reels = [160, 405, 648, 892, 1137]; // X offset of reels
var reelLines = [0, 317, 634]; // Y offset of symbols in the reel

var stage = new createjs.Stage('game');

for (x = 0; x < reels.length; x++) {
  for (y = 0, y < reelLines.length; y++) {
    bmp = new createjs.Bitmap('symbol').set({
      x: reels[x],
      y: reelLines[y]

This displays 3 symbols in each reel and it looks good. Now I need to add some animation to it. I am thinking about it like having stack of symbol bitmaps at the top position where it's not visible yet. I tried to use Tween class like this.

createjs.Tween.get(bmp, {loop: true}).to({
  y: 808
}, 500);

It's basically correct, symbol rolls in and out and then it pops at top again. However this works for single symbol only. If I position three symbols as stated above and run same tween on them, each of them will go in different speed, because to call second argument is duration, not the speed.

I would really appreciate some ideas on this approach and if it's even correct one.


The problem is that you are using a fixed duration for each reel even though each reel has a different y offset. Instead, you should calculate the difference between the current y offset of each reel and the y position 808. Using this difference, you can determine how long each reel should tween if each reel went a fixed speed.

var diff = 808 - bmp.y;
var duration = diff / speed; // some fixed speed

createjs.Tween.get(bmp, {loop: true}).to({
  y: 808
}), duration);
  • \$\begingroup\$ I have it already finished. You are basically right, although it was much more complex in the end. \$\endgroup\$
    – FredyC
    Nov 18 '14 at 22:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.