微信小程序实现简单的2048

时间:2024-03-02 13:33:03

  这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见。这里我从0到1赘述一下个人实现流程:

  首先去微信公平台(https://mp.weixin.qq.com/)注册一个小程序账号,注意:一个身份证好像只能注册5个小程序.然后登陆进入后台,进行相应的名称、头像等设置。我的如下:

后台设置

  然后在开发设置选项可以查看AppID和AppSecret,做好这些准备工作,就可以打开你的微信开发工具进行编程的奇幻之旅了。打开开发工具,注意最好选择一个空的目录,然后粘贴你的AppID,选择快速启动就可以了。恭喜你可以运行小程序看默认效果了。

  接下来,清空index.wxml,粘贴上我的代码(可以在 https://github.com/WangHao1221/mimi2048.git 荡下来,最好送我一颗小星星,谢啦!),在这里说一下,我把app.js做了简单的修改,用来获取用户信息,你也可以在app.json文件修改成你想要的方式,然后是在app.wxss里面加了一个简单的默认样式(注意我在wxss里面加的注释!)。注意:在config.js文件中我加了一句设置:"disableScroll": true,禁止页面滚动!

  最后是index.wxss和index.js这两个文件了,核心逻辑在js,这里我简单分析我的思路:

  1.首先是头部,获取头像昵称、然后是根据改昵称,设置最佳分数。

  2.头部布局问题,自己可以随意设置,重新开始按钮先设置上。

  3.也是最重要的,4*4的方格实现(wx:for)。

  4.onLoad里面要做的事情:获取用户信息;初始化方格数字;在方格中产生两个随机位置并赋值(2/4),这里一定要防止两次出现的位置相同或者该位置已经有数字!最后是初始化分数(this.setData()方法,既可以修改变量值还可以更改model)。

  5.手势,根据touch进行方向的判断(如果是点击,则不产生新的随机数)

    这里是核心,多啰嗦一点:触摸开始的时候获取起始点,然后是在move的时候判断是向哪个方向滑动,因为根据不同的方向,入参不一样,最后是end方法,我这里是把方格用0~15的下标进行标记,每一个数字带代表方格的位置。比如你向左滑动,那也就是说右边3列数字要向左合并或者移动,比如下面代码:0、4、8、12即为最左侧方格。

    this.mergeMove(3, 2, 1, 0)
    this.mergeMove(7, 6, 5, 4)
    this.mergeMove(11, 10, 9, 8)
    this.mergeMove(15, 14, 13, 12)

其他方向,以此类推。mergeMove是我封装的处理移动或者合并的方法,因为无论哪个方向,都会进行相同院里的操作。在mergeMove方法里面,要更新当前分数,判断当前游戏是否结束(方格满了,并且不能滑动了!),结束的时候,更新最佳成绩。最后附上游戏截图:

     

 

 

  这里就介绍这么多了,当然这里面会有一些bug,欢迎老铁们给出意见,还有就是这里没有服务器,所以肯定总欠缺一些东西,后续我会更新的。欢迎留言评论。