微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程

更新時(shí)間：2021年09月30日 09:33:49 作者：詩一樣的代碼

這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實(shí)現(xiàn)的代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

效果圖

實(shí)例代碼

今天我們要用微信小程序?qū)崿F(xiàn)2048小游戲，效果圖如上面所示。游戲的規(guī)則很簡單，你需要控制所有方塊向同一個(gè)方向運(yùn)動(dòng)，兩個(gè)相同數(shù)字方塊撞在一起之后合并成為他們的和，每次操作之后會(huì)隨機(jī)生成一個(gè)2或者4，最終得到一個(gè)“2048”的方塊就算勝利了。

 // 構(gòu)造一個(gè)空的矩陣[[null,..,size.length],[]]
    empty: function() {
        var cells = [];

        for (var x = 0; x < this.size; x++) {
            var row = cells[x] = [];

            for (var y = 0; y < this.size; y++) {
                row.push(null);
            }
        }

        // [[{x:0,y:0},{x:0,y:1}],[]]
        return cells;
    },

首先我們需要做的是把游戲主體分成16個(gè)格子。用Grid代表這些格子，然后這些格子還有一下這些操作：

   // 在空格子中隨機(jī)挑選出一個(gè)格子
    randomAvailableCell: function() {
    
    // 獲取可填充的格子坐標(biāo)
    availableCells: function() {
    
    // 是否存在空單元格
    cellsAvailable: function() 
    
    /* 
     * 獲取單元格內(nèi)容
     * @param {object} cell {x:0,y:0} 單元格坐標(biāo)
     */
    cellContent: function(cell) {

上面的函數(shù)都是為了使接下來開發(fā)更加簡便，這樣子就可以直接操作了。

 // 初始化數(shù)據(jù)
    addStartTiles: function() {
        for (var x = 0; x < this.startTiles; x++) {
            this.addRandomTiles();
        }
    },

    // 在一個(gè)隨機(jī)單元格中隨機(jī)填充2或4
    addRandomTiles: function() {

        if (this.grid.cellsAvailable()) {
            var value = Math.random() < 0.9 ? 2 : 4;
            var cell = this.grid.randomAvailableCell();
            var tile = new Tile(cell, value);
            this.grid.insertTile(tile); // 插入一個(gè)單元格
        }

    },

一開始進(jìn)行初始化數(shù)據(jù)，以90%機(jī)率產(chǎn)生2，以10%機(jī)率產(chǎn)生4。

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
            };

        }

進(jìn)行游戲手勢開始移動(dòng)和移動(dòng)結(jié)束的操作，上面這一段主要是進(jìn)行了手指移動(dòng)方向的判斷，最后是判斷出了direction，傳入this.GameManager.move(direction)進(jìn)行移動(dòng)操作。

這里面的難點(diǎn)在于數(shù)據(jù)結(jié)構(gòu)的構(gòu)建，只要把格子弄明白就比較好辦。然后就是手指滑動(dòng)的判斷了，上面代碼也比較清楚地展現(xiàn)了。