画面上を流れる数字を暗算して正解を求めるアプリを作ろう(その2)

2014年1月28日(火)
薬師寺 国安

次に、ソリューション・エクスプローラー内のgoPage.xamlを展開して表示される、goPage.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4 (goPage.xaml.vb)

Imports Windows.UI

‘ ImageInfoクラス内にBitmapImage型の「画像名」プロパティを定義します。
Public Class ImageInfo
  Public Property 画像名 As BitmapImage
End Class
Public NotInheritable Class goPage
  Inherits Page

‘ Randomクラス型のメンバー変数Rndを宣言します。
  Private Rnd As Random

  Private myRnd As Integer
  Private no As Integer = 0

ページがアクティブになった時処理

設定画面で設定した条件で、ランダムな数字が流れてくる、DataShowメソッドを実行します。

  Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
    Total = 0
    Datashow()
    MyBase.OnNavigatedTo(e)
  End Sub

設定画面で設定した条件で、ランダムな数字が流れてくるメソッド

新しいDispacherTimerクラスのインスタンスmyTimerオブジェクトを作成します。1桁から5桁までのランダムな数字を作成するmyRandomメソッドを実行します。「背景」のListBoxから選択したインデックスが0または1の場合は、背景色を設定します。インデックスが2の場合は、GridView1にXAMLのPage.Resourcesプロパティ要素内に設定した、空の背景を並べて表示する「skyGridViewTemplate」を適用します。ImageInfoクラス型のリストであるmyImageオブジェクトを作成します。
変数iを1から50まで繰り返し、ImageInfoクラスの「画像名」プロパティに、ソリューション・エクスプローラー内のImagesフォルダーにある「sky_15.png」を指定し、AddメソッドでmyImageオブジェクトに追加します。GridView1のItemsSourceプロパティにmyImageオブジェクトを指定します。これで、背景が空の画像で埋まります。
インデックスが3の場合は、GridView1にXAMLのPage.Resourcesプロパティ要素内に設定した、花の背景を並べて表示する「flowerGridViewTemplate」を適用します。ImageInfoクラス型のリストであるmyImageオブジェクトを作成します。
変数iを1から50まで繰り返し、ImageInfoクラスの「画像名」プロパティに、ソリューション・エクスプローラー内のImagesフォルダーにある「コスモス_1.png」を指定し、AddメソッドでmyImageオブジェクトに追加します。GridView1のItemsSourceプロパティにmyImageオブジェクトを指定します。これで、背景が花の画像で埋まります。
インデックスが4の場合は、GridView1にXAMLのPage.Resourcesプロパティ要素内に設定した、キャラクタの背景を並べて表示する「syokoGridViewTemplate」を適用します。ImageInfoクラス型のリストであるmyImageオブジェクトを作成します。
変数iを1から50まで繰り返し、ImageInfoクラスの「画像名」プロパティに、ソリューション・エクスプローラー内のImagesフォルダーにある「syoko1.png」を指定し、AddメソッドでmyImageオブジェクトに追加します。GridView1のItemsSourceプロパティにmyImageオブジェクトを指定します。これで、背景がキャラクターの画像で埋まります。

次にスピードの値を設定します。「遅い」を選択した場合は、myTimer_Tick1イベントハンドラを実行しタイマーを開始します。「普通」を選択した場合は、myTimer_Tick2を実行し、「速い」を選択した場合は、、myTimer_Tick3を実行します。

  Private Sub Datashow()
    myTimer = New DispatcherTimer
    myRandom()
    If backGroundIndex = 0 OrElse backGroundIndex = 1 Then LayoutRoot.Background = myBackGroundColor
    If backGroundIndex = 2 Then
      GridView1.SetValue(GridView.ItemTemplateProperty, Resources("skyGridViewTemplate"))
      Dim myImage As New List(Of ImageInfo)
      For i As Integer = 1 To 50
 
        myImage.Add(New ImageInfo With {.画像名 = New BitmapImage(New Uri("ms-appx:///Images/sky_15.png", UriKind.Absolute))})
      Next
      GridView1.ItemsSource = myImage
    End If
 
    If backGroundIndex = 3 Then
      GridView1.SetValue(GridView.ItemTemplateProperty, Resources("flowerGridViewTemplate"))
      Dim myImage As New List(Of ImageInfo)
      For i As Integer = 1 To 50
 
        myImage.Add(New ImageInfo With {.画像名 = New BitmapImage(New Uri("ms-appx:///Images/コスモス_1.png", UriKind.Absolute))})
      Next
      GridView1.ItemsSource = myImage
    End If
 
    If backGroundIndex = 4 Then
      GridView1.SetValue(GridView.ItemTemplateProperty, Resources("syokoGridViewTemplate"))
      LayoutRoot.Background = New SolidColorBrush(Colors.White)
      Dim myImage As New List(Of ImageInfo)
      For i As Integer = 1 To 50
 
        myImage.Add(New ImageInfo With {.画像名 = New BitmapImage(New Uri("ms-appx:///Images/syoko1.png", UriKind.Absolute))})
      Next
      GridView1.ItemsSource = myImage
    End If
    Select Case speed
      Case 0
        calcNo = 0
        no = 0
        myTimer.Interval = New TimeSpan(0, 0, 0.03)
        AddHandler myTimer.Tick, AddressOf myTimer_Tick1
        myTimer.Start()
    Case 1
      calcNo = 0
      no = 0
      myTimer.Interval = New TimeSpan(0, 0, 0.03)
      AddHandler myTimer.Tick, AddressOf myTimer_Tick2
      myTimer.Start()
    Case 2
      calcNo = 0
      no = 0
      myTimer.Interval = New TimeSpan(0, 0, 0.03)
      AddHandler myTimer.Tick, AddressOf myTimer_Tick3
      myTimer.Start()
    End Select
  End Sub

スピードで「遅い」を選択した時のイベント

メンバー変数noが1400か、それより大きかった場合は、メンバー変数noは0で初期化し、桁数によるランダムな数値を発生させるmyRandomを実行します。10ずつ加算されるメンバー変数noが20に達した時、モジュール変数calcNoを1ずつ加算します。何個の数値が流れたかを格納します。

  Private Sub myTimer_Tick1()
    myTextBlock.Margin = New Thickness(no, 300, 0, 0)
    If no >= 1400 Then
      no = 0
      myRandom()
    End If
 
    If no = 20 Then
      calcNo += 1
      calcNoTextBox.Text = calcNo
    End If
    no += 10
  End Sub

スピードで「普通」を選択した時のイベント

メンバー変数noが1400か、それより大きかった場合は、メンバー変数noは0で初期化し、桁数によるランダムな数値を発生させるmyRandomを実行します。15ずつ加算されるメンバー変数noが30に達した時、モジュール変数calcNoを1ずつ加算します。何個の数値が流れたかを格納します。

  Private Sub myTimer_Tick2()
      myTextBlock.Margin = New Thickness(no, 300, 0, 0)
      If no >= 1400 Then
      no = 0
      myRandom()
    End If
    If no = 30 Then
      calcNo += 1
      calcNoTextBox.Text = calcNo
    End If
    no += 15
  End Sub

スピードで「速い」を選択した時のイベント

メンバー変数noが1400か、それより大きかった場合は、メンバー変数noは0で初期化し、桁数によるランダムな数値を発生させるmyRandomを実行します。20ずつ加算されるメンバー変数noが20に達した時、モジュール変数calcNoを1ずつ加算します。何個の数値が流れたかを格納します。

  Private Sub myTimer_Tick3()
    myTextBlock.Margin = New Thickness(no, 300, 0, 0)
    If no >= 1400 Then
      no = 0
      myRandom()
    End If
    If no = 20 Then
      calcNo += 1
      calcNoTextBox.Text = calcNo
    End If
    no += 20
  End Sub

1桁から5桁までのランダムな数字を表示する処理

新しいRandomのインスタンスRndオブジェクトを作成します。選択された桁数で条件分岐を行っています。
1桁の場合は「1から9」の間のランダムな数字、2桁の場合は「10から99」の間のランダムな数字、3桁の場合は「100から999」の間のランダムな数字、4桁の場合は「1000から9999」の間のランダムな数字、5桁の場合は「10000から99999」の間のランダムな数字を生成し、myTextBlockに表示します。モジュール変数Totalに流れてきたランダムな数字の合計を格納します。
但しRnd.Next(minvalue,maxValue)で、Rnd.Next(1,10)と指定しても、生成されるランダムな数にはmaxValueは含まれませんので、結局は1から9までのランダムな数字が作成されます。よって、このサンプルで指定しているRnd.Next(1,9)では、1から8までの乱数しか作成されず9という数字は出てきません。説明上わかり易くするために「1から9」・・・・「10000から99999」と記述していますので、ご了承ください。

  Private Sub myRandom()
    Rnd = New Random
    Select Case keta
      Case 0
        myRnd = Rnd.Next(1, 9)
        Exit Select
      Case 1
        myRnd = Rnd.Next(10, 99)
        Exit Select
      Case 2
        myRnd = Rnd.Next(100, 999)
        Exit Select
      Case 3
        myRnd = Rnd.Next(1000, 9999)
        Exit Select
      Case 4
        myRnd = Rnd.Next(10000, 99999)
        Exit Select
    End Select
    myTextBlock.Text = myRnd
    Total = Total + myRnd
    totalTextBox.Text = Total
    myTextBlock.FontSize = mojiSize
  
  End Sub
End Class
  • 動体視力暗算アプリ

    『Windows 8.1+Visual Studio 2013によるWindows ストア・アプリ開発実例集』 第4回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています