IVX no code challenge five second game production

One 、 Introduction and thinking of the five second challenge game

Make iVX Low code projects need to go online IDE：https://editor.ivx.cn/

The five second challenge game refers to clicking a button to start timing , Then the user needs to click the timing button again , Will stop timing , When the timing time is equal to five seconds, the challenge will be successful , Otherwise, the challenge will fail , And when the challenge fails, you will be prompted how many seconds have passed or how many seconds are still missing .

At this point, we analyze the requirement , One feature that runs through the game is timing , This timing can be made by trigger , You only need to set the trigger interval to 0.1 Seconds will be enough. , Because we need to display the contents of minutes and seconds , At this time, create a variable as minutes and seconds to record minutes and seconds , every other 0.1 Second, add... To the minute second variable 1, Add 1 After that, if the current minute and second is greater than or equal to 60 You can give seconds plus 1, So for this second, we also need to create a variable to record , So when you create a second variable, you can add 1, Finally, you can realize a timer interface by displaying both on the page .

When the interface is implemented , We also need to judge the recorded values accordingly , The judgment method is directly based on conditions , Seconds used at this time 5 If the time of subtracting the current record is greater than 0, So how many seconds is it to five seconds , If it is less than after subtracting the current recording seconds 0 Of , It means that the number of seconds has been exceeded , In this way, we can judge whether it is over or how much time is still missing , Finally, we need to pay attention to , if 5 Minus the number of recording seconds equals 0 after , You also need to calculate the minutes and seconds , Subtracting minutes from seconds equals 0 It can be said that it has reached five seconds completely .

Two 、 Page making

At this point, we start to make the current page , After creating a relative application project , Click on the foreground to create a page ：

Set the horizontal and vertical alignment of the current page to center , So that we can center the rows and columns we need to create next ：

Then create a row , And set the width and height of the row , If the width is less than the current interface width, it can be centered left and right ：


At this time, the page effect is as follows ：

Then we need to add text to the line of the game area , Display the corresponding seconds and minutes and seconds ：

The page is displayed as follows , The discovery page does not ：

At this point, we need to create a corresponding row to wrap it , And set the vertical alignment of this row to the center , Create row first , And drag and drop the content ：

Because the row is the default width 100% Of , So at this time, we need to change the width and height to package ：

Then change the vertical direction of this row to the bottom ：

The page is as follows ：

Then add a row , Name it timing , Set the level of this row to center ：


Then adjust the distance from the top of the button and the style of the button ：

3、 ... and 、 Functional production

In the first point, we said that timing should be triggered , Then create a trigger named timing trigger ：

Set the time interval to 0.01 second ：

Then create a variable named minutes and seconds and the default value is 0：

Set click event for button , Click the trigger to start timing ：

Then create a variable called seconds ：

When minutes and seconds are equal to 60 Time is added to second 1：

And at this time, you need to set the minutes and seconds to zero ：

Finally, because our seconds are less than 10 You need to set the corresponding 0 Number at the beginning , So now add the condition , Less than 10 Then add a 0 Otherwise, it will not be added , The same goes for seconds , Let's look at the code ：

At this time, the page effect is as follows ：

After starting the timer, we need to display the stop timer for this button , In this case, a boolean variable is used as the condition monitoring , If the current state is to start the game , Then the text shows stop timing , Otherwise, start timing... Is displayed , This is easier to do . Create a boolean variable ：

Then set to... At the beginning of the timing true：

The text is then bound to the content , If the current timing is false Start timing is displayed , Otherwise, stop timing is displayed ：

At this time, you also need to add the corresponding time exclusion to the button ：

At this point, the page can switch between these two values ：

At this point, you can also optimize , If timing equals true The contents that can be executed and the contents that can be executed are false What to do when ：

Then we judge , If the timing is true, That is, if you click the current button when you have started timing , Then you must stop timing , Then start to judge the number of seconds , We use it 4 Second minus the second of the timer if 0 And use 60 Subtracting the minutes and seconds is also 0 That means the challenge is successful ：

use 4 The reason for the decrease is that you also have minutes and seconds , Minute second value 60 It's also the number of seconds , Then judge if 4 Subtracting seconds is greater than 0, That is the situation that has not been exceeded , And then judge whether the value of minutes and seconds is just right or not , If it does, it's a whole second away , Otherwise, it still needs minutes and seconds , Then add one condition and another condition to judge the minutes and seconds ：

Then add another one that exceeds the value of minutes and seconds to solve the problem ：

Finally, set the seconds and minutes to zero ：

Then you can complete ：