微信小程序之2048小游戏（二）

前言

在本系列之前的文章中，我们已经对该小程序的主界面和全局配置方面进行了学习。因此，这篇文章主要对主要的游戏界面进行讨论。

思维图

程序界面图

页面结构

从思维图和界面图可以看出，该小程序的页面主要由五大部分构成。其中游戏文案部分是静态部件，不会发生任何改变；历史最高分数显示的是用户储存的最高游戏分数，它根据所储存的分数来进行变化；当前游戏分数是一个动态变化的部件，它随着游戏进行而不断的发生变化；新游戏是一个按钮，用来对游戏进行重置；游戏主画面是一个可用来显示和控制的区域。具体页面结构如下代码所示。

.wxml

<view class="container">

  <view class="game-body">
    // 是否显示“loading“提示文字，hidden由js脚本控制
    <loading hidden="{
    {hidden}}">
        加载中...
    </loading>
    <view class="heading">
      	<text class="title">2048</text>
      	<view class="scores-container">
      	    // 数据绑定，用来显示当前分数和最高分数
      	    // 这两个数据的值由js脚本进行推送
        	<view class="score-container">{
  {score}}</view>
      		<view class="best-container">{
  {highscore}}</view>
      	</view>
    </view>

    <view class="above-game">
      	<text class="game-intro">你能拿到2048吗？</text>
      	// “新游戏”按钮，绑定的响应函数为restart
      	<text class="restart-button" bindtap="restart">新游戏</text>
    </view>

    <view class="game-container">
        // 游戏结束显示
        // 其中的win和over由js脚本进行数据推送
        <view class="game-message game-{
    {over ? (win ? 'won' :