今天代码君教大家做一款2048游戏，用微信小程序来做，话不多说，先上效果图

2048.gif
game.png

2048的实现

一、2048.js

var app = getApp();

var Grid = require('./grid.js');
var Tile = require('./tile.js');
var GameManager = require('./game_manager.js');

var config = {
    data: {
        hidden: false,

        // 游戏数据可以通过参数控制
        grids: [],
        over: false,
        win: false,
        score: 0,
        highscore: 0,
        overMsg: '游戏结束'
    },
    onLoad: function() {
        this.GameManager = new GameManager(4);

        this.setData({
            grids: this.GameManager.setup(),
            highscore: wx.getStorageSync('highscore') || 0
        });

    },
    onReady: function() {
        var that = this;

        // 页面渲染完毕隐藏loading
        that.setData({
            hidden: true
        });
    },

    // 更新视图数据
    updateView: function(data) {
        // 游戏结束
        if(data.over){
            data.overMsg = '游戏结束';
        }

        // 获胜
        if(data.win){
            data.overMsg = '恭喜';
        }

        this.setData(data);
    },

    // 重新开始
    restart: function() {
        this.updateView({
            grids: this.GameManager.restart(),
            over: false,
            won: false,
            score: 0
        });
    },

    touchStartClienX: 0,
    touchStartClientY: 0,
    touchEndClientX: 0,
    touchEndClientY: 0,
    isMultiple: false, // 多手指操作

    touchStart: function(events) {

        // 多指操作
        this.isMultiple = events.touches.length > 1;
        if (this.isMultiple) {
            return;
        }

        var touch = events.touches[0];

        this.touchStartClientX = touch.clientX;
        this.touchStartClientY = touch.clientY;

    },

    touchMove: function(events) {
        var touch = events.touches[0];
        this.touchEndClientX = touch.clientX;
        this.touchEndClientY = touch.clientY;
    },

    touchEnd: function(events) {
        if (this.isMultiple) {
            return;
        }

        var dx = this.touchEndClientX - this.touchStartClientX;
        var absDx = Math.abs(dx);
        var dy = this.touchEndClientY - this.touchStartClientY;
        var absDy = Math.abs(dy);

        if (Math.max(absDx, absDy) > 10) {
            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
            };

            var highscore = wx.getStorageSync('highscore') || 0;
            if(data.score > highscore){
                wx.setStorageSync('highscore', data.score);
            }

            this.updateView({
                grids: data.grids,
                over: data.over,
                won: data.won,
                score: data.score,
                highscore: Math.max(highscore, data.score)
            });

        }

    }
};

Page(config);

二、2048.wxml

<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 ? '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 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>

这里就先放上部分代码，wxss样式以及执行的js代码太多就不放上来了，想要全部源码的，关注公众号《代码集中营》回复2048获取源码

总结

这就是一款小游戏，读者可以拿来做练习用，导入项目就可以跑起来，玩着自己做的小游戏，会非常有成就感的~

建了一个小程序技术交流群，想入群的读者请加微信

小程序入群.png