这两天心血来潮,用微信小程序写了一个简单的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,欢迎老铁们给出意见,还有就是这里没有服务器,所以肯定总欠缺一些东西,后续我会更新的。欢迎留言评论。

微信小程序实现简单的2048的更多相关文章

  1. 微信小程序支付简单小结与梳理

    前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...

  2. 微信小程序实现简单的树形图treeview

    H5有很多树形图(树状图)的组件,echarts也有.比如像bootstrap的treeview,定制性很强.不过这些都无法方便地为小程序所用,除非整个页面用H5搭建再用webview框进去,有点粗暴 ...

  3. [转]微信小程序支付简单小结与梳理

    本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...

  4. 微信小程序_简单组件使用与数据绑定

    简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...

  5. 微信小程序之简单记账本开发记录(七)

    记账本已经可以实现添加和删除的功能 现在只需要将上述步骤重复一遍便可将另一个界面做出来. 大体上已制作完成,如果在细节上有变动会在这一篇更新 总体来说,这个作业让我对微信小程序的开发有了更多地认识,大 ...

  6. 微信小程序之简单记账本开发记录(一)

    下载并安装微信开发者工具 在选择开发记账本程序的时候犹豫着选择android studio还是微信小程序 最后选择了微信小程序,因其便利和快捷. 话不多说,第一步,下载并安装微信开发者工具.下面是教程 ...

  7. 微信小程序之简单记账本开发记录(二)

    1.打开开发者工具 2.从微信公众平台上获取到appid,或者使用测试号. 项目的大致目录如下: 一个小程序主体部分由三个文件组成,必须放在项目的根目录中 以app为开头的文件名用来布置作用于整个项目 ...

  8. 微信小程序一些简单的快捷键

    常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选 ...

  9. 微信小程序 table 简单测试

    <view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...

随机推荐

  1. JS实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始 ...

  2. Apache——配置与应用

    Apache配置与应用 1.概述 2.httpd服务支持的虚拟主机类型 3.构建虚拟Web主机 4.构建Web虚拟目录与用户授权限制 5.日志分割 6.AWStats分析系统 1.概述: 虚拟web主 ...

  3. MySQL事务以及存储引擎

    MySQL事务以及存储引擎 目录 MySQL事务以及存储引擎 一.事务 1. 事务的概念 2. 事务的ACID特点 (1)原子性 (2)一致性 (3)隔离性 ①事务之间的相互影响 ②MySQL事务支持 ...

  4. docker基础——2.镜像管理

    1. Docker镜像的主要特点 (1) 采用分层构建机制. 最底层为bootfs,用于系统引导的文件系统,包括bootloader和kernel,容器启动后会被卸载以节约资源. 其上为rootfs, ...

  5. docker | jenkins 实现自动化CI/CD,后端躺着把运维的钱挣了!(下)

    前言 在上一篇文章中,我们使用docker编写Dockerfile文件,将我们自己的项目构建成镜像,然后发布到Docker Hub中,并且用自己的云服务器拉取Docker Hub上我们自己上传的项目镜 ...

  6. 关于基于GDAL库QT软件平台下C++语言开发使用说明

    背景前提 地理空间数据抽象库(GDAL)是一个用于读取和编写栅格和矢量地理空间数据格式的计算机软件库,由开源地理空间基金会在许可的X / MIT风格免费软件许可下发布. 作为一个库,它为调用应用程序提 ...

  7. MySQL 快速入门(一)

    目录 MySQL快速入门 简介 存储数据的演变过程 数据库分类 概念介绍 MySQL安装 MySQL命令初始 环境变量配置 MySQL环境变量配置 修改配置文件 设置新密码 忘记密码的情况 基本sql ...

  8. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  9. suse 12 部署chrony时间同步服务器

    文章目录 1.ntp和chrony的区别 1.1.关于chrony 1.2.chronyd的优势 2.环境介绍 3.部署chrony 4.配置chrony 4.1.配置文件解析 4.2.查看chron ...

  10. JAVA8学习——Stream底层的实现一(学习过程)

    Stream底层的实现 Stream接口实现了 BaseStream 接口,我们先来看看BaseStream的定义 BaseStream BaseStream是所有流的父类接口. 对JavaDoc做一 ...