var game; // the spinning wheel var wheel; // can the wheel spin? var canSpin; // slices (prizes) placed in the wheel var slices = 8; // prize names, starting from 12 o'clock going clockwise var slicePrizes = ["A KEY!!!", "50 STARS", "500 STARS", "BAD LUCK!!!", "200 STARS", "100 STARS", "150 STARS", "BAD LUCK!!!"]; // the prize you are about to win var prize; // text field where to show the prize var prizeText; window.onload = function() { // creation of a 458x488 game game = new Phaser.Game(458, 488, 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("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]; } }
//set default degree (360*5) var degree = 1800; //number of clicks = 0 var clicks = 0; $(document).ready(function(){ /*WHEEL SPIN FUNCTION*/ $('#spin').click(function(){ //add 1 every click clicks ++; /*multiply the degree by number of clicks generate random number between 1 - 360, then add to the new degree*/ var newDegree = degree*clicks; var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1; totalDegree = newDegree+extraDegree; /*let's make the spin btn to tilt every time the edge of the section hits the indicator*/ $('#wheel .sec').each(function(){ var t = $(this); var noY = 0; var c = 0; var n = 700; var interval = setInterval(function () { c++; if (c === n) { clearInterval(interval); } var aoY = t.offset().top; $("#txt").html(aoY); console.log(aoY); /*23.7 is the minumum offset number that each section can get, in a 30 angle degree. So, if the offset reaches 23.7, then we know that it has a 30 degree angle and therefore, exactly aligned with the spin btn*/ if(aoY < 23.89){ console.log('<<<<<<<<'); $('#spin').addClass('spin'); setTimeout(function () { $('#spin').removeClass('spin'); }, 100); } }, 10); $('#inner-wheel').css({ 'transform' : 'rotate(' + totalDegree + 'deg)' }); noY = t.offset().top; }); }); });//DOCUMENT READY