Search the Community

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