微信小程序——2048小游戏

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文
作业源代码	https://github.com/Maxttt-1/2048.git
学号 姓名	31701054 徐特
院系	浙大城院计算机系

 

 

 

 

 

 

 

 

 

 

 

前言

第一次学习做微信小程序，这个小程序的难点在于如何实现2048小游戏的功能。主要目的还是在于熟悉小程序开发的过程以及相关文件内容的理解，并熟悉git代码的管理流程,代码中已添加注释便于理解。

开发工具：微信开发者工具。

全局配置

小程序一共分为3个主要页面：首页 游戏界面以及日志界面，进入小程序后，首先显示首页，首页中间有一个开始游戏按钮，首页下方有游戏和日志两个按钮，用于在游戏和日志之间切换，点击游戏界面的开始游戏按钮，即可进入2048小游戏，并且开始游戏。

var config = {
    data: {
        disable: true,
        gameList: ['开始游戏']
    },

    onLoad: function() {
        var that = this
            //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })
    },
    onReady: function() {
        // 页面渲染完毕
    },
    onShow: function() {
        // 页面展示
    },
    onHide: function() {
        // 页面隐藏
    },
    onUnload: function() {
        // 页面关闭
    }
};

 

 

 

首页部分

首页中间有一个按钮，点击按钮可以开始游戏

   data: {
        disable: true,
        gameList: ['开始游戏']
    },

    onLoad: function() {
        var that = this
            //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })
    },
    onReady: function() {
        // 页面渲染完毕
    },
    onShow: function() {
        // 页面展示
    },
    onHide: function() {
        // 页面隐藏
    },
    onUnload: function() {
        // 页面关闭
    }
};

//设置属性名"startName"到相应游戏页面的映射
config.data.gameList.forEach(function(v) {
    config['start' + v] = function() {

        config.data.disable = true;

        // 这里需要注意每个游戏文件夹名称需和js名称保持一致
        wx.navigateTo({
            url: '../' + '2048' + '/' + '2048'
        })
    }

 

 

 

游戏部分 

　　游戏部分可以进行2048小游戏，规则很简单，通过手指滑动，将所有方块根据手指移动方向，数字相同的滑块将合并，合并一次获得分数，玩家争取在无法滑动前获得更高的分数。

onReady: function() {
        var that = this;

        // 页面渲染完毕隐藏loading
        that.setData({
            hidden: true
        });
    },
    onShow: function() {
        // 页面展示
    },
    onHide: function() {
        // 页面隐藏
    },
    onUnload: function() {
        // 页面关闭
    },

    // 更新视图数据
    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)
            });

        }

 

 

 日志部分

日志可以查看每一次打开游戏的事件，记录到系统日志中保存

 

 

 

总结与反思

 之前并没有接过小程序的开发，参考网络资料的较多，在内部运行的逻辑上还有挺多没理解掌握的，只能说时拼拼凑凑，但是还是有些收获的，知道了如何创建一个小程序以及运行小程序中需要的文件以及相关的代码语法，对于独立创建运行一个小程序还有好多路要走。