利用phaser來製作一個大轉盤

標籤：

// the game itselfvar game;// the spinning wheelvar wheel; // can the wheel spin?var canSpin;// slices (prizes) placed in the wheelvar slices = 8;// prize names, starting from 12 o‘clock going clockwisevar slicePrizes = ["A KEY!!!", "50 STARS", "500 STARS", "BAD LUCK!!!", "200 STARS", "100 STARS", "150 STARS", "BAD LUCK!!!"];// the prize you are about to winvar prize;// text field where to show the prizevar prizeText;window.onload = function() {     // creation of a 458x488 gamegame = new Phaser.Game(458, 488, Phaser.AUTO, "");     // adding "PlayGame" state     game.state.add("PlayGame",playGame);     // launching "PlayGame" state     game.state.start("PlayGame");}// PLAYGAME STATEvar 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("pin", "pin.png");          },     // funtion to be executed when the state is created  create: function(){          // giving some color to background  game.stage.backgroundColor = "#880044";          // adding the wheel in the middle of the canvas  wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel");          // setting wheel registration point in its center          wheel.anchor.set(0.5);          // adding the pin in the middle of the canvas          var pin = game.add.sprite(game.width / 2, game.width / 2, "pin");          // setting pin registration point in its center          pin.anchor.set(0.5);          // adding the text field          prizeText = game.add.text(game.world.centerX, 480, "");          // 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(2, 4);               // 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 3s, will rotate by (360 * rounds + degrees) degrees               // the quadratic easing will simulate friction               var spinTween = game.add.tween(wheel).to({                    angle: 360 * rounds + degrees               }, 3000, 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];     }}

　　

利用phaser來製作一個大轉盤