WeChat에서 개발한 2048 게임-위챗 개발-php.cn

WeChat에서 개발한 2048 게임

Y2J

풀어 주다： 2017-05-08 11:04:26

원래의

3090명이 탐색했습니다.

이번 WeChat 미니 프로그램 개발 튜토리얼에서는 WeChat 미니 프로그램을 사용하여 2048 미니 게임을 개발하는 방법을 소개합니다.

본 글은 크게 미니프로그램 본편과 미니게임 페이지 부분으로 나누어져 있습니다.

1. 미니프로그램 본편

미니 프로그램의 주요 부분은 세 개의 파일로 구성됩니다. 구성 요소는 다음과 같이 프로젝트의 루트 디렉터리에 있어야 합니다.

2. 미니 프로그램 공개 설정

2048 게임 홈페이지 한 페이지를 메인으로 등록

아아아아

2. 미니 게임 페이지 부분

2048 게임 미니 프로그램 페이지는 주로 다음과 같은 파일로 구성되어 있습니다.

1. 페이지 구조

페이지 구조 코드는 다음과 같습니다

App({
  onLaunch: function() { 
    // Do something initial when launch.  },
  onShow: function() {      // Do something when show.  },
  onHide: function() {      // Do something when hide.  },
  globalData: 'I am global data'})

로그인 후 복사

2. 스타일시트

스타일 코드는 다음과 같습니다

{
  "pages":[
    "pages/index/index"
    
  ],
  "window":{
    "navigationBarBackgroundColor":"#ffffff",
    "navigationBarTextStyle":"#1AAD16",
    "navigationBarTitleText":"2048游戏",
    "backgroundColor":"#eeeeee",
    "backgroundTextStyle":"light"  },

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000  },
  "debug": false
}

로그인 후 복사

3.페이지 로직 처리

<view class="container">

  <view class="game-body">
    <loading hidden="{{hidden}}">
        加载中...    </loading>
    <view class="heading">
          <text class="title">2048</text>
          <view class="scores-container">
            <view class="score-container">{{score}}</view>
              <view class="best-container">{{highscore}}</view>
          </view>
    </view>

    <view class="above-game">
          <text class="game-intro">你能拿到2048吗？</text>
          <text class="restart-button" bindtap="restart">新游戏</text>
    </view>

    <view class="game-container">
        <view class="game-message game-{{over ? (win ? &#39;won&#39; : &#39;over&#39;) : &#39;&#39;}}">
              <text class="over-msg">{{overMsg}}</text>
              <view class="lower">
                <!-- <text class="keep-playing-button">继续</text> -->
                  <text class="retry-button" bindtap="restart">再试一次</text>
            </view>
        </view>

        <view class="grid-container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
            <view wx:for="{{grids}}" wx:for-index="rowIdx" wx:for-item="row" class="grid-row">
                  <view wx:for="{{row}}" wx:for-index="colIdx" wx:for-item="cell" class="grid-cell">
                      <view class="tile tile-{{cell.value}}">
                          <view wx:if="{{cell}}" class="tile-inner">
                              {{cell.value}}                          </view>
                      </view>
                  </view>
            </view>
        </view>

      </view>
      <!-- <view class="game-explanation">
      <view class="important">如何开始：</view> 手指上下左右滑动
    </view> --></view></view>

로그인 후 복사

그 외

참고2048 게임의 원본 웹 버전에 일부 js 파일을 추가했습니다.

포함

게임 관리 game_manager.js

그리드 관리 Grid.js

로컬 저장소 관리 local_storage_manager.js

타일 관리 타일 .js

3. 프로그램 렌더링