一、五秒挑戰游戲簡介及思考

制作iVX 低代碼項目需要進入在線IDE：https://editor.ivx.cn/

五秒挑戰游戲指的是點擊一個按鈕開始計時，隨后需要用戶再次點擊計時按鈕，將會停止計時，當計時的時間等于五秒時將挑戰成功，否則挑戰失敗，并且在挑戰失敗時將會提示超過了多少秒又或者還差多少秒。

此時我們分析該需求，有一個貫穿整個游戲的功能是計時，這個計時咱們可以通過觸發器進行制作，只需要設置觸發器的觸發間隔為0.1秒即可，因為咱們需要顯示分秒的內容，此時創建一個變量為分秒用于記錄分秒時間，每隔0.1秒時則使分秒變量加1，加1之后若當前分秒大于等于60就可以給與秒加1，所以對于這個秒我們也需要創建一個變量用于記錄，所以當創建一個秒變量后即可對其進行加1，最后將兩者顯示在頁面之上即可實現一個計時器的界面。

當界面實現后，我們還需要對應的對記錄數值進行判斷，判斷方式直接用過條件進行，此時使用秒數5減去當前記錄的時間若大于0，那么此時就還差多少秒到達五秒，若減去當前記錄秒數后是小于0的，則表示已經超出了多少秒，這樣就可以判斷是超過了還是還差多少時間，最后我們還需要注意，若5減去記錄秒數等于0后，還需要計算分秒值，分秒值相減等于0才可以說是完全到達了五秒。

二、頁面制作

此時我們開始制作當前頁面，創建一個相對應用項目后，點擊前臺創建一個頁面：

設置當前頁面的水平和垂直對齊為居中，方便接下來我們需要創建的行和列居中對齊：

接著創建一個行，并且設置這個行的寬高，寬小于當前界面寬即可左右居中：


此時頁面效果如下：

接著咱們需要往這個游戲區域行內添加文本，顯示對應的秒數和分秒內容：

此時頁面顯示如下，發現頁面并不對其：

此時我們需要創建一個對應的行對其進行包裹，并且設置這個行的垂直對齊為居中即可，首先創建行，并且把內容拖放其中：

由于行是默認寬度100%的，所以在此時咱們需要更改寬高為包裹：

接著更改這個行的垂直方向對其為底部：

此時頁面如下：

接著添加一個行，命名為計時，設置這個行的水平對其為居中：


接著調一下這個按鈕距離頂部的距離以及這個按鈕的樣式效果：

三、功能制作

在第一點中我們說過計時要觸發器，那么此時創建一個觸發器命名為計時觸發器：

設置時間間隔為0.01秒：

接著創建一個變量命名為分秒并且默認值為0：

給按鈕設置點擊事件，點擊后出發觸發器進行計時：

接著創建一個變量為秒：

當分秒等于60時給秒進行加1：

并且此時還需要對分秒置零：

最后由于我們的秒數在小于10的時候需要設置對應的0開頭的數字，所以此時再加上條件，小于10則在前面加個0否則就不加，秒也是一樣，我們查看代碼：

此時頁面效果如下：

開始計時后我們需要給這個按鈕顯示停止計時，此時一個布爾變量作為狀態監測，若當前狀態是開始游戲，那么文本就顯示停止計時，否則顯示開始計時，這樣是比較好做的。創建一個布爾變量：

接著在開始計時時設為true：

隨后給與文本綁定內容，若當前是否計時為false就顯示開始計時，否則顯示停止計時：

此時還需要到按鈕中添加對應時間的相斥：

此時頁面可以對這兩個值進行切換：

此時還可以優化一下，若是否計時等于true時能執行的內容以及為false時執行的內容：

接著我們判斷，如果在是否計時為true，也就是已經開始計時的時候若點擊了當前按鈕，那么肯定是要停止計時，那么此時開始判斷秒數，我們用4秒減計時的秒若為0并且用60減去分秒計時也為0那么就表示挑戰成功：

用4減的原因是你也有分秒值，分秒值60也是秒數，接著再判斷如果4減去秒數大于0，那就是還沒超過的情況，再接著判斷分秒的值是多少是剛好還是還沒到，如果到了那就是還差個整秒，否則就是還需要分秒值，那么此時就增加一個條件后再增加另外一個條件判斷分秒值即可：

那么最后再加一個超過分秒值的就解決了：

最后將秒數和分秒置零：

那么即可完成：