手順 3: カウントダウン タイマーの追加

このチュートリアルの第 3 部では、クイズの受け手が完了するまでの残り秒数を追跡するためのカウントダウン タイマーを追加します。

注意

このトピックは、コーディングの基本概念に関するチュートリアル シリーズの一部です。 チュートリアルの概要については、「チュートリアル 2: 制限時間ありの計算クイズの作成」を参照してください。

カウントダウン タイマーを追加するには

  1. 前の手順と同様に、timeLeft という名前の整数変数を追加します。 コードは次のようになります。

    Public Class Form1
    
        ' Create a Random object called randomizer 
        ' to generate random numbers.
        Private randomizer As New Random
    
        ' These integer variables store the numbers 
        ' for the addition problem. 
        Private addend1 As Integer
        Private addend2 As Integer
    
        ' This integer variable keeps track of the 
        ' remaining time.
        Private timeLeft As Integer
    
    public partial class Form1 : Form
    {
        // Create a Random object called randomizer 
        // to generate random numbers.
        Random randomizer = new Random();
    
        // These integer variables store the numbers 
        // for the addition problem. 
        int addend1;
        int addend2;
    
        // This integer variable keeps track of the 
        // remaining time.
        int timeLeft;
    

    次に、指定した時間の後にイベントを生成する、タイマーのような、実際に秒をカウントするメソッドが必要になります。

  2. デザイン ウィンドウで、ツールボックスの [コンポーネント] カテゴリから Timer コントロールをフォームに移動します。

    このコントロールは、デザイン ウィンドウの下部にある灰色の領域に表示されます。

  3. フォーム上で、追加した [timer1] アイコンをクリックし、Interval プロパティを 1000 に設定します。

    間隔の値はミリ秒であるため、値が 1000 の場合は Tick イベントが毎秒生成されます。

  4. フォーム上で、Timer コントロールをダブルクリックするか、または Timer コントロールをクリックして Enter キーを押します。

    コード エディターが開き、追加した Tick イベント ハンドラーのメソッドが表示されます。

  5. 次のステートメントを新しいイベント ハンドラー メソッドに追加します。

    Private Sub Timer1_Tick() Handles Timer1.Tick
    
        If timeLeft > 0 Then
            ' Display the new time left
            ' by updating the Time Left label.
            timeLeft -= 1
            timeLabel.Text = timeLeft & " seconds"
        Else
            ' If the user ran out of time, stop the timer, show
            ' a MessageBox, and fill in the answers.
            Timer1.Stop()
            timeLabel.Text = "Time's up!"
            MessageBox.Show("You didn't finish in time.", "Sorry!")
            sum.Value = addend1 + addend2
            startButton.Enabled = True
        End If
    
    End Sub
    
    private void timer1_Tick(object sender, EventArgs e)
    {
        if (timeLeft > 0)
        {
            // Display the new time left
            // by updating the Time Left label.
            timeLeft = timeLeft - 1;
            timeLabel.Text = timeLeft + " seconds";
        }
        else
        {
            // If the user ran out of time, stop the timer, show
            // a MessageBox, and fill in the answers.
            timer1.Stop();
            timeLabel.Text = "Time's up!";
            MessageBox.Show("You didn't finish in time.", "Sorry!");
            sum.Value = addend1 + addend2;
            startButton.Enabled = true;
        }
    }
    

    追加されたステートメントに基づいて、タイマーは毎秒、timeLeft 整数変数が 0 より大きいかどうかを確認することで、残り時間がなくなっていないかどうかを確認します。 0 より大きい場合、時間はそのまま残ります。 タイマーは、まず timeLeft から 1 を減算し、次に残り秒数をクイズの受け手に示すために timeLabel コントロールの Text プロパティを更新します。

    残り時間がなくなると、タイマーは停止し、"Time's up!" と表示されるように timeLabel コントロールのテキストを変更します。 メッセージ ボックスはクイズが終了したことを知らせ、この場合、解答は addend1 と addend2 を加算することによって表示されます。 startButton コントロールの Enabled プロパティは、クイズの受け手が別の問題を開始できるように true に設定されます。

    ここでは、if else ステートメントを追加しました。これは、プログラムで条件判断を行うように指定するためのステートメントです。 if else ステートメントは次のようになります。

    注意

    次の例は例示のみを目的としています。プロジェクトに追加しないでください。

    If (something that your program will check) Then  
        ' One or more statements that will run  
        ' if what the program checked is true.   
    Else  
        ' One or more statements that will run  
        ' if what the program checked is false.  
    End If  
    
    if (something that your program will check)  
    {  
        // One or more statements that will run  
        // if what the program checked is true.   
    }  
    else  
    {  
        // One or more statements that will run  
        // if what the program checked is false.  
    }  
    

    加算問題の解答を表示するために else ブロックに追加したステートメントについて詳しく見てみましょう。

    sum.Value = addend1 + addend2
    
    sum.Value = addend1 + addend2;
    

    ステートメント addend1 + addend2 は 2 つの変数の値を加算します。 最初の部分 (sum.Value) は、sum NumericUpDown コントロールの Value プロパティを使用して正しい解答を表示します。 クイズの解答を確認するために後で同じプロパティを使用します。

    NumericUpDown コントロールを使用するとクイズの受け手がさらに簡単に数値を入力できるので、これを計算問題の解答のために使用します。 解答となる可能性があるものはすべて、0 ~ 100 の整数です。 [最小値][最大値]、および [DecimalPlaces] の各プロパティの既定値を残しておくと、クイズの受け手は小数、負の値、大きすぎる数を入力できなくなります (クイズの受け手が 3.141 は入力できるが、3.1415 は入力できないようにする場合は、DecimalPlaces プロパティを 3 に設定します)。

  6. StartTheQuiz() メソッドの最後に 3 行のコードを追加します。コードは次のようになります。

    ''' <summary>
    ''' Start the quiz by filling in all of the problem 
    ''' values and starting the timer. 
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub StartTheQuiz()
    
        ' Fill in the addition problem.
        ' Generate two random numbers to add.
        ' Store the values in the variables 'addend1' and 'addend2'.
        addend1 = randomizer.Next(51)
        addend2 = randomizer.Next(51)
    
        ' Convert the two randomly generated numbers
        ' into strings so that they can be displayed
        ' in the label controls.
        plusLeftLabel.Text = addend1.ToString()
        plusRightLabel.Text = addend2.ToString()
    
        ' 'sum' is the name of the NumericUpDown control.
        ' This step makes sure its value is zero before
        ' adding any values to it.
        sum.Value = 0
    
        ' Start the timer.
        timeLeft = 30
        timeLabel.Text = "30 seconds"
        Timer1.Start()
    
    End Sub
    
    /// <summary>
    /// Start the quiz by filling in all of the problem 
    /// values and starting the timer. 
    /// </summary>
    public void StartTheQuiz()
    {
        // Fill in the addition problem.
        // Generate two random numbers to add.
        // Store the values in the variables 'addend1' and 'addend2'.
        addend1 = randomizer.Next(51);
        addend2 = randomizer.Next(51);
    
        // Convert the two randomly generated numbers
        // into strings so that they can be displayed
        // in the label controls.
        plusLeftLabel.Text = addend1.ToString();
        plusRightLabel.Text = addend2.ToString();
    
    
        // 'sum' is the name of the NumericUpDown control.
        // This step makes sure its value is zero before
        // adding any values to it.
        sum.Value = 0;
    
        // Start the timer.
        timeLeft = 30;
        timeLabel.Text = "30 seconds"; 
        timer1.Start();
    }
    

    これで、クイズの開始時に、timeLeft 変数が 30 に設定され、timeLabel コントロールの Text プロパティが 30 seconds に変更されます。 次に、Timer コントロールの Start() メソッドがカウントダウンを開始します (解答の確認は次の手順で設定するため、まだ行われません)。

  7. プログラムを保存し、実行して、フォームの [Start] ボタンをクリックします。

    タイマーはカウント ダウンを開始します。 残り時間がなくなると、クイズが終了し、答えが表示されます。 次の図は実行中のクイズを示します。

    実行中の計算クイズ
    実行中の計算クイズ

続行または確認するには