苏州培训网站建设,网站产品 模块,建设环评备案登记网站,商务网页设计与制作实训报告还记得小时候玩过的经典拼图游戏吗#xff0c;上小学时#xff0c;在路边摊用买个玩具#xff0c;是一个正方形盒子形状#xff0c;里面装的是图片分割成的很多块#xff0c;还差一块#xff0c;怎么描述好呢#xff0c;和魔方玩具差不多#xff0c;有没有听说叫二维的…还记得小时候玩过的经典拼图游戏吗上小学时在路边摊用买个玩具是一个正方形盒子形状里面装的是图片分割成的很多块还差一块怎么描述好呢和魔方玩具差不多有没有听说叫二维的魔方这里用小程序把它实现有感兴趣的同学可以来看看
准备
此文章适合新手学习使用小程序开发的读者阅读哦
会使用微信开发着工具或使用HbuilderX工具会做uniapp项目需要熟悉 HTML5 Canvas适合新手入门
开始吧在电脑上把微信开发者工具打开选择新建项目最后点确定
选择小程序再点击符号新建选择 使用测试号没有自己申请一个选择 不使用云服务选择模板 JavaScript 基础模板 新建项目后有生成了一堆东西不用管它接下来将在这基础上添加代码 页面制作
首先要做的小程序页面同下面这样
二维平面图片上的块一开始是打乱的需要把它转正到整个图片刚好看着没问题这个过程叫拼图游戏 移动图片拼到正确就算攻关完成过程时间越短越厉害训练大脑是个益智游戏 第一个页面
第一个页面是pages/index/index/wxml在里面加了一个表单form还有提交按钮button form-typesubmit点击开始游戏相信很多同学都会自己写布局这里不展开讲
在第一个页面的pages/index/index.js里点击按钮事件里写开始游戏逻辑就是打开第二个页面很简单的这里不展开讲 具体的可以看文章的项目源码放在文章结尾可以找到 点开始游戏前给第二个页面传入游戏配置相关的两个参数即可
网格列数 cols3选择图片 bgImg默认本地图片路径
第二个页面
第二个页面是pages/game/game.wxml,布局很简单只需要以下几个元素标签其中画布canvas标签才是主要的
view classcontentcanvas type2d idcanvA classcanvas bindtouchstartonTouchStart bindtouchmoveonTouchMove bindtouchendonTouchEnd /canvasview classpaddingtext⏰游戏用时{{timerNum}}s/text/viewview classpaddingbutton classbtn sizemini bindtaponClick data-keyhelpicon classicon typeinfo/icon text游戏说明/text/buttonbutton classbtn sizemini bindtaponClick data-keyrestarticon classicon typeclear/icon text重新开始/text/button/view
/view还有页面相关的样式写在pages/game/game.wxss里达到显示效果 游戏逻辑
初始化
接下来在pages/game/game.js写实现画布canvas的初始化逻辑代码如下
Page({/*** 页面的初始数据*/data: {//游戏配置config:{cols:3,bgImg:/static/1677722908380.jpg},//计时数timerNum:0,},/*** 生命周期函数--监听页面加载*/onLoad(options) {const changel this.getOpenerEventChannel();if(changel changel.once) {//接收游戏配置参数changel.once(args,res{const { cols, bgImgSrc } res;this.data.config.cols cols;this.data.config.bgImg bgImgSrc;this.initCanvas();})}else{this.initCanvas();}},/*** 生命周期函数--监听页面卸载*/onUnload() {//清除所有计时器if(this.data.timer){clearTimeout(this.data.timer);}if(this.data.gameTimer){clearInterval(this.data.gameTimer);}},/*** 初始化游戏画布canvas*/initCanvas(){wx.createSelectorQuery().select(#canvA).fields({ size:true, node:true },res{const { node, width, height } res;node.width width;node.height height;//使用游戏配置 const { cols, bgImg } this.data.config;//计算网格大小和边距const gs Math.trunc(width/cols);const padding Math.trunc(width%cols/2);//设置画布相关的数据this.data.canvas {node, width, height, padding,gridSize: gs,context: node.getContext(2d),};//异步处理加载图片Promise.resolve({then(resolve,reject) {let img node.createImage();img.onloadfunction () {resolve(img)};img.onerrorreject;img.srcbgImg;}}).then(res{//分割图片方法this.splitImg(res.currentTarget || res);//重绘方法this.reDraw();//开始计时this.data.gameTimer setInterval(() {if(this.data.isEnd) {clearInterval(this.data.gameTimer);this.data.gameTimernull;return;}this.setData({timerNum:this.data.timerNum1})},1000)}).catch(err{console.error(err)})}).exec();},//...
})分割图片
初始化的方法中还调用了一些方法
这里主要讲分割图片splitImg(bgImg)和重新绘制reDraw(isRest)方法展开说明代码如下
const AnimationUpdateDelay10;//更新动画延迟ms
const MovingPixelsOffset5;//每次动画移动的单位距离pxPage({//.../*** 清除画布*/clearBg(){//...},/*** 分割图片* param String - bgImg 背景图片元素*/splitImg(bgImg){const { cols } this.data.config;const { width, height, context:c, gridSize:gs, padding } this.data.canvas;this.clearBg();//绘制背景图片c.drawImage(bgImg,0,0,width,height);//定义网格集合const grids [];for(let y0; ycols; y){for(let x0; xcols; x){const grid {//定义网格数据...};c.rect(grid.left,grid.top,gs,gs);grids.push(grid);}}//绘制网格c.stroke();//定义分割后的图片集合let imgs [];let lastIndex;grids.forEach(function (g,i) {//将部分区域弄个图片集合中...});imgs.forEach(function (img,i) {//将每个图片弄到网格集合中...});//设置最后的空白位置图片索引this.data.lastIndex lastIndex;//设置网格集合this.data.canvas.grids grids;},/*** 重绘画布方法* param Boolean - isRest 是否重置*/reDraw(isRest){const { lastIndex } this.data;const { width, height, context:c, grids, gridSize:gs } this.data.canvas;this.clearBg();//绘制网格上的图片grids.forEach(function (g,i) {if(isRest) {//重置网格数据...}//绘制网格...});//绘制出来c.rect(0,0,width,height);c.stroke();},//...
})游戏交互
接下来实现游戏的交互逻辑处理用户点击某按钮
还有获取用户点击触摸某图片再处理下一步逻辑代码如下
Page({//.../*** 按钮点击事件处理*/onClick(e){//...},/*** 重新开始游戏*/reStart(){//...},/*** 在画布中开始触摸事件*/onTouchStart(e){this.data.touch e.touches[0];},/*** 在画布中触摸并移动事件*/onTouchMove(e){this.onTouchStart(e)},/*** 在画布中不再触摸时事件*/onTouchEnd(){const { touch, lastIndex, isAnimation, isEnd } this.data;//如果哦没有触摸或在动画中或已经结束就直接返回不处理if(!touch || isAnimation || isEnd) return;const { grids, gridSize:gs } this.data.canvas;//获取在画布触摸到某图片的索引let gIndex grids.findIndex(function (g) {//判断符合条件的某网格图片...});//如果触摸的是空白位置直接返回不处理if(gIndexlastIndex) return;let grid grids[gIndex];let lastGrid grids[lastIndex];//定义移动方向的偏移数据let offsetMove;if (grid.xlastGrid.x){//设置左右移动...}else if(grid.ylastGrid.y){//设置上下移动...}//如果没有可移动的直接返回不处理if (!offsetMove) return;//...处理交换图片后更新索引this.data.lastIndex gIndex;//开始移动图片动画this.startMoveAnimation(lastIndex,offsetMove);},//...
})游戏动画
这里实现开始移动动画的效果
开始移动图片的方法是startMoveAnimation(lastIndex,offsetMove)实现稍微复杂一点逻辑代码如下
const AnimationUpdateDelay10;//更新动画延迟ms
const MovingPixelsOffset5;//每次动画移动的单位距离pxPage({//.../*** 开始移动图片动画*/startMoveAnimation(lastIndex,offsetMove){const { grids, gridSize:gs, node:canvas } this.data.canvas;//定义移动单位距离const offset MovingPixelsOffset;const activeGrid grids[lastIndex];//此处省略了一些处理逻辑...//定义动画结束方法const endAnimation () {this.reDraw(true);this.data.isAnimation false;this.isEndGame();};//定义动画更新方法const updateAnimation () {//判断条件更新移动数据if(offsetMove.x0 activeGrid.offsetX0) activeGrid.offsetXoffset;//其余的一些判断逻辑省略了...else {endAnimation();return;}this.reDraw();//继续下一个更新动画// this.data.timer setTimeout((){canvas.requestAnimationFrame(() updateAnimation());// },AnimationUpdateDelay);};//设置动画进行中this.data.isAnimation true;//开始更新动画updateAnimation();},/*** 判断游戏是否结束通关*/isEndGame(){const { grids } this.data.canvas;let isEnd grids.every(function (current,index) {//...判断逻辑检查网格集合里所有的图片顺序是否正确});//如果结束就是顺序正确弹出提示用户if(isEnd){this.data.isEndtrue;wx.showModal({title: 游戏结束,content: 恭喜攻关用时${this.data.timerNum}秒,confirmText:重新开始,complete: (res) {if (res.cancel) {this.data.lastIndex-1;this.reDraw();return;}if (res.confirm) {this.reStart();}}})}},//...
})游戏是否结束判断方法isEndGame()在移动动画结束时会调用 写到这里拼图游戏讲解到此结束理清了上面整个游戏思路吗相信自己能做到吧
关于项目
项目源码请在这里找点这里查看项目源码在资源一栏下其中有个叫拼图游戏的就是它可以下载来看谢谢支持
运行测试
打开项目源码游戏运行效果动图如下
拼图游戏里面图片是可以更换的换个自己喜欢的图片这样才有新鲜感 如果有遇到什么问题请留言作者会抽时间解答疑惑。 应用场景
这个拼图游戏应用场景用于解锁攻关最合适不过 我的梦有一把锁我的心中一条河等待有人开启有人穿越~
