TwinSpin游戏中的运动方式

TwinSpin是一个很有意思的Flash游戏，我甚至都找不到原始的Flash版本了（看来Flash真的没落了）。如果你还能找到这个Flash游戏，记得把链接发给我。
现在我只找到了iOS版的TwinSpin。

游戏中有两个旋转的小球。每个小球都以另一个小球为圆心旋转，一个顺时针旋转，另一个逆时针旋转。点击或触碰屏幕，旋转的小球停止，另一个小球开始旋转。

点击图片查看游戏效果：

点击或触碰屏幕，切换旋转的小球。

通过一个简单的Sprite对象，然后把anchor坐标设置为固定的小球的坐标，可以很轻松的实现上面的效果。
但是注意细节，小球只是沿着原型的轨迹旋转，但是本身是不旋转的。

因此，这里创建了3个sprite：其中2个分别代表小球，另一个代表链接小球的连杆儿。然后使用三角函数计算出小球运动的轨迹，使其旋转。大致的代码如下：

var game;

var ballDistance = 160;
var rotationSpeed = 4;

window.onload = function() {    
    game = new Phaser.Game(640, 960, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};

playGame.prototype = {
     preload: function(){
          game.load.image("firstball", "firstball.png");
          game.load.image("secondball", "secondball.png");
          game.load.image("arm", "arm.png");
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
     },
     create: function(){
          this.arm = game.add.sprite(game.width / 2, game.height / 2, "arm");
          this.arm.anchor.set(0, 0.5);
          this.balls = [
               game.add.sprite(game.width / 2, game.height / 2, "firstball"),
               game.add.sprite(game.width / 2, game.height / 2, "secondball")                   
          ]
          this.balls[0].anchor.set(0.5);
          this.balls[1].anchor.set(0.5);
          this.rotationAngle = 0;
          this.rotatingBall = 1;
          game.input.onDown.add(this.changeBall, this);
     },
     update: function(){
          this.rotationAngle = (this.rotationAngle + rotationSpeed * (this.rotatingBall * 2 - 1)) % 360;
          this.arm.angle = this.rotationAngle + 90;
          this.balls[this.rotatingBall].x = this.balls[1 - this.rotatingBall].x - ballDistance * Math.sin(Phaser.Math.degToRad(this.rotationAngle));
          this.balls[this.rotatingBall].y = this.balls[1 - this.rotatingBall].y + ballDistance * Math.cos(Phaser.Math.degToRad(this.rotationAngle));                    
     },
     changeBall:function(){
          this.arm.position = this.balls[this.rotatingBall].position
          this.rotatingBall = 1 - this.rotatingBall;
          this.rotationAngle = this.balls[1 - this.rotatingBall].position.angle(this.balls[this.rotatingBall].position, true) - 90;
     }
}

代码很简单，应该不需要什么注释。不过，有问题的时候你可以随时留言。
点击下载源文件

• 原文名称：HTML5 prototype: player movement like in TwinSpin game with Phaser
• 原文链接： 点击阅读原文
• 原文作者：Emanuele feronato