微信小程序实现2048小游戏的详细过程

 更新时间:2021年09月30日 09:33:49   作者:诗一样的代码  
这篇文章主要给大家介绍了关于微信小程序实现2048小游戏的相关资料,文中将实现的代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下

效果图

实例代码

今天我们要用微信小程序实现2048小游戏,效果图如上面所示。游戏的规则很简单,你需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成为他们的和,每次操作之后会随机生成一个2或者4,最终得到一个“2048”的方块就算胜利了。

 // 构造一个空的矩阵[[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个格子。用Grid代表这些格子,然后这些格子还有一下这些操作:

   // 在空格子中随机挑选出一个格子
    randomAvailableCell: function() {
    
    // 获取可填充的格子坐标
    availableCells: function() {
    
    // 是否存在空单元格
    cellsAvailable: function() 
    
    /* 
     * 获取单元格内容
     * @param {object} cell {x:0,y:0} 单元格坐标
     */
    cellContent: function(cell) {

上面的函数都是为了使接下来开发更加简便,这样子就可以直接操作了。

 // 初始化数据
    addStartTiles: function() {
        for (var x = 0; x < this.startTiles; x++) {
            this.addRandomTiles();
        }
    },

    // 在一个随机单元格中随机填充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); // 插入一个单元格
        }

    },

一开始进行初始化数据,以90%机率产生2,以10%机率产生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
            };

        }

进行游戏手势开始移动和移动结束的操作,上面这一段主要是进行了手指移动方向的判断,最后是判断出了direction,传入this.GameManager.move(direction)进行移动操作。

这里面的难点在于数据结构的构建,只要把格子弄明白就比较好办。然后就是手指滑动的判断了,上面代码也比较清楚地展现了。

总结

到此这篇关于微信小程序实现2048小游戏的文章就介绍到这了,更多相关微信小程序2048小游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈JS和Nodejs中的事件驱动

    浅谈JS和Nodejs中的事件驱动

    这篇文章主要介绍了JS和Nodejs中的事件驱动,对事件驱动感兴趣的同学,可以参考下
    2021-05-05
  • 微信小程序实现搜索功能并跳转搜索结果页面

    微信小程序实现搜索功能并跳转搜索结果页面

    这篇文章主要为大家详细介绍了微信小程序实现搜索功能并跳转搜索结果页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 如何进行微信公众号开发的本地调试的方法

    如何进行微信公众号开发的本地调试的方法

    这篇文章主要介绍了如何进行微信公众号开发的本地调试的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • JavaScript封装axios的实现详解

    JavaScript封装axios的实现详解

    这篇文章主要介绍了JavaScript封装axios的实现,Axios是一个开放源代码库,使我们可以轻松地发出HTTP请求。 实际上,它是通过额外的超能力来fetch
    2022-09-09
  • js实现tab栏切换效果

    js实现tab栏切换效果

    这篇文章主要为大家详细介绍了js实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js实现鼠标跟随小游戏

    js实现鼠标跟随小游戏

    这篇文章主要为大家详细介绍了js实现鼠标跟随小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Cropper.js 实现裁剪图片并上传(PC端)

    Cropper.js 实现裁剪图片并上传(PC端)

    本案例是参考cropper站点实例,进行修改简化。接下来通过本文给大家分享Cropper.js 实现裁剪图片并上传(PC端) 功能,需要的朋友参考下吧
    2017-08-08
  • 如何正确理解javascript的模块化

    如何正确理解javascript的模块化

    模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯定会乱套,下面介绍几种JS的模块化的规范。
    2017-03-03
  • 微信小程序控制view隐藏显示的5种方法汇总

    微信小程序控制view隐藏显示的5种方法汇总

    在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面这篇文章主要给大家介绍了关于微信小程序控制view隐藏显示的5种方法,需要的朋友可以参考下
    2022-04-04
  • JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

    JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

    这篇文章主要介绍了JavaScript中英文字符长度统计方法,涉及javascript针对中英文字符的匹配与运算相关操作技巧,需要的朋友可以参考下
    2017-01-01

最新评论