×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
软件安装教程 远程服务 超值!手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 7069|回复: 3

[教程] 魔方游戏制作心得及代码@张志晨as3系列教程之53

[复制链接]
发表于 2012-8-21 15:05:53 | 显示全部楼层 |阅读模式
本帖最后由 dqxxx 于 2013-2-27 10:17 编辑

魔方游戏制作心得及代码@张志晨as3系列教程之53

   第一节 认识魔方
    http://www.mf100.org/

   第二节 我的设想
   我的设想是:在动画中,旋转魔方的一个层时,根本不移动mc元件,只是改变它的颜色!这样,看上去魔方被旋转了!这样,代码只管色块的颜色变化,而不用研究色块的位置变化了。对,只改变块的,而不是
   这是一种欺,也可以叫做仿真。欺骗的是人的眼睛,你还能说“我相信我的眼睛了吗?”

   第三节 绘制元件

  一、绘制魔方形状
  1.制作一个色块。
  绘制一个边长50像素的正方形,无边框,蓝色(任意颜色均可)填充。再F8转换成mc,在属性中为其添加黑色投影滤镜,除“距离”改为2像素以外,其它均采用默认值。

  2.制作一个面。
  复制9个色块,排列成三三方阵。相邻两个色块之间距离2像素。之后Ctrl+G把它们做成组。

  3.做三个可见的面。
  Ctrl+D复制组,再打开“变形”面板,高度改为64%,选中“倾斜”项,水平倾斜50度。

  再Ctrl+D复制组,再打开“变形”面板,宽度改为64%,选中“倾斜”项,垂直倾斜-40度。

  最重移动三个面,组成正方体。注:采用的是平行透视法。
  4.已经有魔方的立体感了。应该是凸出来的感觉。

  5.做另外三个面。
  当然是是复制已给做好的三个面,然后重新组合。仍旧是平行透视法。应该是凹进去的感觉。

  6.强调立体感。
  为强化立体效果,给凹面部分加三条辅助线。再把背景做成三维墙角效果。如图:



  【隐形按钮,为了清楚,一个指示层旋转方向并响应点击事件的按键,稍候再绘制】

附图:
小正方形的命名:数字前加字母“k”":

上面黄色:


右面蓝色:


左面绿色:


前面红色:


背面橙色:


底面白色:


立体效果:


相对位置:

【红色面下方的“底面”应改为“前面”】

下图展示的是转动时,小正方形的变化规律:



规律:
0到2,2到4,4到6,6到0【0-2-4-6-0】
1到3 ,3到5,5 到7,7到1【1-3-5-7-1】





规律:
0到3,3到6,6到9,9到0【0-3-6-9-0】
1到4,4到7,7到10,10到1【1-4-7-10-1】
2到5,5到8,8到11,11到2【2-5-8-11-2】

隐形按钮旋转的位置:



  三、全部代码
  1. import flash.geom.ColorTransform;
  2. import flash.events.MouseEvent;
  3. import flash.events.KeyboardEvent;
  4. import flash.media.Sound;
  5. import flash.media.SoundChannel;

  6. stop();
  7. /*
  8. arthur:张志晨 zzc
  9. Date:2013.2.26
  10. */

  11. //------全局变量-----------
  12. //颜色数组:将通过数组下标来获取颜色值
  13. var colors=[0xffff00,0xff0000,0x00ff00,0xff00ff,0x0000ff,0xffffff];
  14. //转动的次数:
  15. var step:int=0;
  16. //音乐开关:是否播放:
  17. var isPlay:Boolean=true;
  18. //游戏是否结束:
  19. var isOver:Boolean=false;
  20. //背景音乐:加载库中的音乐,并建立控制面板,以方便随时播放或停止
  21. var mp3:Sound = new Mp3() as Sound;
  22. var sndChanel:SoundChannel=mp3.play();

  23. //------功能函数-----------
  24. /*
  25. 访问一个小正方形:
  26. 小正方形命名时,采用 "K"+i 样式,就是k0、k1、k2、k3、k4、……k52、k53
  27. 名字中的数字就是小正方形的身份证号id。
  28. 用id号通过方括号运算符得到小正方形的名称,
  29. 再查找显示列表this,
  30. 返回值:一个小正方形,mc类型,库中的链接符为:Square
  31. 这个函数的作用主要是方便书写代码,不是必须的。
  32. */
  33. function square(id:int):Square {
  34.         return this["k"+id];
  35. }


  36. /*
  37. 为“一个”小正方形涂色:
  38. 改变mc的颜色
  39. */
  40. function fullOneColor(id:int) {
  41.         var obj:Square=square(id);//通过id获得对应的小正方形对象
  42.         var cl:ColorTransform=new ColorTransform();//定义颜料盒
  43.         var index:int=obj.code;//通过数组下标,
  44.         cl.color=colors[index];//得到颜色值,就是在颜料盒中放入颜色
  45.         obj.transform.colorTransform=cl;//涂色
  46. }

  47. //转动次数计数器(当step=0时,清零)
  48. function info() {
  49.         infoTxt.text=step.toString()+'步';
  50.         step++;
  51. }

  52. /*
  53. 是否胜利:
  54. 6个面逐个检测,
  55. 如果每个“面”上的9个小正方形的颜色代码相同,则胜利;
  56. 在习惯上,最后复原顶层,所以“优先”检测顶层。
  57. */
  58. function isWin():Boolean {
  59.         //6个面:
  60.         for (var j:int=0; j<6; j++) {
  61.                 //每面9个小正方形:先得到j面上的第一个小正方形的颜色代码
  62.                 var n:int=square(j*9).code;
  63.                 for (var k:int=1; k<9; k++) {
  64.                         var id:int=j*9+k;
  65.                         //其余的8个小正方形的颜色代码与n比较
  66.                         if (n!=square(id).code) {
  67.                                 //只要发现某一个不一致,立即结束检测,表示返回 假。
  68.                                 return false;
  69.                         }
  70.                 }
  71.         }
  72.         //如果胜利:播放胜利消息画面,并返回 真
  73.         winMc.play();
  74.         return true;
  75. }


  76. //------换色函数------------------------------------
  77. /*
  78. 为“一些”小正方形涂色:
  79. 调用了为一个小正方形涂色的方法
  80. 参数:若干个顺时针方向排列的id数组
  81. */
  82. function fullSomeColor(id:Array) {
  83.         var leng:int=id.length;
  84.         for (var n:uint =0; n<leng; n++) {
  85.                 fullOneColor(id[n]);//调用
  86.         }
  87. }

  88. //一层中,四个“侧面”上共12个小正方形参与换色:
  89. function changeColorCode12(id:Array ) {
  90.         //如果数组为空,退出函数,什么都不做
  91.         if (id.length==0) {
  92.                 return;
  93.         }
  94.         for (var j:int=0; j<3; j++) {
  95.                 var n:int=square(id[9+j]).code;
  96.                 square(id[9+j]).code=square(id[6+j]).code;
  97.                 square(id[6+j]).code=square(id[3+j]).code;
  98.                 square(id[3+j]).code=square(id[0+j]).code;
  99.                 square(id[0+j]).code=n;
  100.         }
  101.         fullSomeColor(id);
  102. }

  103. //同一个“面”转动,有8个小正方形参与换色:
  104. function changeColorCode8(id:Array ) {
  105.         //如果数组为空,直接退出,什么都不做
  106.         if (id.length==0) {
  107.                 return;
  108.         }
  109.         for (var j:int=0; j<2; j++) {
  110.                 var n:int=square(id[6+j]).code;
  111.                 square(id[6+j]).code=square(id[4+j]).code;
  112.                 square(id[4+j]).code=square(id[2+j]).code;
  113.                 square(id[2+j]).code=square(id[0+j]).code;
  114.                 square(id[0+j]).code=n;
  115.         }
  116.         fullSomeColor(id);
  117. }

  118. //------------转动函数---------------------
  119. /*
  120. 按转动的方式不同,分为3类(每类4种转法)-->12种(每种2个方向)-->24个方法:
  121. 1.绕Y轴转:上层Top、中层yCentre、下层Under和三层Y同时转,方法代号:0、1、2
  122. 2.绕Z轴转:前层Frout、中层xCentre、后层Back和三层Z同时转,方法代号:3、4、5
  123. 3.绕X轴转:右层Right、中层zCentre、左层Left和三层X同时转,方法代号:6、7、8
  124. 方向:clockwise(顺时针),是否顺时针isClockwise,默认为true
  125. 注:转动某一层时,相当于此层不动,另外两层向相反方向转。
  126. //-----下面的数组数据,我是通过代码获取的,后面有附注。
  127. */
  128. function change(index:int,isClockwise:Boolean=true) {
  129.         var eight=[];
  130.         var twelve=[];

  131.         switch (index) {
  132.                 case 0 :
  133.                         eight=[0,1,2,5,8,7,6,3];
  134.                         twelve=[27,28,29,20,19,18,11,10,9,36,37,38];
  135.                         break;
  136.                 case 1 :
  137.                         twelve=[30,31,32,23,22,21,14,13,12,39,40,41];
  138.                         break;
  139.                 case 2 :
  140.                         twelve=[33,34,35,26,25,24,17,16,15,42,43,44];
  141.                         eight=[45,46,47,50,53,52,51,48];
  142.                         break;

  143.                 case 3 :
  144.                         eight=[9,10,11,14,17,16,15,12];
  145.                         twelve=[6,7,8,18,21,24,53,52,51,42,39,36];
  146.                         break;
  147.                 case 4 :
  148.                         twelve=[3,4,5,19,22,25,50,49,48,43,40,37];
  149.                         break;
  150.                 case 5 :
  151.                         twelve=[0,1,2,20,23,26,47,46,45,44,41,38];
  152.                         eight=[27,28,29,32,35,34,33,30];
  153.                         break;

  154.                 case 6 :
  155.                         eight=[18,19,20,23,26,25,24,21];
  156.                         twelve=[8,5,2,29,32,35,47,50,53,17,14,11];
  157.                         break;
  158.                 case 7 :
  159.                         twelve=[7,4,1,28,31,34,46,49,52,16,13,10];
  160.                         break;
  161.                 case 8 :
  162.                         twelve=[6,3,0,27,30,33,45,48,51,15,12,9];
  163.                         eight=[36,37,38,41,44,43,42,39];
  164.                         break;
  165.         }

  166.         if (! isClockwise) {
  167.                // 如果是逆时针,则翻转数组:
  168.                 eight.reverse();
  169.                 twelve.reverse();
  170.         }
  171.         //交换颜色代码、并按新颜色代码改变小正方形的颜色:
  172.         changeColorCode8(eight);
  173.         changeColorCode12(twelve);
  174. }



  175. /*
  176. 打乱:有随机颜色的效果,在本质上
  177. 就是随机转动魔方的层。
  178. 如果真是随机涂色,魔方可能无法复原!
  179. */
  180. function rndColor() {
  181.         for (var j:int=0; j<100; j++) {
  182.                 var yn:Boolean=Math.random()<0.5?true:false;//随机真假,这是个妙招吧?
  183.                 var id:int=Math.random()*9;//随机转法(九种之一)
  184.                 change(id,yn);
  185.         }

  186. }

  187. /*颜色复原:
  188. 为每一个小正方形定义颜色编号:code
  189. 用于研究魔方旋转的规律。
  190. 可不设置此功能。
  191. */
  192. function initColor() {
  193.         for (var j:int=0; j<6; j++) {
  194.                 for (var k:int=0; k<9; k++) {
  195.                         var id:int=j*9+k;//小正方形的id号
  196.                         square(id).code=j;//初始颜色代号
  197.                         fullOneColor(id);//初始颜色
  198.                 }
  199.         }
  200. }

  201. //---转动事件-----------------------
  202. /*
  203. 设置隐形按钮,按钮第二帧里放一个向标,指示旋转方向
  204. 隐形按钮放在相应的小正方形上,
  205. 样子位置如图
  206. 隐形按钮的命名与小正方形相应,本例在id前加个“b”

  207. b9-对应-k9,旋转上层,顺时针,执行0号方法:change(0)
  208. b11-对应-k11,旋转上层,逆时针,执行0号方法:change(0,false)
  209. b12-略
  210. b14
  211. b15
  212. b17
  213. b4-对应-k4,绕Y轴旋转上中下三层,顺时针,执行0、1、2号方法:change(0);change(1);change(2)

  214. b24
  215. b18
  216. b25-对应-k19,旋转中层,顺时针,执行4号方法:change(4)
  217. b19-对应-k25,旋转中层,逆时针,执行4号方法:change(4,false)
  218. b26
  219. b20
  220. b13-对应-k13,绕Z轴旋转前中后三层,顺时针,执行3、4、5号方法:change(3);change(4);change(5)

  221. b2
  222. b8
  223. b1
  224. b7
  225. b0-对应-k0,旋转左层,顺时针,执行8号方法:change(8)
  226. b6-对应-k6,旋转左层,逆时针,执行8号方法:change(8,false)
  227. b22-对应-k22,绕X轴旋转右中左三层,顺时针,执行6、7、8号方法:change(6);change(7);change(8)

  228. */

  229. //可用下面的数组存放隐形按钮,通过下标来访问之。但本例未采用这个方法:
  230. //var btn=[b9,b11,b12,b14,b15,b17,b4,b18,b24,b19,b25,b20,b26,b13,b2,b8,b1,b7,b0,b6,b22];

  231. stage.addEventListener(MouseEvent.CLICK,run_fn);
  232. function run_fn(e) {
  233.         //如果游戏结束,不执行几何操作
  234.         if (isOver) {
  235.                 return;
  236.         }
  237.         //获取隐形按钮的名字:
  238.         //从而决定这个按钮事件应该执行“几号方法”--函数:
  239.         var btnName:String=e.target.name;
  240.         switch (btnName) {
  241.                 case "b9" :
  242.                         change(0);
  243.                         break;
  244.                 case "b11" :
  245.                         change(0,false);
  246.                         break;
  247.                 case "b12" :
  248.                         change(1);
  249.                         break;
  250.                 case "b14" :
  251.                         change(1,false);
  252.                         break;
  253.                 case "b15" :
  254.                         change(2);
  255.                         break;
  256.                 case "b17" :
  257.                         change(2,false);
  258.                         break;
  259.                 case "b4" :
  260.                         change(0);
  261.                         change(1);
  262.                         change(2);
  263.                         break;



  264.                 case "b24" :
  265.                         change(3);
  266.                         break;
  267.                 case "b18" :
  268.                         change(3,false);
  269.                         break;
  270.                 case "b25" :
  271.                         change(4);
  272.                         break;
  273.                 case "b19" :
  274.                         change(4,false);
  275.                         break;
  276.                 case "b26" :
  277.                         change(5);
  278.                         break;
  279.                 case "b20" :
  280.                         change(5,false);
  281.                         break;
  282.                 case "b13" :
  283.                         change(3);
  284.                         change(4);
  285.                         change(5);
  286.                         break;


  287.                 case "b2" :
  288.                         change(6);
  289.                         break;
  290.                 case "b8" :
  291.                         change(6,false);
  292.                         break;
  293.                 case "b1" :
  294.                         change(7);
  295.                         break;
  296.                 case "b7" :
  297.                         change(7,false);
  298.                         break;
  299.                 case "b0" :
  300.                         change(8);
  301.                         break;
  302.                 case "b6" :
  303.                         change(8,false);
  304.                         break;
  305.                 case "b22" :
  306.                         change(6);
  307.                         change(7);
  308.                         change(8);
  309.                         break;
  310.                 default :
  311.                         return;
  312.         }
  313.         info();
  314.         isOver=isWin();
  315. }



  316. //---------控制区----------------

  317. /*
  318. 初始化游戏:
  319. 1.每一个小正方形恢复初始颜色“编号”
  320. 2.每一个小正方形恢复初始颜色
  321. 3.转动次数计数器清零
  322. 4.状态记录复原
  323. 5.隐藏胜利画面
  324. */
  325. function init() {
  326.         initColor();
  327.         isOver=false;
  328.         step=0;
  329.         info();
  330.         winMc.gotoAndStop(1);
  331. }

  332. //初始按钮事件,初始化魔方及参数:魔方为复原状态
  333. initBtn.addEventListener(MouseEvent.CLICK,init_fn);
  334. function init_fn(e) {
  335.         init();
  336. }

  337. //重玩:初始化魔方,再打乱颜色,随机转动100次
  338. replayBtn.addEventListener(MouseEvent.CLICK,replay_fn);
  339. function replay_fn(e) {
  340.         init();
  341.         rndColor();
  342. }
  343. //音乐:
  344. musicBtn.addEventListener(MouseEvent.CLICK,music_fn);
  345. function music_fn(e) {
  346.         if (isPlay) {
  347.                 sndChanel.stop();
  348.         } else {
  349.                 sndChanel=mp3.play();
  350.         }
  351.         isPlay=! isPlay;
  352. }

  353. //游戏默认:打乱状态
  354. init();
  355. rndColor();

  356. //-----------全部代码结束--------------------------------------------------


  357. //附录:-----------------------------------------------------------------------------------
  358. /*
  359. //---在设计时获取转动方法的id号-------------
  360. //鼠标“顺时针”谢依次点击“一次转动”方法中的8个或者12个小正方形
  361. var txt:String="";
  362. stage.addEventListener("click",getid);
  363. function getid(e) {
  364. var s:String=e.target.name;
  365. s=s.replace("k","");
  366. txt+=s+",";
  367. }
  368. //按任意键输出一个转动中的id号数组:
  369. stage.addEventListener(KeyboardEvent.KEY_DOWN,showid);
  370. function showid(e) {

  371. trace("=["+txt+"];");
  372. txt="";
  373. }
  374. //在我的设计中,得到:
  375. //=[0,1,2,5,8,7,6,3,];
  376. //=[27,28,29,20,19,18,11,10,9,36,37,38,];
  377. //=[30,31,32,23,22,21,14,13,12,39,40,41,];
  378. //=[33,34,35,26,25,24,17,16,15,42,43,44,];
  379. //=[45,46,47,50,53,52,51,48,];
  380. //=[9,10,11,14,17,16,15,12,];
  381. //=[6,7,8,18,21,24,53,52,51,42,39,36,];
  382. //=[3,4,5,19,22,25,50,49,48,43,40,37,];
  383. //=[0,1,2,20,23,26,47,46,45,44,41,38,];
  384. //=[27,28,29,32,35,34,33,30,];
  385. //=[18,19,20,23,26,25,24,21,];
  386. //=[8,5,2,29,32,35,47,50,53,17,14,11,];
  387. //=[7,4,1,28,31,34,46,49,52,16,13,10,];
  388. //=[6,3,0,27,30,33,45,48,51,15,12,9,];
  389. //=[36,37,38,41,44,43,42,39,];

  390. //接下来只做简单修改就可以了
  391. //仔细看这些数据,是有章可循的
  392. //有等差关联,可以用Array.map()函数得到新的数组。
  393. */
复制代码




http://bbs.jcwcn.com/forum.php?mod=attachment&aid=MTU0NTY5OXxkNDYzOWMwYTI2NmQ0M2M2Mzk0NjcwMmE3MTljZTlkMnwxNTExMTU3NjAy&request=yes&_f=.swf

  今后要改进的地方:
  可以为每一面设置自己喜欢的颜色、能够记忆你转动过程并回放过程、程序可以自己智能复原魔方……
        张志晨
-----------------------------------
as3版魔方:点击这里
as2版魔方:点击这里
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=496932
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
发表于 2012-8-24 06:38:16 | 显示全部楼层
酷素材
不容易,佩服。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-8-24 20:24:45 | 显示全部楼层
pcfan-sx 发表于 2012-8-24 06:38
不容易,佩服。

谢谢你的评价。你的评价就是对我的鼓励!
回复 支持 反对

使用道具 举报

发表于 2014-3-13 13:29:02 | 显示全部楼层
太难了,得好好学
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345