Euden

Creating a slot game

Recommended Posts

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!

 

post-11471-0-71684000-1415542048.png

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.