Lim

Members
  • Content Count

    1
  • Joined

  • Last visited

About Lim

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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