[2048]-WeChat Mini Program Development Tutorial-Introduction-Practical [2]

1. Introduction

The goal of this section: subtraction from the previous requirements analysis.
Target users: Students who have studied [Introduction] or students who have some programming experience.
Learning Objective: If 2048" is a page, let's get started!
Case Study: Mini Game 2048.
code download
Try it online (click me!!!)
Portal:

Contents: WeChat Mini Program Tutorial-Introduction-Soon Wechat Mini Program CommunityPrevious
Article: [2048]-WeChat Mini Program Tutorial-Introduction-Practical [1]-Soon WeChat Mini Program CommunityNext
Article: No.

2. Subtraction of requirements design I believe everyone has read the flow chart

in the previous section . I believe everyone has their own ideas and methods for how to develop their own 2048.
I also share my thoughts with you here. To do the subtraction, first do the vertical direction of the Y axis and the horizontal direction of the X axis.
Y-axis: zoom in/out at the level of granularity of business logic.
X-axis: Logical addition/subtraction of business logic in the same granularity level.
Then, after simplifying the Y-axis of [2048], it is a static page. After the x-axis is simplified, the grid is removed. The complexity is greatly reduced, Let's GO!

3. 2048 main page

implementation process: 1. The green navigation bar part.
2. The blue game frame part.

4. Navigation Bar

content

app.js is as follows:

//nothing to do
App({})

app.json is as follows:

{
  "pages":[
    "pages/2048/2048"    
  ],
  "window":{    
    "navigationBarBackgroundColor":"#ffffff",
    "navigationBarTextStyle":"#000000",
    "navigationBarTitleText": "Demo:2048",
    "backgroundTextStyle":"light"
  },
  "debug": false
}

[window] Navigation bar related settings.

app.wxss is empty.

2048.js is as follows:

//empty page
Page({})

2048.wxml, 2048wxss are all empty.

5. In the game frame part

, we only need to modify 2048.wxml, 2048.wxss

2048.wxml as follows:

<view class="container">

  <view class="game-body">
    <view class="heading">
              <text class="title">2048</text>
              <view class="scores-container">
                <view class="score-container"></view>
                      <view class="best-container"></view>
              </view>
    </view>

    <view class="above-game">
              <text class="game-intro">Can you get 2048? </text>
              <text class="restart-button">新游戏</text>
    </view>

    <view class="game-container">       
          </view>

</view>

We need to have a matching 2048.wxss, too much code will not be copied here. Please download the source code to view.

5. Summary

methodology: Y-axis, X-axis. Students who have time, please go and learn about the CSS styles involved. Don't get caught up in the details, but keep an awareness in mind.

6. It is announced

that the dismantling and coding of 2048 will continue in the next section.

[2048]-WeChat Mini Program Development Tutorial-Introduction-Practical [2]

Guess you like