How to create a spin wheel game?

[Lim]

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 June 14, 2016 by Lim
update