摘要:消消樂 遊戲 (三個消掉)Part 2
SV簡直不敢相信，一個美好的星期六，一個早上會搞不定UI！
到了下午，還是使用暴力法Orz
本來想延用昨天的技巧，好不容易用VisibleChange改變所有pictureBox的顏色，才發現忘了眼睛是會騙人的......
原因是他一直在Change，所以我以為的跟我看到的是不同的
所以果然SV只適用暴力法XDDD
很哀傷的，目前的進度就是這樣：
在Form裡面：
public partial class Form1 : Form
{
int[,] pbArray = new int[8, 8];
PictureBox[,] pbControl = new PictureBox[8, 8];
public Form1()
{
InitializeComponent();
Random gen = new Random(Guid.NewGuid().GetHashCode());
for (int i = 0; i < 8; i++)
{
for (int j = 0; j < 8; j++)
{
pbArray[i, j] = gen.Next(1, 5);
}
}
#region pbControls
pbControl[0, 0] = pb11;
pbControl[0, 1] = pb12;
pbControl[0, 2] = pb13;
pbControl[0, 3] = pb14;
pbControl[0, 4] = pb15;
pbControl[0, 5] = pb16;
pbControl[0, 6] = pb17;
pbControl[0, 7] = pb18;
pbControl[1, 0] = pb21;
pbControl[1, 1] = pb22;
pbControl[1, 2] = pb23;
pbControl[1, 3] = pb24;
pbControl[1, 4] = pb25;
pbControl[1, 5] = pb26;
pbControl[1, 6] = pb27;
pbControl[1, 7] = pb28;
pbControl[2, 0] = pb31;
pbControl[2, 1] = pb32;
pbControl[2, 2] = pb33;
pbControl[2, 3] = pb34;
pbControl[2, 4] = pb35;
pbControl[2, 5] = pb36;
pbControl[2, 6] = pb37;
pbControl[2, 7] = pb38;
pbControl[3, 0] = pb41;
pbControl[3, 1] = pb42;
pbControl[3, 2] = pb43;
pbControl[3, 3] = pb44;
pbControl[3, 4] = pb45;
pbControl[3, 5] = pb46;
pbControl[3, 6] = pb47;
pbControl[3, 7] = pb48;
pbControl[4, 0] = pb51;
pbControl[4, 1] = pb52;
pbControl[4, 2] = pb53;
pbControl[4, 3] = pb54;
pbControl[4, 4] = pb55;
pbControl[4, 5] = pb56;
pbControl[4, 6] = pb57;
pbControl[4, 7] = pb58;
pbControl[5, 0] = pb61;
pbControl[5, 1] = pb62;
pbControl[5, 2] = pb63;
pbControl[5, 3] = pb64;
pbControl[5, 4] = pb65;
pbControl[5, 5] = pb66;
pbControl[5, 6] = pb67;
pbControl[5, 7] = pb68;
pbControl[6, 0] = pb71;
pbControl[6, 1] = pb72;
pbControl[6, 2] = pb73;
pbControl[6, 3] = pb74;
pbControl[6, 4] = pb75;
pbControl[6, 5] = pb76;
pbControl[6, 6] = pb77;
pbControl[6, 7] = pb78;
pbControl[7, 0] = pb81;
pbControl[7, 1] = pb82;
pbControl[7, 2] = pb83;
pbControl[7, 3] = pb84;
pbControl[7, 4] = pb85;
pbControl[7, 5] = pb86;
pbControl[7, 6] = pb87;
pbControl[7, 7] = pb88;
#endregion
for (int i = 0; i < 8; i++)
{
for (int j = 0; j < 8; j++)
{
switch (pbArray[i, j])
{
case 1:
pbControl[i, j].Image = Resources.red;
break;
case 2:
pbControl[i, j].Image = Resources.green;
break;
case 3:
pbControl[i, j].Image = Resources.blue;
break;
case 4:
pbControl[i, j].Image = Resources.yellow;
break;
}
}
}
}
private void Form1_Load(object sender, EventArgs e)
{
}
private void PB_Click(object sender, EventArgs e)
{
var pb = sender as PictureBox;
if (pb != null)
{
pb.Visible = false;
}
}
}如果真的要說有什麼小技巧，那就是用#region 與#endregion將討人厭的地方包起來，
可以遮醜XDDDDD
不過這樣總算是可以安心把焦點放在pb_Click身上。
本來還去找了Controls這個東西，但是SV覺得好難就放棄。
但如果早上乖乖用暴力法，
應該已經coding三個就消除的地方吧?
於是畫面就很漂亮的是：
然後你會發現：
現成可以三個點一點的根本很少嘛！
Any way, 所以規則的設定很重要。
來談談那兩個陣列的意義吧！
第一個陣列pbArray是主要使用的陣列，他是用來紀錄哪個位置是什麼圖案。
也就是說pbArray[0,0]=2, 就是0,0這個位置(其實是我們命名的pb11)他所代表的顏色(圖案)是綠色，
因為SV設定1是紅色、2是綠色、3是藍色、4是黃色。為什麼是四種顏色呢?因為SV今天早上問姊姊三種圖案夠嗎，她說希望四種XDDDD
所以在Click就可以判斷哪一格的旁邊是什麼顏色，進而判斷是不是三個以上連在一起囉！
而要讓元件有消失的感覺，那就是用pbControl陣列，這樣的好處是用for迴圈來做動作以及判斷。
pbControl[0,0].Visible=false;
就是表示pb11這個pictureBox是看不到的，就有消失的感覺。
談到消失，如果要做動畫的感覺，其實可以做一點點的變化。
如果用昨天的方法，那麼所有元件的屬性基本上都不用修改。
想要做動畫感覺得消失來增加趣味性，就要使用timer了。
新增一個timer叫timerDispr, 代表要做消失動畫的timer。然後在他的事件Tick點兩點進入程式碼。
int row = 0;
int col = 0;
private void PB_Click(object sender, EventArgs e)
{
var pb = sender as PictureBox;
int width = pb.Width;
int height = pb.Height;
if (pb != null)
{
row = Convert.ToInt16(pb.Tag.ToString().Substring(0, 1)) - 1;
col = Convert.ToInt16(pb.Tag.ToString().Substring(1, 1)) - 1;
timerDispr.Enabled = true;
}
}
int tickDispr = 0;
private void timerDispr_Tick(object sender, EventArgs e)
{
tickDispr++;
if (tickDispr >= 1 && tickDispr < 2)
{
pbControl[row, col].Size = new Size(40, 40);
pbControl[row, col].Location = new Point();
}
if (tickDispr >= 2)
{
pbControl[row, col].Visible = false;
tickDispr = 0;
timerDispr.Enabled = false;
}
}
先來個圖解： 
我們將被點到的pictureBox紀錄下來，也就是利用row和col，
減一是因為我們的tag是從(1,1)開始，但是陣列是從(0,0)開始^^
接著在timer事件裡製造動畫的假象。
你可以用Size來改變大小，讓圖案好像變小了，然後一直縮到最後看不到。
可是單純這樣做，你會發現Size的改變是從左上角開始，所以圖片就很奇怪的往左上角縮小！可是美觀與常理上，應該要是正中央縮小呀！
因為懶得改控制象的屬性(也許可以用控制象的屬性改變控制大小的座標點或什麼，但SV有64個控制單位，每個都調也太可憐了吧)，
所以我們就用Location順便改變位置囉~SV超愛Location的
此例是用縮小一半到看不見為例。 你也可以分成縮小10單位、20單位、30單位...最後看不見。因為示範，單純用兩階段。 看了圖例，就可以慢慢分析，Location應該改成什麼位置了。 因為是縮小一半，因此最後的座標應該在原本位置X與Y分別加上(長與寬的一半/2)的位置。2是因為縮小成一半的關係。 因為SV的圖片是80X80大小，因此就是原來位置+40/2囉~ 所以改成這樣：
private void timerDispr_Tick(object sender, EventArgs e)
{
tickDispr++;
if (tickDispr >= 1 && tickDispr < 2)
{
pbControl[row, col].Size = new Size(40, 40);
pbControl[row, col].Location = new Point(pbControl[row, col].Location.X + 20, pbControl[row, col].Location.Y + 20);
}
if (tickDispr >= 2)
{
pbControl[row, col].Visible = false;
tickDispr = 0;
timerDispr.Enabled = false;
}
}
這樣就有圖片點了就縮小到不見的感覺啦!(SV是覺得縮小一半就有很棒的動畫效果了)
這做法要小心，那就是pictureBox的SizeMode千萬不要用成stretchImage!否則就不會有圖片變化的變化了!
SV被這個害慘了Orz
另外，
也可以用透明度來產生其他消失的動畫。你可以想像ppt的"下一張"動畫，來衡量自己的消失有哪些方式，可以增加一點跟別人的消消樂不一樣的味道喔！
透明度的修改有幾張偷吃步的方法，
最簡單的就是你將圖片的資源增加已經修改透明度的圖片XDD
透過修改圖片來做假象~
話說回來，圖片資源可以這樣用：
點專案→[你的專案]屬性，然後在資源裡加入現有資源或新增(但是直接畫很刺激吧，小畫家都不行的人用滑鼠畫好嗎XDDD?)
接著就是這樣使用：
pb11.Image=Resources.[圖片];
Resources要將專案的屬性import(反正他會提示你，不用怕~)。
這樣的好處就是你可以用資源檔而不是讀檔，如此別人就無法用讀檔或超連結取得你的圖片了~
而且這樣真的超簡單使用的!!!!!
然後回到規則的部分，
SV希望：
點到後，圖片都往下移動。
等到真的只剩最後幾個後，就可以重新或者做其他像是關卡的設定。
下次再用直接的操作來演練囉~