Phaser教程翻译-制作一个幸运大转轮

来源：互联网发布：全国网络诈骗报警平台编辑：程序博客网时间：2024/04/30 00:17

原帖地址：Create a wheel of fortune for your HTML5 games with Phaser in only a few lines

文件列表：

index.html的内容：只是引入了js文件，设置了一下背景颜色。其他什么都没有

<!DOCTYPE html><html>    <head>    <style type="text/css">        body{            background: #000000;            padding:0px;            margin:0px;        }    </style>    <script src="phaser.min.js"></script>     <script src = "game.js"></script>    </head>    <body>    </body></html>

用到的两张图片：

最终效果图：

正文：
你想在游戏中给你的玩家一个随机奖品，幸运大转轮正是你需要的。

我正在玩的游戏中有一个游戏叫 Down The Mountain，里面有一个幸运大转轮，每六个小时可以转一次，就可以获得奖品。

这就是我做的，用了一样的图片，希望Umbrella Games的人不要介意。

点击大转轮的任何位置开始旋转，然后就可以看到得到了什么奖励。
下面是加了注释的源码，有几行用了tweens和easing。

// game对象var game;// 大转轮var wheel; // 是否可以旋转转轮var canSpin;// 转轮分的份数，一共八份var slices = 8;// 一个数组，里面保存了每一份对应的奖励var slicePrizes = ["A KEY!!!", "50 STARS", "500 STARS", "BAD LUCK!!!", "200 STARS", "100 STARS", "150 STARS", "BAD LUCK!!!"];// 最后得到的奖励var prize;// 显示奖励的文本var prizeText;window.onload = function() {         // 458x488大小的游戏对象    game = new Phaser.Game(458, 488, Phaser.AUTO, "");     // 添加"PlayGame"状态      game.state.add("PlayGame",playGame);     // 进入"PlayGame" 状态     game.state.start("PlayGame");}// 游戏场景var playGame = function(game){};playGame.prototype = {     // 预加载函数，只执行一次     preload: function(){          // 预加载两张图片          game.load.image("wheel", "wheel.png");          game.load.image("pin", "pin.png");          },     // 创建这个场景的函数    create: function(){          // 给游戏设定一个背景颜色        game.stage.backgroundColor = "#880044";          // 把转轮添加到中间位置        wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel");          // 设置转轮的锚点          wheel.anchor.set(0.5);          // 把指针添加到中间位置          var pin = game.add.sprite(game.width / 2, game.width / 2, "pin");          // 把锚点设置在中间位置          pin.anchor.set(0.5);          // 添加一个文本，来显示奖励结果          prizeText = game.add.text(game.world.centerX, 480, "");          // 把锚点设置在中间位置          prizeText.anchor.set(0.5);          // 设置文本居中对齐          prizeText.align = "center";          // 在游戏刚开始时，我们可以旋转转轮          canSpin = true;          // 添加鼠标点击事件，调用spin函数          game.input.onDown.add(this.spin, this);           },     //调用spin函数开始旋转     spin:function(){          //先判断当前状态是否可以旋转          if(canSpin){                 // 重置显示奖励结果的文本               prizeText.text = "";               // 随机得到一个旋转的整圈数               var rounds = game.rnd.between(2, 4);               // 随机得到一个旋转的角度               var degrees = game.rnd.between(0, 360);               // 在旋转结束之前，我们就可以算出获得的是哪个奖励               prize = slices - 1 - Math.floor(degrees / (360 / slices));               // 开始旋转，把canSpin设置为false，旋转过程中不能再转了               canSpin = false;               // 开始一个缓动动画，转到360 * rounds + degrees这个角度               // 用quadratic easing来模拟摩擦力，转动慢慢变慢               var spinTween = game.add.tween(wheel).to({                    angle: 360 * rounds + degrees               }, 3000, Phaser.Easing.Quadratic.Out, true);               // 缓动动画结束后，调用winPrize函数               spinTween.onComplete.add(this.winPrize, this);          }     },     // 显示奖励结果的函数     winPrize:function(){          // 现在可以再次旋转转轮          canSpin = true;          // 用文本来显示奖励结果          prizeText.text = slicePrizes[prize];     }};

0 0