Euden Posted November 9, 2014 Share Posted November 9, 2014 So I'm practicing Phaser by creating a slot machine, I've got most of it down but I'm having some issues with getting the reels to move and stop randomly. Here is my current code:<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"/> <title>Slots </title> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript" > window.onload = function () { var game = new Phaser.Game(640,480, Phaser.CANVAS, 'd',{ preload: preload, create: create, update: update }); var seven; var bar; var twobar; var cherry; var cherry2; var tween; var spinning = false; var timer; var tick = 0; var reel1; var reel2; var reel3; var reel4; function preload() { // Pre load all images. //Cherry game.load.image('cherry', 'img/cherry.png'); // Bar game.load.image('bar', 'img/bar.png'); // TwoBars game.load.image('twoBar', 'img/twobar.png'); //seven game.load.image('seven', 'img/seven.png'); // Spin Button game.load.image('spin_button', 'img/spin_button.png'); // Machine_body game.load.image('machine_body', 'img/machine__body.png'); } function create() { var items = ['cherry', 'bar', 'seven', 'twoBar', 'cherry', 'bar', 'seven', 'twoBar']; reel1 = game.add.group(); // first reel. reel2 = game.add.group(); reel3 = game.add.group(); reel4 = game.add.group(); for(var i = 0; i < 5; i++) { sprite = reel1.create(5, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite2 = reel2.create(131, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite3 = reel3.create(258, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite4 = reel4.create(386, i * 98 +3, items[game.rnd.integerInRange(0,5)]); } var body = game.add.sprite(0,0, 'machine_body'); var button = game.add.button(175, 400,'spin_button', actionOnClick, this); game.stage.backgroundColor = '#FFFFFF'; timer = game.time.create(false); timer.loop(3000, updateTicks, this); timer.start(); } function actionOnClick () { spinning = true; } function update() { if(spinning) { reel1.y += 50 reel2.y += 40; reel3.y += 57; reel4.y += 60; if(reel1.y >= 400){ reel1.y = 0; } if(reel2.y >= 400){ reel2.y = 0; } if(reel3.y >= 400){ reel3.y = 0; } if(reel4.y >= 400){ reel4.y = 0; } } var tween = game.add.tween(reel1); var tween2 = game.add.tween(reel2); var tween3 = game.add.tween(reel3); var tween4 = game.add.tween(reel4); tween.to({y: 180}, 60); tween2.to({y: 180}, 70); tween3.to({y: 180}, 80); tween4.to({y: 180}, 90); tween.start(); tween2.start(); tween3.start(); tween4.start(); } function updateTicks() { if(spinning){ spinning = false; } } } </script> </body></html> The idea is to have each reel as a group move down until it hits a threshold and then return to 0, after a timer expires it will tween to a stop with the closest element to the middle. The issue I have with this is that the final tween always seems to move the top element to the position rather than the closest element which is what I assume happens to a real slot machine leaving a gap on the top of the reel (see attached image). Assistance on getting each reel to move randomly and sorting out my button would also be great Thanks! Link to comment Share on other sites More sharing options...
eguneys Posted November 9, 2014 Share Posted November 9, 2014 Don't create your tweens within `update` function, move all the tweens outside and call them within `create` function. Because update get's called 60 times per second, so you will have so many unnecessary tweens that cause bugs. Link to comment Share on other sites More sharing options...
illscode Posted January 13, 2016 Share Posted January 13, 2016 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) Link to comment Share on other sites More sharing options...
Anahit DEV Posted September 8, 2017 Share Posted September 8, 2017 Hey @illscode, Am also a beginner in creating slot machine with Phaser. I found this thread and your above code which is quite good. Am only not managing to see the spinning animation. Can you please help me out with it? Thanks in advance. Link to comment Share on other sites More sharing options...
Recommended Posts