三角函數特值記憶游戲設計與實現
——Expression Blend輔助教學應用實例

陳世華，艾訓儒

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

三角函數特值記憶游戲設計與實現
——Expression Blend輔助教學應用實例

陳世華1，艾訓儒2

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

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

三角函數；游戲設計；輔助教學；ExpressionBlend

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

一、界面及對象設計

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

如圖1所示，image01展現特殊角的三角函數式。

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

圖1

textbox01、textbox02、textbox03初始狀態也透明，游戲結束時才顯示出來，用于統計命中率，如圖3所示。

圖2

圖3

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

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

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

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

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

二、動畫及音效設計

1.image01的下落動畫

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

2.坦克動畫

發射炮彈時，坦克圖片一退一進，增加動感。該動畫直接在ExpressionBlend4的設計視圖下完成，命名為sb_tank。

3.炮彈動畫

炮彈e1，運行終點要根據image01的當時位置確定，通過如下過程實現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設計，命名為sb_paodan，在設計視圖下完成，主要通過縮放改變path_paodan的大小，通過其顏色漸變及透明度變化來實現動畫。path_paodan的橫向位置固定，其縱向位置在程序運行時，通過程序代碼調節，使其與e1同步。

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

mediasound.Play();

三、程序邏輯設計與實現

1.數據處理

本游戲數據量不大，只用數組存放數據，共設置三個數組。

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

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

對數組隨機排序，由自定義函數RandomSort(int[] array)實現:

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拖放完成，會自動跳轉到sb01_Completed()，在sb01_Completed()中，為image01加載一下圖片。sb01_Completed ()的最后，利用sb01.Begin()語句實現動畫的循環拖放，流程見圖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);

//將數組下標隨機排序。

imgfilename=myimage[tempID[i01]];

//獲取圖片文件名。

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

//申明圖片路徑

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

image01.Source=bitmap01;

//以下設置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播放完畢，自動跳轉到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，由此構成循環播放。

}

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;//統計命中情況

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.交互控制

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

發射炮彈后，判斷點擊位置與image01圖片中三角函數式是否一致。若image01中是正弦式，則點擊位置在單位圓上；若image01中是余弦式，則點擊位置在x軸上；若image01中是正切式，則點擊位置在直線上。如果一致，則將path_paodan的高度定位于image01的當前高度，并播放炮彈爆炸動畫sb_paodan、播放聲音、將image01的圖片更換為骷髏圖片，表示命中，否則只發炮彈沒有爆炸。以下是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();}

}

當image01遍歷myimage數組中的所有圖片后，終止sb01動畫播放，image01的圖片換成停止標志，并統計命中情況。

結束語

游戲開發，首先需要有創意的設計，但好的設計卻又不一定能實現，并且設計與實現常常需要反復測試，很難一蹴而就。

本游戲是用ExpressionBlend4開發Silverlight應用程序進行輔助教學的一個嘗試。經過多次應用證明，該游戲對提高學生的學習興趣、提高對三角函數特殊值的記憶效率有明顯的幫助。

（編輯：王天鵬）

book=67,ebook=65

TP311.1

：A

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