微信小程序開發入門學習(1):石頭剪刀布小游戲

從今天起開始搗鼓小程序了2018-12-17   10:02:15

 

跟着教程做了第一個入門實例有興趣的朋友可以看看:

猜拳游戲布局

 

程序達到的效果

猜拳游戲的布局是縱向顯示了三個組件：文本組件（text）、圖像組件（image）和按鈕組件（button）。在創建小程序工程時，默認建立了兩個頁面：index 和 logs。我們不需要管 logs，在這個例子中只修改和 index 頁面相關的文件，index 是小程序第一個顯示的頁面，其中 index.wxml 文件是 index 頁面的布局文件.

修改index.wxml文件

<!--index.wxml-->
<view class='container'>
  <text class='finger_guess'>猜拳小游戲</text>
  <view class='userinfo'>
  <image class='userinfo-avater' src='{{imagePath}}' background-size='cover'/>
  <button bindtap='guess'>{{title}}</button>
  </view>
</view>

在這段代碼中，image 和 button 組件的內容都需要動態改變，所以 image 組件的 src 屬性和 button 組件的文本值（夾在 <button> 和 </button> 之間的部分）都分別於一個變量綁定，這是小程序的一個重要特性（和 React Native 完全相同）。在改變組件的屬性值時，並不需要直接獲取該組件的實例，而只需將該屬性與某個同類型的變量綁定，一旦該變量的值改變，屬性值也就會隨之改變了，綁定變量的格式是“{{變量名}}”。

 

接下來需要調整一下樣式文件index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 500rpx;
  height: 500rpx;
  margin: 40rpx;
  /* border-radius: 50%; */
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
 .finger_guessing {
   color: #F00;
   font-size: 30px;
   margin-top: 20px;
 } 

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 50rpx 0;
  box-sizing: border-box;
} 

 

當然，現在可能仍然無法顯示圖像，因為 imagePath 變量還沒有設置，而且圖像還沒有放到工程目錄。現在讀者可以到網上找三張圖片，分別是剪子、石頭和布，當然，也可以用本例提供的圖像，並在小程序工程根目錄建立一個 images 目錄，將三個圖片文件放到該目錄中。

 

控制剪子、石頭、布的快速切換

猜拳游戲的核心就是快速切換剪子、石頭、布三個圖像，當單擊“停止”按鈕后，會停到其中一個圖像上，這里涉及到如下兩個動作：

• 用定時器快速切換圖像。
• 圖像下方的按鈕，當一開始單擊時，文本變成了“停止”，當再次單擊該按鈕后，按鈕文本又變成了“開始”，也就是說，一個按鈕同時負責開始和停止圖像快速切換兩個動作。

控制圖像快速切換和按鈕文本變化兩個動作的代碼都要寫在 index.js 文件中。首先將這三個圖像文件名存儲在一個全局的數組中，並使用定時器快速從這個數組中依次循環獲取圖像文件名，並將該文件名指定的圖像顯示到 image 組件中，修改按鈕的文本只需要修改 title 變量即可。

這里涉及到兩個主要變量：imagePath 和 title，這兩個都定義在 data 對象中，單擊按鈕會執行 guess 函數（在 index.wxml 文件中使用 bindtap 屬性指定按鈕的單擊事件函數名），該函數也需要在 index.js 中編寫，完整的實現代碼如下：

//index.js
//獲取應用實例
var app = getApp()
//  在數組中存在三個圖像文件名
var imagePaths = ['../../images/石頭.png', '../../images/剪刀.png', '../../images/布.png'];
//  當前圖像的索引
var imageIndex = 0;

Page({
  data: {
    imagePath: imagePaths[0],  //  用於修改image組件顯示圖像的變量
    title: '開始',                //  用於改變按鈕文本的變量
    isRunning: false            //  該變量為true，表示圖像正在快速切換
  },
  //  定時器要執行的函數
  change: function (e) {
    //  更改當前圖像索引,當大於最大索引時，重新設為第一個索引值（已達到循環顯示圖像的目的）
    imageIndex=(imageIndex+1)%3;
    //  修改image組件要顯示的圖像（改變imagePath變量的值）
    this.setData(
      {
        imagePath: imagePaths[imageIndex]
      }
    )
  },
  //  點擊按鈕要執行的函數
  guess: function (e) {
    //  獲取isRunning變量的值
    let isRunning = this.data.isRunning;
    // 根據是否正在快速切換圖像，決定如何修改按鈕文本，以及是開啟定時器，還是移除定時器
    if (!isRunning) {
      this.setData(
        {
          title: '停止',
          isRunning: true
        }
      );
      //  開啟定時器（沒100毫秒調用一次change函數）
      this.timer = setInterval((function () {
        this.change()
      }).bind(this), 100);
    }
    else {
      this.setData(
        {
          title: '開始',
          isRunning: false
        }
      );
      //  移除定時器
      this.timer && clearInterval(this.timer);
    }
  }
})