I am doing something similar and pushing 14 items into the reel group....
Still new to phaser.js so bare with me please.
I'm having trouble with the movement... Im getting the desired effect with the code below but am wondering if it's a mistake or is inefficient to be doing it this way. I'm checking a boolean in the update() function.
create: function() {
this.gameScreen;
this.handle;
this.bounds;
this.spacebar;
this.reel1;
this.reel2;
this.reel3;
this.spinning = false;
var items = ['cherry', 'plum', 'bell', 'clover', 'lemon', 'coin', 'bar', 'apple', 'heart', 'grapes', 'diamond', 'orange', 'shoe', 'seven', 'melon'];
// create the reels
this.reel1 = this.add.group(); // first reel.
this.reel2 = this.add.group();
this.reel3 = this.add.group();
// push items into the reels
for(var i = 0; i < 14; i++){
this.reel1.create(133, i * 147 +3, items[game.rnd.integerInRange(0,14)]);
this.reel2.create(328, i * 147 +3, items[game.rnd.integerInRange(0,14)]);
this.reel3.create(522, i * 147 +3, items[game.rnd.integerInRange(0,14)]);
}
// align the reels vertically to their spots
this.reel1.y = 267;
this.reel2.y = 267;
this.reel3.y = 267;
this.gameScreen = this.add.sprite(0, 0, 'game-screen');
this.bounds = new Phaser.Rectangle(815, 0, 149, 368);
this.handle = this.add.sprite(815, 0, 'handle');
this.handle.inputEnabled = true;
this.handle.anchor.set(0);
this.handle.input.enableDrag();
this.handle.events.onDragStart.add(this.onDragStart, this);
this.handle.events.onDragStop.add(this.onDragStop, this);
this.handle.input.boundsRect = this.bounds;
this.spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
this.spacebar.onDown.add(this.spacebarHandle, this);
this.spacebar.onUp.add(this.spacebarHandleUp, this);
},
spacebarHandle: function(){
this.add.tween(this.handle).to( { y: 150 }, 100, Phaser.Easing.Linear .Out, true);
},
spacebarHandleUp: function(){
this.add.tween(this.handle).to( { y: 0 }, 500, Phaser.Easing.Bounce.Out, true);
this.spinReels();
},
onDragStart: function(){
console.log("lever pulling down");
},
onDragStop: function(){
this.spinReels();
this.add.tween(this.handle).to( { y: 0 }, 500, Phaser.Easing.Bounce.Out, true);
},
spinReels: function(){
this.time.events.add(Phaser.Timer.SECOND * 1.5, this.stopReels, this);
this.spinning = true;
},
stopReels: function(){
console.log("timer stopped");
this.spinning = false;
this.reel1.y = 267;
this.reel2.y = 267;
this.reel3.y = 267;
},
update: function() {
if(this.spinning){
this.reel1.y -= 25;
this.reel2.y -= 30;
this.reel3.y -= 35;
if(this.reel1.y <= -1680){
this.reel1.y = 267;
}
if(this.reel2.y <= -1680){
this.reel2.y = 267;
}
if(this.reel3.y <= -1680){
this.reel3.y = 267;
}
}
}
can be viewed at this url: test slot machine (will have to advance to game in the project template i'm using)
