Page 6: Let’s look at the make-up of this game

[ashimo]

Let’s look at the make-up of this game



1. 'let' variable declaration and 'DateTime' date operation

Code:

let start-time:#DateTime

The above declares the variables that are used by the program. The DateTime class is used for date or time-related operations. The program will use this variable to save the time at which the start button is pressed. Pay close attention to the variable declaration.

For the variables that we have seen so far, the declaration has taken this format:

let variable_name:type_name = initial_value.

We can, however, omit the = initial_value part. When the type is int, omitting the initial value results in the variable being set to 0. We refer to int and bool as “primitive” types. Whenever we omit the initial value for variables of these types, a standard default value is used.

In our example, if we don’t specify an initial value, the variable is set to a value that we call null. To declare that null can be substituted for a variable, we have to prefix the type name with # as in #DateTime.

---

null

null indicates that, at this instant, this variable does not refer to any object.

---

3. add-event-handler method: start-btn

Code:

{start-btn.add-event-handler
    {on Action do
        set start-time = {DateTime}
    }
}

In previous examples, event handlers have been added immediately after an object is created. In this example, we did not add the event handler when we create the CommandButton. Instead, we used the add-event-handler method to add the event handler later. By adding a variable name, we can use that name to add an event handler later.

In our example here, pressing the 'Start' button causes the current time to be set as the value for the start-time variable.

3. add-event-handler method: stop-btn

Code:

{stop-btn.add-event-handler
    {on Action do
        ...
    }
}

In the same way as in (2), an event handler is also added to stop-btn. The event handler performs the following processing.

Code:

[list]
[*](3)-1   Acquires the length of time that elapses after start-btn is pressed.
[*](3)-2   Determines a score based on the elapsed time.
[*](3)-3   Displays a message
[/list]
Below, we’ll look at these in order.

[size=large][font=Arial][b]3-1. Use “elapsed” method to acquire the length of time that elapses after start-btn is pressed.[/b][/font][/size]

[code]{on Action do
    let elapsed-time:Time = {start-time.elapsed}
    let time-double:double = elapsed-time / 1s
    ...
}

DateTime uses a method called “elapsed” to acquire the length of time since the creation of the DateTime object. That time is given in seconds. A method is a function that defines a behavior of a class.

3-2. Use 'switch' expression to calculate a score.

Code:

let score:int = {switch time-double using <=
                 case 10 do (time-double * 10) asa int
                 case 20 do {abs ((20 - time-double) * 10) asa int}
                 else 0
                }

If we say that exactly 10s is worth a score of 100, a high score will be given for attempts close to 10s. First, the type of the elapsed time data is converted from a time into a real number. Also, at the switch branch, a score is determined. When the elapsed time is within 10s, a score is obtained by multiplying the converted time by 10. When the elapsed time is between 10s and 20s, a score is obtained by subtracting the converted time from 20 and then multiplying the result by 10. For more than 20s, the score is 0.

---

if

Code:

{if condition-1 then
    code-block-1
elseif condition-2 then
    code-block-2
elseif condition-3 then
    code-block-3
    ...
elseif condition-n then
    code-block-n
    [else
     code-block-n+1]
}

where

• condition-1, condition-2, ...: are Boolean expressions.
  
• code-block-1, code-block-2, ...: each consist of one or more Curl language expressions.
  

---

---

Switch Expression Syntax

The switch expression has the following syntax:

Code:

{switch compare-expr [using compare-operator]
case value-1 do
    code-block-1
case value-2 do
    code-block-2
    ...
case value-n do
    code-block-n
  [else code-block-n+1]
}

where

• compare-expr, value-1, value-2, value-n: are Curl language expressions. These expressions can evaluate to any Curl language type.
  
• compare-operator: is the operator that the Curl language uses when comparing compare-expr to value-1, value-2, and so on. When the comparison operator is omitted, “==” is used.
  
• code-block-1, code-block-2, code-block-n: consist of one or more Curl language expressions.
  

---

Now, let’s consider the usage the switch expression. This expression sets the initial value of the variable declared in the let phrase. if and switch expressions that include an else clause can return a value.

In our example, the values coded after do and else are used to initialize the variable score.

3-3. Displays a message.

Code:

{popup-message {VBox
                   {center font-size = 20pt, You have {value score} points! ! },
                   {center {value {start-time.elapsed}}}
               }
}

A message containing the score is displayed as a pop-up. popup-message is not limited to displaying character strings, but can also display graphical objects. Here, the VBox graphical container is displayed.


4. Creating a screen layout with 'VBox'

Code:

{VBox
    margin = 10pt,
    spacing = 10pt,
    halign = center,
    {bold Try to stop in 10 seconds},
    start-btn,
    stop-btn
}

If we look at this expression in its entirety, we find that it is enclosed in large value expression. This creates a code block. Each value expression can itself contain multiple expressions. However, when there are multiple expressions, the result for the final expression is returned and displayed on the screen. For this example, the final expression begins with VBox.

VBox is a graphical container that is used to arrange objects vertically. The first three lines in this expression specify option values, which specify the VBox margins and the spacing between objects. The expression coded with bold appears in the VBox, along with start-btn and stop-btn. These are arranged vertically.