• 新浪微博:
  • 微信 :
按键精灵电脑版
立即下载

软件版本:2014.05
软件大小:21.6M
更新时间:07-04

按键精灵安卓版
立即下载

软件版本:3.3.1
软件大小:62.5M
更新时间:5-24

按键精灵iOS版
立即下载

软件版本:1.3.5
软件大小:29.2M
更新时间:06-14

最新企业版UiBot
立即下载

软件版本:1.2
软件大小:208M
更新时间:01-16

快捷导航

登录 后使用快捷导航
没有帐号? 注册

登录 注册
发新话题 回复该主题

界面设计________QUI图像控件(【拼图游戏】)------小妖页面讨... [复制链接]

1#
本帖最后由 renjinqiaoqq 于 2014-3-22 19:48 编辑


效果如下:


所用版本:按键9.62


所用控件:PictureBox 图像、Button 按钮

主要思想:通过附件方式改变图片显示—— Form1.PictureBox1.Picture = "Attachment:\神盾.bmp"
交换空格图像控件的图像路径(我这儿是黑色图像)与所点击图像控件的图像路径,实现图像变化。


显示方法:利用字符串把序号记录,然后再设置一个函数,把记录的字符串分别显示到各个控件上。

主要流程:
制作显示函数:这是我们第一步,我们需要把图像显示出来,然后以这个作为低层,才能变化图像。
  1. Function 更新(str)
  2. Form1.PictureBox1.Picture = "Attachment:\" & mid(str, 2, 1) & ".bmp"
  3. Form1.PictureBox2.Picture = "Attachment:\" & mid(str, 4, 1) & ".bmp"
  4. Form1.PictureBox3.Picture = "Attachment:\" & mid(str, 6, 1) & ".bmp"
  5. Form1.PictureBox4.Picture = "Attachment:\" & mid(str, 8, 1) & ".bmp"
  6. Form1.PictureBox5.Picture = "Attachment:\" & mid(str, 10, 1) & ".bmp"
  7. Form1.PictureBox6.Picture = "Attachment:\" & mid(str, 12, 1) & ".bmp"
  8. Form1.PictureBox7.Picture = "Attachment:\" & mid(str, 14, 1) & ".bmp"
  9. Form1.PictureBox8.Picture = "Attachment:\" & mid(str, 16, 1) & ".bmp"
  10. Form1.PictureBox9.Picture = "Attachment:\" & mid(str, 18, 1) & ".bmp"
  11. 更新 = str //这个我们后面要用到,这样写是为了让这个参数得到续传,为了我后面方便调用函数。
  12. End Function
复制代码
如上,我们写了一个函数过程,函数名是“更新”,参数是:str。这个函数的值,初步设想是"|0|1|2|3|4|5|6|7|8"。8代表空。
第二位开始,我们有很多好处,后面我慢慢说明。然后我们这儿更新,大家都可以看到,其实就是每位数字对应的去更新图像控件上面的图像。

制作交换函数:这是第二步,图像更新我们做好了,那么就来做图像交换,图像交换实际上就是我们点到空白的旁边上下左右的图片,就能让点到的图片与空白图片交换。实现图片向空白地方移动的效果。
因为我们这儿记录图片路径信息的,实际上是一个字符串。所以,实际上,我们只需要把表示着两个位置的数字交换位置就可以了。比如:
"|0|1|2|3|4|5|6|7|8"
这个空白的地方在右下角,如果移动到中下,那么应该是8和7交换下位置就行了。变成:
"|0|1|2|3|4|5|6|8|7"
这样,只要这个字符串交换下位置。
估计这儿大家有更好的方法去实现这个位置交换。但是小妖比较偷懒,就把这个字符串转换成了数组。
同样的做一个函数:
  1. Function 交换(序号,顺序)
  2. 空位置 = InStr(顺序, "8") / 2 //这儿是计算空所在的位置(如果大家不适应的话,建议还是用0号作为空吧,估计那样计算的时候也比较方便)
  3. If ((序号-1) \ 3 - (空位置-1) \ 3) ^ 2 + ((序号-1) mod 3 - (空位置-1) mod 3) ^ 2 = 1 Then //这句比较重要,主要是判断点击的这个控件与空的控件是否相邻
  4. 顺序组=Split(顺序,"|") //把顺序变成数组
  5. t = 顺序组(序号) : 顺序组(序号) = 顺序组(空位置) : 顺序组(空位置) = t
  6. 交换 = Join(顺序组, "|") //把交换后的数组做成字符串返回
  7. 步数 = 步数 + 1 //交换成功则记录步数
  8. Else
  9. 交换 = 顺序 //如果没交换,那么就返回原来的顺序,这儿不能空,空的话就返回空了
  10. Form1.Label1.Caption = "请选择空白旁边的图片"//提示用户点击错了
  11. End If
  12. End Function
复制代码
((序号-1) \ 3 - (空位置-1) \ 3) ^ 2 + ((序号-1) mod 3 - (空位置-1) mod 3) ^ 2 = 1 重点是这句,我们先来说参数,第一个参数“序号”是我们点击的那个图像控件的序号,第二个参数“顺序”是目前我们路径字符串("|0|1|2|3|4|5|6|7|8"这个)。
那么,(序号-1) \ 3 这就是序号所处的二维行坐标({{0,1,2},{3,4,5},{6,7,8}}),(序号-1) mod 3 就是二维列坐标。 (空位置-1) \ 3相同。这句总的意思就是这两个空格之间的距离是1(相当于圆,画一个以控件中心到紧挨着的控件中心为半径为单位1距离的圆)。
如果这两个的距离等于1,那就说明相挨着,就可以移动。移动很简单,就是两个的路径交换。然后返回交换后的字符串,如果上面的条件不成立,就不交换。


拼图游戏.Q (, 下载次数:279)


拼图游戏.exe (, 下载次数:241)



    已有4评分我要评分查看所有评分

    2#

    1111111111111111111

      已有1评分我要评分查看所有评分

      3#

      下载学习

      4#

      咦,好东西呢

      5#

      ···············

      终极密码Q7549809
      6#

      再造之恩 我看 副高就低

      7#

      111111111111111111111111111111

      <font color="Red">承接各种游戏<strong></strong></font>,办公,网页脚本<br />
      有需要请联系QQ<font color="Blue">1326060360</font>
      8#

      小妖出品,必出精品

      9#

      2783783453973

      1+1未必≠1
      2+2也未必≠2
      10#

      来学习

      11#

      啦啦啦啦啦啦

      <a href="http://bbs.anjian.com/thread-576954-1-1.html" target="_blank"><strong><font size="4">按键精灵14周年庆典火热进行中!点击领奖</font></strong></a>
      12#

      学习学习。。

      13#


      14#

      我看到有人用按键精灵,写了个挂机类游戏,感觉好神奇啊,有这方面的教程吗?!

      15#

      看看,学习一下

      16#

      学习一下,很好的做品

      17#

      嘻嘻嘻

      18#


      19#

      不错 可以学习学习啊

      20#

      很强大,学习的

        已有1评分我要评分查看所有评分

        发新话题 回复该主题