博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用phaser来制作一个大转盘
阅读量:5221 次
发布时间:2019-06-14

本文共 3575 字,大约阅读时间需要 11 分钟。

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

  

转载于:https://www.cnblogs.com/phaser/p/4840479.html

你可能感兴趣的文章
IB使用
查看>>
Linux硬链接和软链接(符号链接)
查看>>
git stash
查看>>
Apache Common-IO 使用
查看>>
Java-第一课正则表达式
查看>>
深入剖析,什么是eval的直接调用.
查看>>
apidoc
查看>>
3月14日-15日学习总结
查看>>
关于 ++x 和 x++ 比较难的一个例子
查看>>
第三次作业 105032014021
查看>>
记录一些容易忘记的属性 -- UILabel
查看>>
android新手关于左右滑动的问题,布局把<android.support.v4.view.ViewPager/><ImageView/> 放在上面就不行了。...
查看>>
人脸识别FaceNet+TensorFlow
查看>>
STL之map UVa156
查看>>
从Angular.JS菜鸟到专家
查看>>
再谈Vmware NAT的配置和路由流程
查看>>
javaScript数组去重方法汇总
查看>>
评价意见整合
查看>>
MySQL表的四种分区类型
查看>>
C++变量的“总分性”(Mereology)
查看>>