微信小程序｜使用小程序制作一个2048小游戏

文章目录

一、文章前言
二、创建小程序
三、功能开发

一、文章前言

此文主要通过小程序实现2048游戏，游戏操作简单，容易上手。
规则：正常打开游戏的界面，会只有两个2，每次移动后都会出现一个2，数字大了之后会出现4和8。
只有数字相同，才能够相加，每次相加之后都会变成原本的二倍，比如两个2相加变成4，两个4相加变成8。
使大数在一边，小数在一边，这样相同的数才能更好的结合在一起。

二、创建小程序

访问微信公众平台，点击账号注册。

选择小程序，并在表单填写所需的各项信息进行注册。

在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

三、功能开发

在创建的index这个page中，实现一个4*4的矩阵。

     <view class="grid-container" ><view  class="grid-row"><view class="grid-cell"><view class="tile tile"></view></view></view></view>

初始化矩阵数据，让其在页面加载时随机在两个方格上显示两个2。

  <view class="grid-container"><view wx:for="{{grids}}" wx:for-index="rowIdx" wx:for-item="row" class="grid-row"><view wx:for="{{row}}" wx:for-index="colIdx" wx:for-item="cell" class="grid-cell"><view class="tile tile-{{cell.value}}"><view wx:if="{{cell}}" class="tile-inner">{{cell.value}}</view></view></view></view></view>

外部JS

function Grid(size) {this.size = size;this.cells = this.empty();
}Grid.prototype = {// 构造一个空的矩阵[[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;},// 在空格子中随机挑选出一个格子randomAvailableCell: function() {var cells = this.availableCells();// 存在可填充的格子if (cells.length) {return cells[Math.floor(Math.random() * cells.length)];}},// 获取可填充的格子坐标availableCells: function() {var cells = [];for (var i = 0; i < this.size; i++) {for (var j = 0; j < this.size; j++) {// 当前格子无内容if (!this.cells[i][j]) {cells.push({x: i,y: j});}}}return cells;},// 是否存在空单元格cellsAvailable: function() {return !!this.availableCells().length;},cellAvailable: function(cell) {return !this.cellContent(cell);},insertTile: function(tile) {this.cells[tile.x][tile.y] = tile;},removeTile: function(tile) {this.cells[tile.x][tile.y] = null;},/* * 获取单元格内容* @param {object} cell {x:0,y:0} 单元格坐标*/cellContent: function(cell) {if (this.withinBounds(cell)) {return this.cells[cell.x][cell.y] || null;} else {return null;}},/** 空单元格，格子还未填充数字*/emptyCell: function(cell) {return !this.cellContent(cell);},withinBounds: function(cell) {return cell.x >= 0 && cell.x < this.size && cell.y >= 0 && cell.y < this.size;},eachCell: function(callback) {for (var x = 0; x < this.size; x++) {for (var y = 0; y < this.size; y++) {callback(x, y, this.cells[x][y]);}}}
}module.exports = Grid;

给遍历出来的矩阵方块增加bindtouchstart，bindtouchmove，bindtouchend等手指触摸响应事件。

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

在事件响应的同时记录分数。

      var highscore44 = wx.getStorageSync('highscore44') || 0;if (data.score > highscore44) {wx.setStorageSync('highscore44', data.score);}

   <view class="heading"><view class="scores-container"><view class="score-container">{{score}}</view><view class="best-container">{{highscore44}}</view></view></view>

在游戏结束的时候将分数存入小程序缓存，并获取之前的分数进行比对，判断是否最高分。

//-----------储存最高分-------------------------------------wx.getStorage({key: 'highscore44',success: function (res) {let highscore44 = res.datawx.setStorage({key: 'highscore44',data: highscore44,})},fail: () => {let highscore44 = []wx.setStorage({key: 'highscore44',data: highscore44,})}})

在页面增加重新开始按钮，并绑定对应的事件。

 <view class="above-game"><text class="restart-button" bindtap="restart">重新开始</text></view>

  // 重新开始restart: function () {this.updateView({grids: this.GameManager.restart(),over: false,won: false,score: 0});},

可以将分数通过云开发或者数据库的方式进行存储，将分数进行排行展示。

 rankInfo4x4: [{  name: '摔跤猫子', score: 180000, img: 'rank1.png' }, { name: 'siri', score: 163148, img: 'rank2.png' }, { name: 'kitten', score: 146088, img: 'rank3.png' },{ name: 'admin', score: 136024, img: 'rank4.png' },{ name: '无语小咪', score: 122908, img: 'rank5.png' },{  name: '汤姆', score: 115283, img: 'rank6.png' }],

实现分享功能，邀请好友一起玩。

//---------------/*** 用户点击右上角分享*/onShareAppMessage: function () {return {title: '诚邀你一起来挑战2048排行！',path: '/pages/index/index',}}
}

微信小程序｜使用小程序制作一个2048小游戏相关推荐

制作一个2048小游戏（大致思路步骤）
2048规则有16个格子,初始时会有两个格子上随机安放了两个数字(2或4). 每次可以选择上下左右其中一个方向去滑动,每滑动一次,所有的数字方块都会往滑动的方向靠拢. 每次滑动系统都会在空白格子上随 ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
微信小程序｜基于小程序+云开发制作一个租房小程序
经济发展的同时伴随着大批人群的流动,租房需求一直是持久不衰的话题,如何租好房,好租房,跟随此文一起制作一个租房小程序,让租房不再困难. 一.小程序 1. 创建小程序 2. 首页 3. 房源列表页 4. ...
用MFC制作一个倒计时小程序
用MFC制作一个倒计时小程序 1.思路: 1)初始步骤1:新建一个工程,选择MFC AppWizard(exe),工程名命名为CdTimer,选择基于对话框形式的应用程序,将此主对话框用于显示剩余的时 ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
python制作阴阳师脚本_利用python制作一个阴阳师小游戏
利用python制作一个阴阳师小游戏发布时间:2020-11-27 13:59:49 来源:亿速云阅读:84 这期内容当中小编将会给大家带来有关利用python制作一个阴阳师小游戏,文章内容丰富且 ...
python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
小福利，用Excel VBA编程制作一个变色小游戏
小福利,用Excel VBA编程制作一个变色小游戏设计思想:在正方形的四条边上都是设置循环函数,不断改变颜色和单元格里面的数值. Option ExplicitSub 按钮1_Click() Dim ...
PyQt5制作一个爬虫小工具，爬取雪球网上市公司的财务数据
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于可以叫我才哥 ,作者:可以叫我才哥最近有朋友需要帮忙写个爬虫脚本,爬取雪球网一些上 ...

微信小程序｜使用小程序制作一个2048小游戏

文章目录

一、文章前言

二、创建小程序

三、功能开发

微信小程序｜使用小程序制作一个2048小游戏相关推荐

最新文章

热门文章