Lim

How to create a spin wheel game?

Recommended Posts

Hi all i'm totally new to phaser

so far my work is like the following:


var game;
// the spinning wheel
var wheel;
// can the wheel spin?
var canSpin;
// number of slices (prizes) placed in the wheel
var slices = 12;
// prize names, starting from 12 o'clock going clockwise
var slicePrizes = ["$20", "$50", "$10", "$500", "$5", "$50", "$20", "$50", "$10", "$500", "$5", "$50"];
// the prize you are about to win
var prize;
// text field where to show the prize
var prizeText;

window.onload = function() {
    // creation of the game
    game = new Phaser.Game(600, 600, Phaser.AUTO, "");
    // adding "PlayGame" state
    game.state.add("PlayGame",playGame);
    // launching "PlayGame" state
    game.state.start("PlayGame");
}

// PLAYGAME STATE

var playGame = function(game) {};

playGame.prototype = {
    // function to be executed once the state preloads
preload:    function() {
        // preloading graphic assets
        game.load.image("wheel", "wheel.png");
        game.load.image("dot", "oie_transparent (1).png");
        game.load.image("arrow", "arrow.png");

    },
    // funtion to be executed when the state is created
create:    function() {
	    game.physics.startSystem(Phaser.Physics.ARCADE);
        game.stage.backgroundColor = "#880044";
        wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel");
        wheel.anchor.set(0.5);
		
		
        arrow = game.add.sprite(game.width / 2.5, 70, 'arrow');
        arrow.scale.setTo(0.4, 0.3);
        game.physics.arcade.enable(arrow);
        arrow.anchor.set(0.5);
		arrow.enableBody = true;


        dots = game.add.group();
        dots.enableBody = true;
        dots.physicsBodyType = Phaser.Physics.ARCADE;


        for (var i = 0; i < slices; i++) {
            var x = Math.cos(i / slices * Math.PI * 2) * 225,
                    y = Math.sin(i / slices * Math.PI * 2) * 225;

            var dot = wheel.addChild(dots.create(x, y, "dot"));
            dot.anchor.set(0.5);
            dot.body.immovable = true;
        }

        // adding the text field
        prizeText = game.add.text(game.world.centerX, 578, "");
        // setting text field registration point in its center
        prizeText.anchor.set(0.5);
        // aligning the text to center
        prizeText.align = "center";
        // the game has just started = we can spin the wheel
        canSpin = true;
        // waiting for your input, then calling "spin" function
        game.input.onDown.add(this.spin, this);
    },
    // function to spin the wheel
    spin() {
        // can we spin the wheel?
        if (canSpin) {
            // resetting text field
            prizeText.text = "";
            // the wheel will spin round from 2 to 4 times. This is just coreography
            var rounds = game.rnd.between(3, 5);
            // then will rotate by a random number from 0 to 360 degrees. This is the actual spin
            var degrees = game.rnd.between(0, 360);
            // before the wheel ends spinning, we already know the prize according to "degrees" rotation and the number of slices
            prize = slices - 1 - Math.floor(degrees / (360 / slices));
            // now the wheel cannot spin because it's already spinning
            canSpin = false;
            // animation tweeen for the spin: duration 12s, will rotate by (360 * rounds + degrees) degrees
            // the quadratic easing will simulate friction
            var spinTween = game.add.tween(wheel).to( {
angle: 360 * rounds + degrees
            }, 12000, Phaser.Easing.Quadratic.Out, true);
            // once the tween is completed, call winPrize function
            spinTween.onComplete.add(this.winPrize, this);
        }
    },
    // function to assign the prize
    winPrize() {
        // now we can spin the wheel again
        canSpin = true;
        // writing the prize you just won
        prizeText.text = slicePrizes[prize];
    },
update:    function() {
        game.physics.arcade.collide(arrow, dots);

    }
}


can anyone provide me some guidance for what to do next and what have i done wrong? The result i would like to achieve is similar to https://www.youtube.com/watch?v=Gm9kftOieYI . So basically the arrow animation and controllable output/result.

the attachment is the full project. 

please help

 

wheel.7z

Edited by Lim
update

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.