三角函數(shù)特值記憶游戲設(shè)計與實現(xiàn)
——Expression Blend輔助教學(xué)應(yīng)用實例

陳世華，艾訓(xùn)儒

（1.恩施自治州高級中學(xué)，湖北恩施445000；2.湖北民族學(xué)院，湖北恩施445000）

三角函數(shù)特值記憶游戲設(shè)計與實現(xiàn)
——Expression Blend輔助教學(xué)應(yīng)用實例

陳世華1，艾訓(xùn)儒2

（1.恩施自治州高級中學(xué)，湖北恩施445000；2.湖北民族學(xué)院，湖北恩施445000）

記憶特殊角的三角函數(shù)值單調(diào)、枯燥，很多學(xué)生還不夠重視。為了幫助學(xué)生樂于且易于記憶三角函數(shù)特值，作者用ExpressionBlend4設(shè)計了一個小游戲，也是對信息技術(shù)輔助教學(xué)的一個探索。

三角函數(shù)；游戲設(shè)計；輔助教學(xué)；ExpressionBlend

熟記特殊角的三角函數(shù)值，是提高三角函數(shù)解題速度與準(zhǔn)確性的必要條件之一。常用特值有二十幾個，雖然不多，但是記憶過程單調(diào)、枯燥，很多學(xué)生還不夠重視，即使到了高三，仍有不少學(xué)生因為特值不熟而直接或間接丟分。為了讓學(xué)生樂于且易于記憶三角函數(shù)特值，筆者用ExpressionBlend4設(shè)計了一個小游戲。

一、界面及對象設(shè)計

界面左邊一個Image、一個Path、三個TextBox，分別命名為image01、path_paodan、textbox01、textbox02、textbox03。

如圖1所示，image01展現(xiàn)特殊角的三角函數(shù)式。

path_paodan直接在Blend4的設(shè)計視圖中繪制，用于設(shè)計炮彈爆炸動畫。初始狀態(tài)path_paodan透明（Opacity屬性值為0），圖1中看不見，圖2是動畫過程中一幀的形狀。

圖1

textbox01、textbox02、textbox03初始狀態(tài)也透明，游戲結(jié)束時才顯示出來，用于統(tǒng)計命中率，如圖3所示。

圖2

圖3

界面右邊是兩個Image，一個Image加載包含單位圓的坐標(biāo)系，圖片中包含了所有的特值及它們對應(yīng)的三角函數(shù)線。另一Image加載一個坦克圖片。

每一條三角函數(shù)線的位置，都有一條線段（Path），根據(jù)函數(shù)名稱及角度，分別命名為path_sin30、path_sin45……初始狀態(tài)下，這些線段的Opacity屬性值均為0，程序運行時，當(dāng)鼠標(biāo)移動某條線段末端時，這條線段才會顯示出來，當(dāng)鼠標(biāo)移開后，該線段又隱藏，以此強調(diào)三角函數(shù)線。

每個特值處，也就是每條三角函數(shù)線末端，設(shè)計一個Button，依次命名為btsin30、btsin45……btcos0、btcos30……bttan30、bttan45……三角函數(shù)線的顯示與隱藏由這些按鈕的MouseMove、MouseLeave事件控制。

坦克炮口處有一個Ellipse（橢圓），大小為10×10，用做炮彈，命名為e1。

界面中上邊沿放置三個RadioButton（單選按鈕），分別命名為rdbt01、rdbt02、rdbt03，用于設(shè)置image01下落的速度。rdbt01的下邊放置一個Button，命名為button01，用于開始游戲時的相關(guān)初始化及image01的動畫設(shè)置。

二、動畫及音效設(shè)計

1.image01的下落動畫

image01的下落，由程序代碼實現(xiàn)。image01下落到界面底部后，需要加載一下圖片，下落過程中，如果被命中，需要更換圖片，這些都需要程序代碼實現(xiàn)。代碼在button01的click事件處理程序中。

2.坦克動畫

發(fā)射炮彈時，坦克圖片一退一進(jìn)，增加動感。該動畫直接在ExpressionBlend4的設(shè)計視圖下完成，命名為sb_tank。

3.炮彈動畫

炮彈e1，運行終點要根據(jù)image01的當(dāng)時位置確定，通過如下過程實現(xiàn)e1的動畫：

private void paodan01()//炮彈飛行動畫

{

DoubleAnimation anim01=new DoubleAnimation();//橫向運動

DoubleAnimation anim02=new DoubleAnimation();//縱向運動

e1.Opacity=100;

anim01.From=440;anim01.To=Canvas.GetLeft (this.image01)+50;

anim02.From=351;anim02.To=Canvas.GetTop (this.image01)+40;

anim01.Duration=new Duration(TimeSpan. FromMilliseconds(100));

anim02.Duration=new Duration(TimeSpan. FromMilliseconds(100));

Storyboardsb_paodan01=new Storyboard();

sb_paodan01.Duration=new Duration(TimeSpan. FromMilliseconds(100));

sb_paodan01.AutoReverse=false;

sb_paodan01.Children.Add(anim01);sb_paodan01. Children.Add(anim02);

Storyboard.SetTarget(anim01,e1);Storyboard.Set-Target(anim02,e1);

Storyboard.SetTargetProperty(anim01,new PropertyPath("(Canvas.Left)"));

Storyboard.SetTargetProperty(anim02,new PropertyPath("(Canvas.Top)"));

sb_paodan01.Completed += new EventHandler (sb_paodan01_Completed);//其中隱藏e1

sb_paodan01.Begin();

}

4.炮彈爆炸動畫及音效

炮彈爆炸動畫，針對path_paodan設(shè)計，命名為sb_paodan，在設(shè)計視圖下完成，主要通過縮放改變path_paodan的大小，通過其顏色漸變及透明度變化來實現(xiàn)動畫。path_paodan的橫向位置固定，其縱向位置在程序運行時，通過程序代碼調(diào)節(jié)，使其與e1同步。

爆炸聲由MediaElement控件加載，控件命名為mediasound，播放語句：

mediasound.Play();

三、程序邏輯設(shè)計與實現(xiàn)

1.數(shù)據(jù)處理

本游戲數(shù)據(jù)量不大，只用數(shù)組存放數(shù)據(jù)，共設(shè)置三個數(shù)組。

將加載于image01的圖片文件名存放于字符串?dāng)?shù)組中，該數(shù)組命名為myimage，另設(shè)一個整型數(shù)組tempID，個布爾型數(shù)組mingzhong，長度都與myimage相同。數(shù)組mingzhong記載命中情況。

程序運行時，對tempID隨機(jī)排序，排序后的元素，作為myimage元素的下標(biāo)，image01圖片的加載順序為myimage[tempID[0]]、myimage[tempID[1]]、…

對數(shù)組隨機(jī)排序，由自定義函數(shù)RandomSort(int[] array)實現(xiàn):

publicint[]RandomSort(int[]array)

{

intlen=array.Length;

System.Collections.Generic.Listlist=newSystem.

Collections.Generic.List();

int[]ret=newint[len];Randomrand=newRandom();inti=0;

while(list.Count

{

intiter=rand.Next(0,len);

if(!list.Contains(iter))

{list.Add(iter);ret[i]=array[iter];i++;}

}

returnret;

}

2.游戲流程

開始游戲按鈕button01的Click事件處理程序中主要是image01第一個圖片加載與image01的下落動畫程序代碼。該動畫命名為sb01，sb01拖放完成，會自動跳轉(zhuǎn)到sb01_Completed()，在sb01_Completed()中，為image01加載一下圖片。sb01_Completed ()的最后，利用sb01.Begin()語句實現(xiàn)動畫的循環(huán)拖放，流程見圖4。

圖4

完整代碼如下：

private void button01_Click(object sender,System. Windows.Routed Event Argse)

{

for(intk=0;k

button01.IsEnabled=false;rdbt01.IsEnabled =false;

rdbt02.IsEnabled=false;rdbt03.IsEnabled= false;

textbox01.Opacity=0;textbox02.Opacity=0; textbox03.Opacity=0;

sb01.Stop();sb01.Children.Clear();

image01.Opacity=100;i01=0;shuming. Opacity=0;

for(intj=0;j

//以上語句為必要的初始化

tempID=RandomSort(tempID);

//將數(shù)組下標(biāo)隨機(jī)排序。

imgfilename=myimage[tempID[i01]];

//獲取圖片文件名。

Uriimage01url=newUri("imgsjhszhi/"+myimage [tempID[i01]],UriKind.RelativeOrAbsolute);

//申明圖片路徑

BitmapImage bitmap01=new BitmapImage (image01url);//定義圖片源

image01.Source=bitmap01;

//以下設(shè)置image01的動畫

DoubleAnimation anim01=newDouble Animation();

anim01.From=52;anim01.To=440;

anim01.Duration=newTimeSpan(0,0,0, v01);//v01控制速度

sb01.Duration=new Duration(newTimeSpan (0,0,0,v01));

sb01.AutoReverse=false;

sb01.Children.Add(anim01);

Storyboard.SetTarget(anim01,image01);

Storyboard.SetTarget Property(anim01,new PropertyPath("(Canvas.Top)"));

sb01.Completed+=newEventHandler (sb01_Completed);

sb01.Begin();

}

動畫sb01播放完畢，自動跳轉(zhuǎn)到sb01_Completed():

privatevoidsb01_Completed(objectsender,EventArgse)

{

i01=i01+1;

if(i01

{

imgfilename=myimage[tempID[i01]];

Uriimage01url=newUri("imgsjhszhi/"+myimage [tempID[i01]],UriKind.Relative Or Absolute);

BitmapImage bitmap01=newBitmapImage (image01url);

image01.Source=bitmap01;

sb01.Begin();//重新播放動畫sb01，由此構(gòu)成循環(huán)播放。

}

Else

{

Uriimage01url=newUri("imgsjhszhi/p01.jpg", UriKind.RelativeOrAbsolute);

BitmapImage bitmap01=new BitmapImage(image01url);

image01.Source=bitmap01;

sb01.Stop();sb01.Children.Clear();

sb01.Completed-=newEventHandler (sb01_Completed);

button01.IsEnabled=true;rdbt01.IsEnabled=true;

rdbt02.IsEnabled=true;rdbt03.IsEnabled=true;

intright=0;//統(tǒng)計命中情況

for(intk=0;k

if(mingzhong[k])right=right+1;

textbox01.Opacity=100;textbox02.Opacity=100;textbox03.Opacity=100;

textbox02.Text="命中："+right.ToString();

textbox03.Text="未中："+(mingzhong. Length-right).ToString();

textbox01.Text="命中率："+((double)right/(double) mingzhong.Length).ToString().Substring(0,6);

}

}

3.交互控制

開始游戲后，當(dāng)鼠標(biāo)移動到某一三角函數(shù)線的末端，鼠標(biāo)指針變成手形，按下鼠標(biāo)左鍵，即點擊三角函數(shù)線末端的隱形按鈕，開始坦克動畫sb_tank，炮彈動畫sb_paodan。

發(fā)射炮彈后，判斷點擊位置與image01圖片中三角函數(shù)式是否一致。若image01中是正弦式，則點擊位置在單位圓上；若image01中是余弦式，則點擊位置在x軸上；若image01中是正切式，則點擊位置在直線上。如果一致，則將path_paodan的高度定位于image01的當(dāng)前高度，并播放炮彈爆炸動畫sb_paodan、播放聲音、將image01的圖片更換為骷髏圖片，表示命中，否則只發(fā)炮彈沒有爆炸。以下是btsin30的點擊事件處理代碼：

privatevoid btsin30_Click(objectsender,System. Windows.Routed Event Argse)

{

if(imgfilename=="sin30.jpg")//如果命中

{

mingzhong[0]=true;//記錄命中

image01.Source=null;

Uriimage001url=newUri("imgsjhszhi/kulou01.jpg", UriKind.RelativeOrAbsolute);//更換為骷髏圖片

BitmapImagebitmap001=new BitmapImage(image001url);

image01.Source=bitmap001;

sb_tank.Begin();mediasound.Stop();mediasound.Play();

Canvas.SetTop(path_paodan,Canvas. GetTop(this.image01)-10);//爆炸高度

sb_baoza.Begin();paodan01();

}

else//未命中則沒有爆炸

{sb_tank.Begin();paodan01();}

}

當(dāng)image01遍歷myimage數(shù)組中的所有圖片后，終止sb01動畫播放，image01的圖片換成停止標(biāo)志，并統(tǒng)計命中情況。

結(jié)束語

游戲開發(fā)，首先需要有創(chuàng)意的設(shè)計，但好的設(shè)計卻又不一定能實現(xiàn)，并且設(shè)計與實現(xiàn)常常需要反復(fù)測試，很難一蹴而就。

本游戲是用ExpressionBlend4開發(fā)Silverlight應(yīng)用程序進(jìn)行輔助教學(xué)的一個嘗試。經(jīng)過多次應(yīng)用證明，該游戲?qū)μ岣邔W(xué)生的學(xué)習(xí)興趣、提高對三角函數(shù)特殊值的記憶效率有明顯的幫助。

（編輯：王天鵬）

book=67,ebook=65

TP311.1

：A

：1673-8454（2012）10-0067-04