game score,over message

natee · Oct 3, 2016 · a1b5ce3 · a1b5ce3
1 parent fcbd4b1
commit a1b5ce3
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
 # wxapp-2048
-微信小程序2048
+基于[web版2048游戏](https://github.com/gabrielecirulli/2048)开发的微信小程序版2048，仅作交流学习用。
+
+### 界面展示
+
+![游戏界面](./images/game.png)
+
+### 使用方法
+
+1. 克隆本项目
+2. 在微信开发工具中添加项目
+3. 选择项目目录
+
+### 相关资源
+
+- [2048游戏](https://github.com/gabrielecirulli/2048)
+- [微信小程序资源](https://github.com/justjavac/awesome-wechat-weapp)
diff --git a/images/game.png b/images/game.png
diff --git a/pages/2048/2048.js b/pages/2048/2048.js
@@ -2,7 +2,6 @@ var app = getApp();
 
 var Grid = require('./grid.js');
 var Tile = require('./tile.js');
-// var InputManager = require('./keyboard_input_manager.js');
 var LocalStorageManager = require('./local_storage_manager.js');
 var GameManager = require('./game_manager.js');
 
@@ -12,8 +11,11 @@ var config = {
 
         // 游戏数据可以通过参数控制
         grids: [],
+        over: false,
+        win: false,
         score: 0,
-        highscore: 0
+        highscore: 0,
+        overMsg: '游戏结束'
     },
     onLoad: function() {
         this.GameManager = new GameManager(4, LocalStorageManager);
@@ -22,7 +24,6 @@ var config = {
             grids: this.GameManager.setup()
         });
 
-        console.log('初始化数据：', this.data.grids);
     },
     onReady: function() {
         var that = this;
@@ -42,15 +43,28 @@ var config = {
         // 页面关闭
     },
 
-    updateView: function(grids) {
-        this.setData({
-            grids: grids
-        });
+    // 更新视图数据
+    updateView: function(data) {
+        // 游戏结束
+        if(data.over){
+            data.overMsg = '游戏结束';
+        }
+
+        // 获胜
+        if(data.win){
+            data.overMsg = '恭喜';
+        }
+
+        this.setData(data);
     },
 
+    // 重新开始
     restart: function() {
-        this.setData({
-            grids: this.GameManager.restart()
+        this.updateView({
+            grids: this.GameManager.restart(),
+            over: false,
+            won: false,
+            score: 0
         });
     },
 
@@ -62,6 +76,7 @@ var config = {
 
     touchStart: function(events) {
 
+        // 多指操作
         this.isMultiple = events.touches.length > 1;
         if (this.isMultiple) {
             return;
@@ -91,11 +106,21 @@ var config = {
         var absDy = Math.abs(dy);
 
         if (Math.max(absDx, absDy) > 10) {
-            var newGrids = this.GameManager.move(absDx > absDy 
-                ? (dx > 0 ? 1 : 3) 
-                : (dy > 0 ? 2 : 0)) 
-            || this.data.grids;
-            this.updateView(newGrids);
+            var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);
+
+            var data = this.GameManager.move(direction) || {
+                grids: this.data.grids,
+                over: this.data.over,
+                won: this.data.won,
+                score: this.data.score
+            };
+
+            this.updateView({
+                grids: data.grids,
+                over: data.over,
+                won: data.won,
+                score: data.score
+            });
 
         }
 

diff --git a/pages/2048/2048.wxml b/pages/2048/2048.wxml
@@ -5,38 +5,38 @@
         加载中...
     </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>
+      	<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>
+      	<text class="game-intro">你能拿到2048吗？</text>
+      	<text class="restart-button" bindtap="restart">新游戏</text>
     </view>
 
     <view class="game-container">
-      <view class="game-message">
-        <text></text>
-        <view class="lower">
-	        <text class="keep-playing-button">继续</text>
-          	<text class="retry-button">再试一次</text>
+        <view class="game-message game-{{over ? (win ? 'won' : 'over') : ''}}">
+          	<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>
 
-      <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">
-          			<view wx:if="{{cell}}" class="tile-inner">
-	          			{{cell.value}}
-	          		</view>
-          		</view>
-          	</view>
-        </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">

diff --git a/pages/2048/2048.wxss b/pages/2048/2048.wxss
@@ -110,7 +110,7 @@ hr {
   box-sizing: border-box;
 }
 .game-container .game-message {
-  display: none;
+  /*display: none;*/
   position: absolute;
   top: 0;
   right: 0;
@@ -142,14 +142,14 @@ hr {
   line-height: 42px;
   margin-left: 9px;
 }
-.game-container .game-message a.keep-playing-button {
+.game-container .game-message .keep-playing-button {
   display: none;
 }
 .game-container .game-message.game-won {
   background: rgba(237, 194, 46, 0.5);
   color: #f9f6f2;
 }
-.game-container .game-message.game-won a.keep-playing-button {
+.game-container .game-message.game-won .keep-playing-button {
   display: inline-block;
 }
 .game-container .game-message.game-won, .game-container .game-message.game-over {
@@ -491,18 +491,20 @@ hr {
     text-align: center;
 
   }
-  .game-container .game-message p {
-    font-size: 60px;
+  .game-container .game-message .over-msg {
+    display: block;
+    font-size: 30px;
     font-weight: bold;
-    height: 60px;
-    line-height: 60px;
-    margin-top: 222px;
+    height: 30px;
+    line-height: 30px;
+    /*margin-top: 222px;*/
+    margin-top: 59px;
   }
   .game-container .game-message .lower {
     display: block;
     margin-top: 59px;
   }
-  .game-container .game-message a {
+  .game-container .game-message .retry-button {
     display: inline-block;
     background: #8f7a66;
     border-radius: 3px;
@@ -513,14 +515,14 @@ hr {
     line-height: 42px;
     margin-left: 9px;
   }
-  .game-container .game-message a.keep-playing-button {
+  .game-container .game-message .keep-playing-button {
     display: none;
   }
   .game-container .game-message.game-won {
     background: rgba(237, 194, 46, 0.5);
     color: #f9f6f2;
   }
-  .game-container .game-message.game-won a.keep-playing-button {
+  .game-container .game-message.game-won .keep-playing-button {
     display: inline-block;
   }
   .game-container .game-message.game-won, .game-container .game-message.game-over {

diff --git a/pages/2048/game_manager.js b/pages/2048/game_manager.js
@@ -15,7 +15,6 @@ GameManager.prototype = {
         this.over = false;
         this.won = false;
         this.addStartTiles();
-        // this.actuate();
         return this.grid.cells;
     },
 
@@ -39,34 +38,18 @@ GameManager.prototype = {
     },
 
     actuate: function() {
-        return this.grid.cells;
-        // this.actuator.actuate(this.grid, {
-        //     score: this.score,
-        //     over: this.over,
-        //     won: this.won
-        // });
+
+        return {
+            grids: this.grid.cells,
+            over: this.over,
+            won: this.won,
+            score: this.score
+        }
     },
 
     // 偏移向量
     getVector: function(direction) {
-        // var map = {
-        //     0: { // 上
-        //         x: 0,
-        //         y: -1
-        //     },
-        //     1: { // 右
-        //         x: 1,
-        //         y: 0
-        //     },
-        //     2: { // 下
-        //         x: 0,
-        //         y: 1
-        //     },
-        //     3: { // 左
-        //         x: -1,
-        //         y: 0
-        //     }
-        // };
+
         var map = {
             0: { // 上
                 x: -1,