一款新的Flash扑克牌魔术,附送经过完善的AS3 扑克牌类
这里献给大家一款新的扑克牌魔术,附送经过改善的PlayingCard类,该类支持扑克牌的缓动和翻牌动画效果,且深度排序算法可以完美运作而不受扑克牌所处位置的影响。点击此链接可浏览效果:
下载
下载本例的源码: twopiles.zip
游戏规则
进入游戏,你将看到10张朝下放置的扑克牌。随意挑出一张记住牌号和花色后放回,接着,电脑会挑选出另一张牌,并在牌堆里朝上放置。
接下来,按照屏幕上提示的洗牌规则,设法将朝上放置的那张牌移至牌堆顶端,洗牌规则如下:每次从两堆牌中挑出一堆,使其在下一次洗牌时放在另一堆的上面。通常只要你认真玩,几次洗牌就能达到目的。
最后,轮到你惊讶了,因为这堆牌的末尾将是你开始挑出的那张……每次都肯定是!
注意:该魔术中使用的扑克牌牌图片素材由Jesse Fuchs 和Tom Hart 在David Bellot所制作的矢量图素材上改进得来,非经他们的允许不得用于商业用途。
解读魔术中用到的自定义类
该魔术的文档类导入了以下3个自定义类文件,我们将在下文中依次予以解读:
- import flashandmath.as3.cards.PlayingCard;
- import flashandmath.as3.cards.CardLoader;
- import flashandmath.as3.cards.CardDeck;
CardLoader类
CardLoader类用以创建实例(cardLdr)的构造器需要两个参数:第一个参数是数组类型,为扑克牌正面图片的地址序列,第二个参数则是背面图片的地址字符串。该类还有两个自定义事件,一个用来处理加载错,另一个用以监听加载是否完成。(要注意该类导入了一个名为ImageLoader的类,该类在我们以前的例子中已经用过多次,可以在下载包里找到并浏览)
举例而言,在本文的魔术中,我们使用了以下几行代码用以创建扑克牌。
- cardLdr = new CardLoader(arrURLsToLoad,"cards-150/blueback1-150.png");
- cardLdr.addEventListener(CardLoader.CARDS_LOADED, loadComplete);
- cardLdr.addEventListener(CardLoader.LOAD_ERROR, loadError);
代码中的loadComplete 和loadError都是自定义事件的处理函数。此外,我们还使用了CardLoader类的一个额外的方法getCardArray,该方法的返回值是一组CardLoader类所创建的PlayingCard实例的数组。
CardDeck类
CardDeck类的构造器只需要一个Vector类型的参数,该参数存储一组PlayingCard实例。该类中的moveCard 方法可以实现从面板上添加和移除扑克牌的功能,不过,CardDeck类的最重要的功能是当面板上的牌面变动时(通过重设各类显示属性)自动调整元素的层级。
PlayingCard类
PlayingCard类的构造器需要两个BitmapData类型的参数,分别对应牌面和牌背的图像。每一张扑克牌都有大小和花色两个属性,可以以此来标识特定的牌,但这两个属性必须在构造器之外独立赋值。
该类含有两个方法,其作用都是现实扑克牌的移动效果。例如,假设我们已创建了一个PlayingCard类的实例,名为pc,那么下面这行代码可以在s秒类将该牌从坐标(sx, sy, sz) 移动到 (fx, fy, fz) 。
- pc.tweenMotion(sx, sy, sz, fx, fy, fz, s);
此外,我们还可以为以下自定义事件设置响应函数:PlayingCard.MOTION_DONE (用以响应扑克牌移动动画的完成)和PlayingCard.MOTION(用以在动画期间更新数据)。下面这行代码可将扑克牌从初始位置设置为以y轴基准位置方向旋转d度。
- pc.rotateView(d, "vertical");
下一行代码则将扑克牌从初始位置沿y轴方向旋转a度的增量。
- pc.addRotation(a, "vertical");
(译者注:注意是沿y轴旋转的,通俗点说就是说可以实现翻牌,第一个例子中,设置d=0,就是牌面完全朝上)
注意这两个方法仅能改变牌的rotation值,而不能生成旋转动画。如果一定要做出动画效果,使用一个Timer实例持续调用addRotation 方法就行了。使用以上方法都将依照旋转角度自动对每张牌进行深度排序。
最后来说说在PlayingCard类中得到很大改善的深度排序算法,该算法首先创建两个向量,一个指向观察者,另一个垂直于当前牌的正面,然后计算两者间的余弦值(译者注:余弦值为正则判断牌面朝上,否则反之)。在这个过程中通过root调用PerspectiveProjection类下的相应方法得到向量值和观察者的位置。因此,你创建的所有PlayingCard类的实例都必须在使用这些方法之前添加到显示列表中。
这里有两篇关于深度排序算法的教程
3D Display Cube with a Versatile Custom AS3 Class in Flash CS4
Z-Sorting of a 3D Card and the Projection Center in Flash CS4
你还可以点击查看以下教程了解我原创的扑克牌类。
Playing Cards Trick in AS3 Flash
Custom Classes for Playing Cards in ActionScript 3