手順 3: カウントダウン タイマーの追加Step 3: Add a Countdown Timer

このチュートリアルの第 3 部では、クイズの受け手が完了するまでの残り秒数を追跡するためのカウントダウン タイマーを追加します。In the third part of this tutorial, you'll add a countdown timer to track the number of seconds that remain for the quiz taker to finish.

注意

このトピックは、コーディングの基本概念に関するチュートリアル シリーズの一部です。This topic is part of a tutorial series about basic coding concepts. チュートリアルの概要については、「チュートリアル 2: 制限時間ありの計算クイズの作成」を参照してください。For an overview of the tutorial, see Tutorial 2: Create a Timed Math Quiz.

カウントダウン タイマーを追加するにはTo add a countdown timer

  1. 前の手順と同様に、timeLeft という名前の整数変数を追加します。Add an integer variable that's named timeLeft, just like you did in the previous procedure. コードは次のようになります。Your code should look like the following.

    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;
    

    次に、指定した時間の後にイベントを生成する、タイマーのような、実際に秒をカウントするメソッドが必要になります。Now you need a method that actually counts the seconds, such as a timer, which raises an event after the amount of time that you specify.

  2. デザイン ウィンドウで、ツールボックスの [コンポーネント] カテゴリから Timer コントロールをフォームに移動します。In the design window, move a Timer control from the Components category of the Toolbox to your form.

    このコントロールは、デザイン ウィンドウの下部にある灰色の領域に表示されます。The control appears in the gray area at the bottom of the design window.

  3. フォーム上で、追加した [timer1] アイコンをクリックし、Interval プロパティを 1000 に設定します。On the form, choose the timer1 icon that you just added, and set its Interval property to 1000.

    間隔の値はミリ秒であるため、値が 1000 の場合は Tick イベントが毎秒生成されます。Because the interval value is milliseconds, a value of 1000 causes the Tick event to fire every second.

  4. フォーム上で、Timer コントロールをダブルクリックするか、または Timer コントロールをクリックして Enter キーを押します。On the form, double-click the Timer control, or choose it and then choose the Enter key.

    コード エディターが開き、追加した Tick イベント ハンドラーのメソッドが表示されます。The code editor appears and displays the method for the Tick event handler that you just added.

  5. 次のステートメントを新しいイベント ハンドラー メソッドに追加します。Add the following statements to the new event handler method.

    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 より大きいかどうかを確認することで、残り時間がなくなっていないかどうかを確認します。Based on what you added, the timer checks each second whether time has run out by determining whether the timeLeft integer variable is greater than 0. 0 より大きい場合、時間はそのまま残ります。If it is, time still remains. タイマーは、まず timeLeft から 1 を減算し、次に残り秒数をクイズの受け手に示すために timeLabel コントロールの Text プロパティを更新します。The timer first subtracts 1 from timeLeft and then updates the Text property of the timeLabel control to show the quiz taker how many seconds remain.

    残り時間がなくなると、タイマーは停止し、"Time's up!" と表示されるように timeLabel コントロールのテキストを変更します。If no time remains, the timer stops and changes the text of the timeLabel control so that it shows Time's up! メッセージ ボックスはクイズが終了したことを知らせ、この場合、解答は addend1 と addend2 を加算することによって表示されます。A message box announces that the quiz is over, and the answer is revealed—in this case, by adding addend1 and addend2. startButton コントロールの Enabled プロパティは、クイズの受け手が別の問題を開始できるように true に設定されます。The Enabled property of the startButton control is set to true so that the quiz taker can start another quiz.

    ここでは、if else ステートメントを追加しました。これは、プログラムで条件判断を行うように指定するためのステートメントです。You just added an if else statement, which is how you tell programs to make decisions. if else ステートメントは次のようになります。An if else statement looks like the following.

    注意

    次の例は例示のみを目的としています。プロジェクトに追加しないでください。The following example is for illustration only-don't add it to your project.

    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 ブロックに追加したステートメントについて詳しく見てみましょう。Look closely at the statement that you added in the else block to show the answer to the addition problem.

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

    ステートメント addend1 + addend2 は 2 つの変数の値を加算します。The statement addend1 + addend2 adds the values in the two variables together. 最初の部分 (sum.Value) は、sum NumericUpDown コントロールの Value プロパティを使用して正しい解答を表示します。The first part (sum.Value) uses the Value property of the sum NumericUpDown control to display the correct answer. クイズの解答を確認するために後で同じプロパティを使用します。You use the same property later to check the answers for the quiz.

    NumericUpDown コントロールを使用するとクイズの受け手がさらに簡単に数値を入力できるので、これを計算問題の解答のために使用します。Quiz takers can enter numbers more easily by using a NumericUpDown control, which is why you use one for the answers to the math problems. 解答となる可能性があるものはすべて、0 ~ 100 の整数です。All of the potential answers are whole numbers from 0 through 100. [最小値][最大値]、および [DecimalPlaces] の各プロパティの既定値を残しておくと、クイズの受け手は小数、負の値、大きすぎる数を入力できなくなります By leaving the default values of the Minimum, Maximum, and DecimalPlaces properties, you ensure that quiz takers can't enter decimals, negative numbers, or numbers that are too high. (クイズの受け手が 3.141 は入力できるが、3.1415 は入力できないようにする場合は、DecimalPlaces プロパティを 3 に設定します)。(If you wanted to allow quiz takers to enter 3.141 but not 3.1415, you could set the DecimalPlaces property to 3.)

  6. StartTheQuiz() メソッドの最後に 3 行のコードを追加します。コードは次のようになります。Add three lines to the end of the StartTheQuiz() method, so the code looks like the following.

    ''' <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 に変更されます。Now, when your quiz starts, the timeLeft variable is set to 30 and the Text property of the timeLabel control is set to 30 seconds. 次に、Timer コントロールの Start() メソッドがカウントダウンを開始します Then the Start() method of the Timer control starts the countdown. (解答の確認は次の手順で設定するため、まだ行われません)。(The quiz doesn't check the answer yet—that comes next.)

  7. プログラムを保存し、実行して、フォームの [Start] ボタンをクリックします。Save your program, run it, and then choose the Start button on the form.

    タイマーはカウント ダウンを開始します。The timer starts to count down. 残り時間がなくなると、クイズが終了し、答えが表示されます。When time runs out, the quiz ends, and the answer appears. 次の図は実行中のクイズを示します。The following illustration shows the quiz in progress.

    実行中の計算クイズMath quiz in progress
    実行中の計算クイズMath quiz in progress

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