Pop the lock（啪啪解锁）

信不信由你，Pop the lock（啪啪解锁）一下子爆发了。每一关的游戏内容都是相同的，只是考验玩家，谁能玩的时间更长，玩的次数更多。这个类游戏在上个月的热度游戏中流行起来。

不管怎么样，这个游戏很有趣，同类型的游戏中，我曾经分析过Perfect Square(完美的方块)和Circle Path(小圆的路)，所以开篇我们先分析，指针的运动方式，以及原点锁的随机位置实现方式。

下面是我们要实现的效果(点击图片查看）：

点击或触摸屏幕让指针动起来，然后再次点击或触摸屏幕，指针会反向运动起来，同时原点锁会出现在一个随机的位置上。
如前面所说的，本节只是讲解简单的运动方式，关于如何判断解锁成功，将在下一章进行介绍。

下面是源代码，每一行都有完整的注释：

// 游戏本身
var game;
// 包含一堆颜色的数组，游戏的背景颜色会随机的从数组中提取
var bgColors = [0x62bd18, 0xff5300, 0xd21034, 0xff475c, 0x8f16b2, 0x588c7e, 0x8c4646];
// 指针旋转的速度
var rotationSpeed = 3;

window.onload = function() {
     // 创建游戏对象
    game = new Phaser.Game(640, 960, Phaser.AUTO, "");
     // 创建唯一的游戏状态
     game.state.add("PlayGame", playGame);
     // 跳转至“playGame”状态
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          // 预先加载要使用的图片
          // 小球
          game.load.image("ball", "ball.png");
          // 旋转的指针
          game.load.image("bar", "bar.png");
          // 圆环
          game.load.image("ring", "ring.png"); 
     },  
     create: function(){   
          // 游戏舞台水平居中 
          game.scale.pageAlignHorizontally = true;
          // 游戏舞台垂直居中
        game.scale.pageAlignVertically = true;
          // 设置游戏缩放模式为SHOW_ALL，确保游戏可以完全显示出来
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          // 随机获取背景颜色
          var tintColor = game.rnd.pick(bgColors);
          // 将网页页面背景颜色
          document.body.style.background = "#"+tintColor.toString(16);
          // 设置游戏的背景颜色
          game.stage.backgroundColor = tintColor;
          // 将圆环位置调整到canvas的中心
          var ring = game.add.sprite(game.width / 2, game.height / 2, "ring");
          // 设置圆环的控制点anchor为自己的中心位置
          ring.anchor.set(0.5);
          // 设置圆环的透明度为0.5
          ring.alpha = 0.5;
          // 添加小球，稍后会再次调整其坐标
          this.ball = game.add.sprite(0, 0, "ball");
          // 设置小球的控制点anchor为自己的中心
          this.ball.anchor.set(0.5);
          // 调用placeBall()函数，将小球随机的放置到圆环上。
          this.placeBall();         
          // 将指针放置在舞台的中心位置
          this.bar = game.add.sprite(game.width / 2, game.height / 2, "bar");
          // 设置指针的控制点anchor
          this.bar.anchor.set(0.5, 1);
          // 设置指针的角度
          this.bar.rotationDirection = 0;
          // 等待游戏侦测到输入信息（点击或触摸屏幕），然后调用startMoving函数
          game.input.onDown.add(this.startMoving, this);
     },
     placeBall: function(){
          // 选择-180到180之间的一个随机角度，然后转换成弧度值
          this.ball.ballAngle = Phaser.Math.degToRad(game.rnd.angle());  
          // 根据三角函数，计算出小球的位置，并以此调整小球的坐标
          this.ball.x = game.width / 2 + 175 * Math.cos(this.ball.ballAngle);
          this.ball.y = game.height / 2 + 175 * Math.sin(this.ball.ballAngle);  
     },
     startMoving: function(){
          // 删除原有的侦听器
          game.input.onDown.remove(this.startMoving, this);
          // 添加新的侦听器，调用changeDirection函数
          game.input.onDown.add(this.changeDirection, this);
          // 设置旋转的方向
          this.bar.rotationDirection = 1;     
     },
     changeDirection: function(){
          // 旋转反向取反
          this.bar.rotationDirection *= -1;
          // 重新调整小球的坐标到另一个随机位置
          this.placeBall();
     },
     update: function(){
          // 根据指针的速度移动指针
          this.bar.angle += rotationSpeed * this.bar.rotationDirection; 
     }
}

下一节，会添加游戏过关的判断，完成整个游戏。
别忘了，点击下载源文件。

• 原文名称:HTML5 prototype of “Pop the Lock” iOS blockbuster using Phaser
• 原文链接：点击阅读
• 原文作者：Emanuele feronato