手順 6: タイマーの追加Step 6: Add a Timer

次に、絵合わせゲームに Timer コントロールを追加します。Next, you add a Timer control to the matching game. タイマーは、指定されたミリ秒間待機してから、ティックと呼ばれるイベントを発生させます。A timer waits a specified number of milliseconds, and then fires an event, referred to as a tick. タイマーは、アクションを開始したり定期的に繰り返したりする場合に便利です。This is useful for starting an action, or repeating an action on a regular basis. ここではタイマーの使用例として、プレーヤーが 2 つのアイコンを選択し、アイコンが一致しない場合は、短時間の経過後にその 2 つのアイコンが再び非表示になるようにします。In this case, you'll use a timer to enable players to choose two icons, and if the icons don't match, hide the two icons again after a short period of time.

タイマーを追加するにはTo add a timer

  1. Windows フォーム デザイナーのツール ボックスから、[タイマー]([コンポーネント] カテゴリ内) を選択して Enter キーを押すか、タイマーをダブルクリックして、タイマー コントロールをフォームに追加します。From the toolbox in Windows Forms Designer, choose Timer (in the Components category) and then choose the ENTER key, or double-click the timer to add a timer control to the form. 次の図に示しているように、タイマーのアイコンが [Timer1] という名前で、フォームの下の領域に表示されます。The timer's icon, called Timer1, should appear in a space below the form, as shown in the following picture.

    タイマーTimer
    タイマーTimer

    注意

    ツール ボックスが空の場合は、フォームのコードではなくフォーム デザイナーを選択してから、ツール ボックスを開いてください。If the toolbox is empty, be sure to select the form designer, and not the code behind the form, before opening the toolbox.

  2. [Timer1] アイコンをクリックしてタイマーを選択します。Choose the Timer1 icon to select the timer. [プロパティ] ウィンドウで、表示イベントから表示プロパティに切り替えます。In the Properties window, switch from viewing events to viewing properties. 次に、タイマーの [Interval] プロパティを 750 に設定します。ただし、その [Enabled] プロパティは [False] のままにします。Then, set the timer's Interval property to 750, but leave its Enabled property set to False. [Interval] プロパティは、ティック間の待機時間 (Tick イベントのトリガーまでの待機時間) をタイマーに指示します。The Interval property tells the timer how long to wait between ticks, or when it triggers its Tick event. このプロパティの値として 750 を指定すると、その Tick イベントを発生させるまでに 4 分の 3 秒 (750 ミリ秒) 待機するようタイマーに指示することになります。A value of 750 tells the timer to wait three quarters of a second (750 milliseconds) before it fires its Tick event. Start() メソッドを呼び出して、プレーヤーが 2 つ目のラベルをクリックした後にのみタイマーが開始されるようにします。You'll call the Start() method to start the timer only after the player chooses the second label.

  3. Windows フォーム デザイナーでタイマー コントロール アイコンを選択して Enter キーを押すか、タイマーをダブルクリックして、空の Tick イベント ハンドラーを追加します。Choose the timer control icon in Windows Forms Designer and then choose the ENTER key, or double-click the timer, to add an empty Tick event handler. 次のコードを既存のコードと置き換えるか、手動でイベント ハンドラーに入力します。Either replace the code with the following code, or manually enter the following code into the event handler.

    /// <summary>
    /// This timer is started when the player clicks 
    /// two icons that don't match,
    /// so it counts three quarters of a second 
    /// and then turns itself off and hides both icons
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void timer1_Tick(object sender, EventArgs e)
    {
        // Stop the timer
        timer1.Stop();
    
        // Hide both icons
        firstClicked.ForeColor = firstClicked.BackColor;
        secondClicked.ForeColor = secondClicked.BackColor;
    
        // Reset firstClicked and secondClicked 
        // so the next time a label is
        // clicked, the program knows it's the first click
        firstClicked = null;
        secondClicked = null;
    }
    
    ''' <summary>
    ''' This timer is started when the player clicks 
    ''' two icons that don't match,
    ''' so it counts three quarters of a second 
    ''' and then turns itself off and hides both icons
    ''' </summary>
    ''' <remarks></remarks>
    Private Sub Timer1_Tick() Handles Timer1.Tick
    
        ' Stop the timer
        Timer1.Stop()
    
        ' Hide both icons
        firstClicked.ForeColor = firstClicked.BackColor
        secondClicked.ForeColor = secondClicked.BackColor
    
        ' Reset firstClicked and secondClicked 
        ' so the next time a label is
        ' clicked, the program knows it's the first click
        firstClicked = Nothing
        secondClicked = Nothing
    
    End Sub
    

    Tick イベント ハンドラーは、3 つのことを実行します。まず、Stop() メソッドを呼び出してタイマーを停止します。The Tick event handler does three things: First, it makes sure the timer isn't running by calling the Stop() method. 次に、2 つの参照変数 firstClicked および secondClicked を使用して、プレーヤーがクリックした 2 つのラベルを再び非表示にします。Then it uses two reference variables, firstClicked and secondClicked, to make the icons of the two labels that the player chose invisible again. 最後に、firstClicked 参照変数と secondClicked 参照変数を null (Visual C# の場合) または Nothing (Visual Basic の場合) にリセットします。Finally, it resets the firstClicked and secondClicked reference variables to null in Visual C# and Nothing in Visual Basic. この手順は、プログラム自体がリセットされるしくみであるため重要です。This step is important because it's how the program resets itself. この時点では、Label コントロールが追跡されておらず、プレーヤーはラベルを再びクリックできる状態になっています。Now it's not keeping track of any Label controls, and it's ready for the player to choose a label again.

    注意

    Timer オブジェクトには、タイマーを開始する Start() メソッドと、タイマーを停止する Stop() メソッドがあります。A Timer object has a Start() method that starts the timer, and a Stop() method that stops it. [プロパティ] ウィンドウでタイマーの [Enabled] プロパティを [True] に設定した場合、タイマーはプログラムが起動するとすぐに時間を刻み始めます。When you set the timer's Enabled property to True in the Properties window, it starts ticking as soon as the program begins. 一方、[False] に設定したままにした場合、その Start() メソッドが呼び出されるまでは時間の刻みは始まりません。But when you leave it set to False, it doesn't start ticking until its Start() method is called. 通常、タイマーは、Interval プロパティを使用して、次に時間を刻むまでに待機するミリ秒数を判断し、その Tick イベントを繰り返し発生させます。Normally, a timer fires its Tick event over and over again, using the Interval property to determine how many milliseconds to wait between ticks. ここでは、タイマーの Stop() メソッドが Tick イベント内で呼び出されるしくみになっています。You may have noticed how the timer's Stop() method is called inside the Tick event. これにより、タイマーがワン ショット モードになります。つまり、Start() メソッドが呼び出されると、タイマーは指定された間隔分の時間を待機し、Tick イベントを 1 回発生させた後に、停止するようになります。That puts the timer into one shot mode, meaning that when the Start() method is called, it waits for the specified interval, triggers a single Tick event, and then stops.

  4. 新しいタイマーの動作を確認するには、コード エディターに移動し、label_Click() イベント ハンドラー メソッドの上部と下部に次のコードを追加します To see the new timer in action, go to the code editor and add the following code to the top and bottom of the label_Click() event handler method. (if ステートメントを、上部に 1 つ追加し、下部に 3 つ追加することになります。メソッドの他の部分は同じです)。(You're adding an if statement to the top, and three statements to the bottom; the rest of the method stays the same.)

    /// <summary>
    /// Every label's Click event is handled by this event handler
    /// </summary>
    /// <param name="sender">The label that was clicked</param>
    /// <param name="e"></param>
    private void label_Click(object sender, EventArgs e)
    {
        // The timer is only on after two non-matching 
        // icons have been shown to the player, 
        // so ignore any clicks if the timer is running
        if (timer1.Enabled == true)
            return;
    
        Label clickedLabel = sender as Label;
    
        if (clickedLabel != null)
        {
            // If the clicked label is black, the player clicked
            // an icon that's already been revealed --
            // ignore the click
            if (clickedLabel.ForeColor == Color.Black)
                return;
    
            // If firstClicked is null, this is the first icon
            // in the pair that the player clicked, 
            // so set firstClicked to the label that the player 
            // clicked, change its color to black, and return
            if (firstClicked == null)
            {
                firstClicked = clickedLabel;
                firstClicked.ForeColor = Color.Black;
                return;
            }
    
            // If the player gets this far, the timer isn't
            // running and firstClicked isn't null,
            // so this must be the second icon the player clicked
            // Set its color to black
            secondClicked = clickedLabel;
            secondClicked.ForeColor = Color.Black;
    
            // If the player gets this far, the player 
            // clicked two different icons, so start the 
            // timer (which will wait three quarters of 
            // a second, and then hide the icons)
            timer1.Start();
        }
    }
    
    ''' <summary>
    ''' Every label's Click event is handled by this event handler
    ''' </summary>
    ''' <param name="sender">The label that was clicked</param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub label_Click(ByVal sender As System.Object, 
                            ByVal e As System.EventArgs) Handles Label9.Click, 
        Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click,  
        Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, 
        Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click
    
        ' The timer is only on after two non-matching 
        ' icons have been shown to the player, 
        ' so ignore any clicks if the timer is running
        If Timer1.Enabled Then Exit Sub
    
        Dim clickedLabel = TryCast(sender, Label)
    
        If clickedLabel IsNot Nothing Then
            ' If the clicked label is black, the player clicked
            ' an icon that's already been revealed --
            ' ignore the click
            If clickedLabel.ForeColor = Color.Black Then Exit Sub
    
            ' If firstClicked is Nothing, this is the first icon 
            ' in the pair that the player clicked, 
            ' so set firstClicked to the label that the player 
            ' clicked, change its color to black, and return
            If firstClicked Is Nothing Then
                firstClicked = clickedLabel
                firstClicked.ForeColor = Color.Black
                Exit Sub
            End If
    
            ' If the player gets this far, the timer isn't 
            ' running and firstClicked isn't Nothing, 
            ' so this must be the second icon the player clicked
            ' Set its color to black
            secondClicked = clickedLabel
            secondClicked.ForeColor = Color.Black
    
            ' If the player gets this far, the player 
            ' clicked two different icons, so start the 
            ' timer (which will wait three quarters of 
            ' a second, and then hide the icons)
            Timer1.Start()
        End If
    
    End Sub
    

    メソッドの上部のコードは、Enabled プロパティの値をチェックして、タイマーが開始されているかどうかをチェックします。The code at the top of the method checks whether the timer was started by checking the value of the Enabled property. これにより、プレーヤーが 1 つ目と 2 つ目の Label コントロールをクリックした場合はタイマーが開始され、3 つ目のラベルをクリックした場合は何も実行されません。That way, if the player chooses the first and second Label controls and the timer starts, choosing a third label won't do anything.

    メソッドの下部のコードは、プレーヤーがクリックした 2 つ目の Label コントロールを追跡し、そのラベルのアイコンの色を黒に設定してアイコンを表示するように、secondClicked 参照変数を設定します。The code at the bottom of the method sets the secondClicked reference variable to track the second Label control that the player chose, and then it sets that label's icon color to black to make it visible. これにより、タイマーがワン ショット モードで開始され、750 ミリ秒待機してから、Tick イベントを 1 回発生させるようになります。Then, it starts the timer in one shot mode, so that it waits 750 milliseconds and then fires a single Tick event. その後で、タイマーの Tick イベント ハンドラーが 2 つのアイコンを非表示にし、firstClicked 参照変数と secondClicked 参照変数をリセットします。この時点で、プレーヤーはフォーム上で別の 1 組のアイコンをクリックできる状態になります。The timer's Tick event handler hides the two icons and resets the firstClicked and secondClicked reference variables so the form is ready for the player to choose another pair of icons.

  5. プログラムを保存し、実行します。Save and run your program. アイコンをクリックすると、そのアイコンが表示されます。Choose an icon, and it becomes visible.

  6. 別のアイコンをクリックします。Choose another icon. そのアイコンが一時的に表示され、その後、両方のアイコンが非表示になります。It appears briefly, and then both icons disappear. これを何度も繰り返します。Repeat this numerous times. これで、フォームで、クリックした 1 つ目と 2 つ目のアイコンが追跡され、タイマーを使用して、少し時間をおいてからアイコンが非表示にされるようになりました。The form now keeps track of the first and second icons that you choose, and uses the timer to pause before making the icons disappear.

続行または確認するにはTo continue or review