Creating looping canvas animation (slot machine with reels)

Question

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]
    });
    stage.addChild(bmp);
  }
}

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.

Answer 1

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);