上篇文章介绍了游戏选关的界面，本节来实现游戏具体玩法内容。
打开游戏数据文件，该文件是一个Json格式的文件
游戏的Json数据文件
发现数据的格式比较简单，一个图片的存放的地址，图片正确答案，图片混淆答案，成语图片的提示与成语的出处。我们根据该数据创建一个游戏类
/// <summary>
/// 成语问题
/// </summary>
public class IdiomQuestion
{
/// <summary>
/// 正确答案
/// </summary>
public string answer { get; set; }
/// <summary>
/// 图片的路径
/// </summary>
public string img { get; set; }
/// <summary>
/// 提示的文字
/// </summary>
public string word { get; set; }
/// <summary>
/// 提示
/// </summary>
public string tip { get; set; }
/// <summary>
/// 解释成语内容
/// </summary>
public string content { get; set; }
/// <summary>
/// 是否通关
/// </summary>
public bool IsOver { get; set; }
}
然后使用C#的Json类库进行加载与解析成一个数据集合，该数据集合大概是460个游戏数据，这里我只做了400关的游戏。
/// <summary>
/// 获取问题答案的数据集合
/// </summary>
/// <returns></returns>
public void GetQuestions()
{
List<IdiomQuestion> jsonData = JsonMapper.ToObject<List<IdiomQuestion>>(File.ReadAllText(questionFileUrl));
var data = jsonData.OrderBy(it => it.img).ToList();
Questions = data;
}
然后开始制作游戏的主体内容界面，这块比较简单先做一个选择文字的小组件
前台UI代码如下:
<Grid>
<Border Width="80" Height="80" CornerRadius="5" BorderThickness="5" BorderBrush="#FF0582F7" Background="#FFFDFDFD">
<TextBlock x:Name="txt_word" FontSize="48" Text="字" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Grid>
然后制作游戏内容界面：
成语回答的四个文字框就是用TextBox按照图片格式的大小定位到相应的位置。
成语选择的地方用了WrapPanel组件，该组件里面放着20个字的小组件
前端UI代码：
<Grid >
<Grid Background="#FFA3A2A2">
</Grid>
<Grid Width="758">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="29*"/>
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush ImageSource="Res/GameBG3.jpg"/>
</Grid.Background>
<Button x:Name="btn_goBack" Click="btn_goBack_Click" Width="45" Cursor="Hand" Height="35" HorizontalAlignment="Left" Margin="5,0,0,0">
<Button.Template>
<ControlTemplate>
<Image x:Name="img_bg" Source="Res/BackBtn.png"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img_bg" Property="Source" Value="Res/BackBtn1.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Grid Width="758">
<Button x:Name="btn_tip" Cursor="Hand" Click="btn_tip_Click" Width="64" ToolTip="提示" Height="64" HorizontalAlignment="Right" Margin="5,5,100,0" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate>
<Image x:Name="img_bg" Source="Res/tip.png"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img_bg" Property="Source" Value="Res/tip1.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btn_music" Cursor="Hand" ToolTip="声音设置" Click="btn_music_Click" Width="76" Height="72" HorizontalAlignment="Right" Margin="5,0" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate>
<Image x:Name="img_bg" Source="Res/btn_sound.png"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img_bg" Property="Source" Value="Res/btn_sound_down.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Grid Width="231" Height="67" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,0,0,0">
<Image x:Name="glod" Width="72" ToolTip="获得的奖励" Height="50" Source="Res/MoneyPic.png" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock x:Name="txt_glod" Text="0" Foreground="White" FontSize="48" HorizontalAlignment="Left" Margin="80,0,0,0"/>
</Grid>
</Grid>
<Grid Width="654" Grid.Row="1" Height="450">
<Image x:Name="img_word" Width="654" Grid.Row="1" Source="Res/WordFrame.png" Height="450" Stretch="UniformToFill"/>
<TextBox Width="53.6" Height="62.4" x:Name="txt_one" Grid.Row="1" VerticalAlignment="Bottom" FontSize="48" Margin="153,0,0,25" HorizontalAlignment="Left" BorderThickness="0" PreviewTextInput="txt_one_PreviewTextInput" KeyUp="txt_one_KeyUp" InputMethod.IsInputMethodEnabled="False" TextChanged="txt_one_TextChanged"/>
<TextBox Width="53.6" Height="62.4" x:Name="txt_two" Grid.Row="1" VerticalAlignment="Bottom" FontSize="48" Margin="251.5,0,0,25" HorizontalAlignment="Left" BorderThickness="0" PreviewTextInput="txt_one_PreviewTextInput" KeyUp="txt_one_KeyUp" InputMethod.IsInputMethodEnabled="False" TextChanged="txt_one_TextChanged"/>
<TextBox Width="53.6" Height="62.4" x:Name="txt_Three" Grid.Row="1" VerticalAlignment="Bottom" FontSize="48" Margin="347.5,0,0,25" HorizontalAlignment="Left" BorderThickness="0" PreviewTextInput="txt_one_PreviewTextInput" KeyUp="txt_one_KeyUp" InputMethod.IsInputMethodEnabled="False" TextChanged="txt_one_TextChanged"/>
<TextBox Width="53.6" Height="62.4" x:Name="txt_Four" Grid.Row="1" VerticalAlignment="Bottom" FontSize="48" Margin="444.5,0,0,25" HorizontalAlignment="Left" BorderThickness="0" PreviewTextInput="txt_one_PreviewTextInput" KeyUp="txt_one_KeyUp" InputMethod.IsInputMethodEnabled="False" TextChanged="txt_one_TextChanged"/>
</Grid>
<Image x:Name="img_question" Width="390" Height="260" Grid.Row="1" VerticalAlignment="Top" Margin="0,50,0,0" Source="images/001.jpg"/>
<WrapPanel Grid.Row="2" Width="450" x:Name="wp_words">
</WrapPanel>
</Grid>
</Grid>
根据游戏数据中混淆的字是6个加上正确的成语一共是10个字，我觉得有点太简单了，所以增加了一个方法，该方法初始化200个汉字，然后随机从中拿出10个字，凑够20个字，而且每次拿出的20个字的顺序都不一样，增加游戏难度，打乱文字顺序的方法如下:
/// <summary>
/// 打乱文字顺序
/// </summary>
/// <param name="orglist">20个文字</param>
/// <returns></returns>
private List<string> GetDisruptedItems(List<string> orglist)
{
List<string> randomlist = orglist;
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < randomlist.Count; i )
{
int x, y;
string t;
x = rand.Next(0, randomlist.Count);
do
{
y = rand.Next(0, randomlist.Count);
} while (y == x);
t = randomlist[x];
randomlist[x] = randomlist[y];
randomlist[y] = t;
}
return randomlist;
},
