一个非常酷的flex轮盘验证码

原创于 2013-11-27 14:01:33 发布 · 782 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Flex

本文介绍了一个通过点击对应颜色按钮来验证的游戏机制，利用FlexEdu网站上的ValidatorExample示例进行实现。游戏包含8个按钮，每个按钮代表不同的颜色填充和透明度，通过随机选择按钮并设置其样式，用户需要在按钮旋转后找到与当前旋转按钮颜色相同的按钮进行点击。正确匹配后，按钮消失，完成验证。

只有按照上面显示的图像挨个正确的点击下面旋转的对应的图像才能通过验证！

效果点击：www.flexedu.com/zuoye/limingxin/ValidatorExample.swf

源代码如下：

ValidatorMain.mxml
<?xml version="1.0" encoding="utf-8" ?>
- <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100">
<mx:Metadata>[Event(name="btn1_click")] [Event(name="btn2_click")] [Event(name="btn3_click")] [Event(name="btn4_click")] [Event(name="btn5_click")] [Event(name="btn6_click")] [Event(name="btn7_click")] [Event(name="btn8_click")]</mx:Metadata>
<mx:Button id="btn1" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn1_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#D9D9D9, #FFFFFF]" themeColor="#D9D9D9" verticalCenter="0" left="5" />
<mx:Button id="btn2" x="65" y="15" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn2_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#D22023, #FFA781]" themeColor="#D22023" />
<mx:Button id="btn3" x="15" y="65" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn3_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#00339F, #A4D4FD]" themeColor="#00339F" />
<mx:Button id="btn4" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn4_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#DC25F2, #FF63A9]" themeColor="#B60E44" horizontalCenter="0" bottom="5" />
<mx:Button id="btn5" x="65" y="65" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn5_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#10A804, #BCFDA8]" themeColor="#10A804" />
<mx:Button id="btn6" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn6_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#FF8D00, #FFDBAA]" themeColor="#FF8D00" verticalCenter="0" right="5" />
<mx:Button id="btn7" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn7_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#191919, #AAAAAA]" themeColor="#191919" horizontalCenter="0" top="5" />
<mx:Button id="btn8" x="15" y="15" width="20" height="20" cornerRadius="99" click="dispatchEvent(new Event('btn8_click'));" fillAlphas="[1.0, 1.0]" fillColors="[#BCA200, #FFFF4B]" themeColor="#BCA200" />
</mx:Canvas>

ValidatorExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

<mx:Script>
<![CDATA[
   import mx.controls.Alert;

   private function randRange(min:Number, max:Number):Number
   {
       var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
       return randomNum;
   }

   private function setbtnLightStyle(btnLight:Button):void
   {
    var i:int = randRange(1,8);

    switch(i)
    {
     case 1:
      btnLight.setStyle('fillColors',vm.btn1.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn1.getStyle('fillAlphas'));
      break;
     case 2:
      btnLight.setStyle('fillColors',vm.btn2.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn2.getStyle('fillAlphas'));
      break;
     case 3:
      btnLight.setStyle('fillColors',vm.btn3.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn3.getStyle('fillAlphas'));
      break;
     case 4:
      btnLight.setStyle('fillColors',vm.btn4.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn4.getStyle('fillAlphas'));
      break;
     case 5:
      btnLight.setStyle('fillColors',vm.btn5.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn5.getStyle('fillAlphas'));
      break;
     case 6:
      btnLight.setStyle('fillColors',vm.btn6.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn6.getStyle('fillAlphas'));
      break;
     case 7:
      btnLight.setStyle('fillColors',vm.btn7.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn7.getStyle('fillAlphas'));
      break;
     case 8:
      btnLight.setStyle('fillColors',vm.btn8.getStyle('fillColors'));
      btnLight.setStyle('fillAlphas',vm.btn8.getStyle('fillAlphas'));
      break;
    }
   }


   /**验证*/
   private function Vali(btn:Button):void
   {
    if(btnLight1.visible)
    {
     if(btnLight1.getStyle('fillColors')==btn.getStyle('fillColors'))
     {
      btnLight1.visible=false;
     }
    }
    else if(btnLight2.visible)
    {
     if(btnLight2.getStyle('fillColors')==btn.getStyle('fillColors'))
     {
      btnLight2.visible=false;
     }
     else
     {
      btnLight1.visible=true;

      /**调用方法，重新设置灯的颜色*/
      setbtnLightStyle(btnLight1);
      setbtnLightStyle(btnLight2);
      setbtnLightStyle(btnLight3);
     }
    }
    else if(btnLight3.visible)
    {
     if(btnLight3.getStyle('fillColors')==btn.getStyle('fillColors'))
     {
      btnLight3.visible = false;
      Alert.show("验证成功 !!!");
     }
     else
     {
      btnLight1.visible=true;
      btnLight2.visible=true;

      setbtnLightStyle(btnLight1);
      setbtnLightStyle(btnLight2);
      setbtnLightStyle(btnLight3);
     }
    }
   }
]]>
</mx:Script>

<mx:Rotate id="rotate" duration="6000" repeatCount="0"/>

<ns1:ValidatorMain id="vm" x="49" y="57" creationCompleteEffect="rotate"
rollOver="{rotate.pause();}" rollOut="{rotate.resume();}"
btn1_click="{Vali(vm.btn1)}"
btn2_click="{Vali(vm.btn2)}"
btn3_click="{Vali(vm.btn3)}"
btn4_click="{Vali(vm.btn4)}"
btn5_click="{Vali(vm.btn5)}"
btn6_click="{Vali(vm.btn6)}"
btn7_click="{Vali(vm.btn7)}"
btn8_click="{Vali(vm.btn8)}"/>

<mx:Button id="btnLight1" x="54" y="21" width="20" height="20" cornerRadius="99" enabled="false"
creationComplete="setbtnLightStyle(btnLight1)"/>

<mx:Button id="btnLight2" x="89" y="21" width="20" height="20" cornerRadius="99"
creationComplete="setbtnLightStyle(btnLight2)" enabled="false"/>

<mx:Button id="btnLight3" x="124" y="21" width="20" height="20" cornerRadius="99"
creationComplete="setbtnLightStyle(btnLight3)" enabled="false"/>

</mx:Application>