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

最新推荐文章于 2023-09-19 18:20:57 发布

k_shl_2011

最新推荐文章于 2023-09-19 18:20:57 发布

阅读量1.7k

点赞数

分类专栏： phaser 文章标签： phaser

phaser 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原帖地址：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];
     }
};