# 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;

// creation of the game
game = new Phaser.Game(600, 600, Phaser.AUTO, "");
// launching "PlayGame" state
game.state.start("PlayGame");
}

// PLAYGAME STATE

var playGame = function(game) {};

playGame.prototype = {
// function to be executed once the state preloads

},
// funtion to be executed when the state is created
create:    function() {
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);
arrow.anchor.set(0.5);
arrow.enableBody = true;

dots.enableBody = true;

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;
}

// 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
},
// 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
angle: 360 * rounds + degrees
// once the tween is completed, call winPrize function
}
},
// 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() {

}
}

``````

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.

wheel.7z

Edited by Lim
update