微信小程序云开发--拼图游戏

最新推荐文章于 2022-03-09 20:16:24 发布
置顶 最新推荐文章于 2022-03-09 20:16:24 发布
阅读量1.6k 收藏 28
点赞数 4
分类专栏： 微信小程序 微信小程序云开发 文章标签： 微信小程序 微信小程序云开发 微信小程序拼图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37549867/article/details/94385332
版权

声明：在写这个拼图游戏以前也参看过很多其他的小程序拼图相关的列子。我的这个与其他的不同，是采用小程序云开发的模式，省去了服务器，供读者参考，同时，也希望各位能帮忙扫下二维，点一下小广告。挣钱不容易，谢谢哈！！

啥也不说上代码，看列子：哈哈

一.登陆页面

1.xml

<view class='uh'>
     <view class="uh-i" wx:if="{{avatarUrl!=''}}">
          <image  wx:if="{{avatarUrl!=''}}" src="{{avatarUrl}}"></image>
     </view>
     <button  wx:if="{{avatarUrl==''}}" class="uh-i uh-ib"  open-type="getUserInfo"  bindgetuserinfo="getUserAvatar">
          获取头像
     </button>
</view>

<view class="login">
     <view>嘿，小伙伴！欢迎进入爱拼图！</view>
     <view>爱拼才会赢，加油！</view>
     <view style='justify-content: center; display: flex;flex-direction：row;margin-top:30px;'>
          <view class='login-btn' bindtap='getOpenId'>登陆</view>
     </view>

     <view wx style='justify-content: center; display: flex;flex-direction：row;margin-top:30px;'>
          <view class='login-btn' bindtap='goUploadFile'>上传文件</view>
     </view>
</view>

2.登陆js

// miniprogram/pintu/login/login.js
var app = getApp();
var db = wx.cloud.database({ env: 'pro-egh5a' });
Page({

     /**
      * 页面的初始数据
      */
     data: {
          avatarUrl: '',
          userInfo:'',
     },

     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
//3b07eb945d01f254008157e70b245bb4  2.13  2.12  94b1e1fc5d01f1d40082fbab1351b738
          this.getUserMes(); 
          
     
     },

     /**
      * 获取用户openId
      */
     getOpenId:function(){
          

        wx.cloud.callFunction({
             name: 'login',
             data: {},
             success: res => {
                  var avatarUrl = this.data.userInfo.avatarUrl;
                  console.log(avatarUrl);
                  app.globalData.openid = res.result.openid
                  var openId = res.result.openid;//用户openId
                  var userColl = db.collection('sys-user');
                  //根据openId获取用户
                  userColl.where({ openId: openId}).get({
                      success:res=>{
                           if(res.data.length>0){//存在
                                wx.navigateTo({
                                     url: '/pintu/game/game?user_id=' + res.data[0]._id + "&userInfo=" + JSON.stringify(this.data.userInfo) ,
                                })
                           }else{//不存在
                                if (this.data.userInfo == '') {
                                     wx.showModal({
                                          title: '提示',
                                          content: '请先获取头像信息！',
                                          showCancel: false,
                                     })
                                     return;
                                }
                                userColl.add({
                                     data: { openId: openId, nick: this.data.userInfo.nickName, flag: 2, avatarUrl: avatarUrl, nickName: this.data.userInfo.nickName},
                                     success:res=>{
                                          var id = res._id;//用户id
                                          
                                          //在用户游戏等级表中加入记录
                                           var userTh = db.collection("sys-user-through");//用户拼图等级记录表
                                           userTh.add({
                                                data: { wait_pass: '1-1', was_pic: '', f_grade: '1', c_grade: '1', total_score: 0, user_id: id, avatarUrl: avatarUrl, nickName: this.data.userInfo.nickName,userTitle:'倔强青铜III'},
                                                success:res=>{
                                                    wx.navigateTo({
                                                         url: '/pintu/game/game?user_id=' + id + "&userInfo=" + JSON.stringify(this.data.userInfo) ,
                                                    })
                                                },fail:res=>{
                                                     wx.showModal({
                                                          title: '提示',
                                                          content: '系统错误！',
                                                          showCancel:false,
                                                     })
                                                }
                                           });
                                     },fail:res=>{
                                          wx.showModal({
                                               title: '提示',
                                               content: '用户登录失败！',
                                               showCancel:false,
                                          })
                                     }
                                });
                           }
                      }
                 });   
             },
             fail: err => {
                 wx.showModal({
                      title: '提示',
                      content: '获取唯一识别失败！',
                      showCancel:false,
                 })
             }
        });  
     },

     /**
      * 获取用户基本信息
      */
     getUserAvatar:function(){
          this.getUserMes();
     },

     /**
      * 执行获取用户头像
      */
     getUserMes:function(){
          // 获取用户信息
          wx.getSetting({
               success: res => {
                    if (res.authSetting['scope.userInfo']) {
                         // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                         wx.getUserInfo({
                              success: res => {
                                   this.setData({
                                        avatarUrl: res.userInfo.avatarUrl,
                                        userInfo: res.userInfo
                                   })
                              },
                              fail:res=>{
                                   wx.showModal({
                                        title: "提示",
                                        content: '获取失败！',
                                        showCancel:false,
                                   })
                              }
                         })
                    }
               }
          })
     },

     /**
      * 跳转到文件上传
      */
     goUploadFile:function(){
          
          wx.navigateTo({
               url: '/pintu/upload/upload',
          })
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {

     },

     /**
      * 生命周期函数--监听页面显示
      */
     onShow: function () {

     },

     /**
      * 生命周期函数--监听页面隐藏
      */
     onHide: function () {

     },

     /**
      * 生命周期函数--监听页面卸载
      */
     onUnload: function () {

     },

     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
     onPullDownRefresh: function () {

     },

     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {

     },

     /**
      * 用户点击右上角分享
      */
     onShareAppMessage: function () {

     }
})

3.登陆xss

/* miniprogram/pintu/login/login.wxss */
.uh{

     width:100%;
     text-align: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
}
.uh-i{
     position: relative;
     font-size: 14px;
     margin-top:50px;
     width:100px;
     height:100px;
     
     border-radius: 50px;
     overflow: hidden;
}
image{
     width:100px;
     height:100px;
     border-radius: 50px;
}
.uh-ib{
     border:4px solid #FFD700;
     line-height: 100px; text-align: center;background-color: rgba(220, 236, 174, 0.5); color:#ADADAD;
}

.login{
     margin-top:50px;
     color:#ADADAD;
     display: flex;
     flex-direction: column;
     
     text-align: center;
     width:100%;
     font-size: 14px;
}

.login-btn{
     color:black;
     width:100px;
     height:40px;
     line-height: 40px;
     text-align: center;
     font-weight: bolder;
     background-color: #FFD700;
     border-radius: 5px;
      box-shadow:0px 0px 5px #ADADAD;
      letter-spacing: 1px;
}

二、游戏页面

1.xml

<!--miniprogram/pintu/game/game.wxml-->
<!-- <image style='width:300px;height:300px;' src='cloud://pro-egh5a.7072-pro-egh5a/1/1/0.png'></image> -->
<view class='user_mes'>
     
     <view class='item'>
          <image src='{{userInfo.avatarUrl}}' class='ava'></image>
          <view class='item-t'>{{userInfo.nickName}}</view>
     </view>
     <view class='item'>
          <image class='level' src='/images/level.png'></image>
          <view class='item-t item-t-l'>{{userTitle}}</view>
     </view>
</view>
<view class="tips">（点击图片与空白区，相邻即可交换位置）</view>
<view class='show' wx:if="{{pass==0}}">
     <view class='show_img' style='height:{{showImgHeight}}px;width:{{showImgWidth}}px'>
          <view style="height:{{height}}px;width:{{width}}px" wx:for="{{chList}}" wx:key=""  bindtap='selectThis' >
          <!-- 图片 -->
              <image class="{{index==imgIndex?'imgBorder':''}}" wx:if="{{item.filePath!=''&&item.filePath!=1}}" src='{{item.filePath}}' style="height:{{height}}px;width:{{width}}px;" data-index="{{index}}" data-mark="1"></image>
              <!-- 填充区 -->
              <!-- <view wx:if="{{item.filePath==''&&item.filePath!=1}}" style='height:{{height}}px;width:{{width}}px;'></view> -->
              <!-- 空格 -->
              <view class="{{index==fillIndex?'imgBorder':''}}" wx:if="{{item.filePath!=''&&item.filePath==1}}" style='height:{{height}}px;width:{{width}}px;background-color: #fff' data-index="{{index}}" data-mark='2'></view>
          </view>
     </view>
</view>
<view class='pass' wx:if="{{pass==1}}">
     <view class='p-item'>
          <view class='pass-1'>恭喜,您已通关!</view>
     </view>
     <view  class='p-item'>
          <view class='pass-2' bindtap='lookRanking'>排行榜</view>
     </view> 
</view>
<view class='bot' wx:if="{{pass==0}}">
     <view class='bot-item bot-item-l' bindtap='lookOriPic'>原图</view>
     <view class='bot-item bot-item-r' bindtap='lookRanking'>排行榜</view>
</view>

2.js

// miniprogram/pintu/game/game.js
const db = wx.cloud.database({ env: "pro-egh5a" });
var app = getApp();
Page({

     /**
      * 页面的初始数据
      */
     data: {
          imgIndex: -1,
          fillIndex: -1,
          pass:0,
          border: '1px solid black;',
          user_id: '',
          userInfo: '',
          father_pic: '',//当前正在玩的图片的父级
          chList: '',
          height: '',
          width: '',
          showImgHeight: 0,
          wait_pass:'',
          chListLength:0,
          throughId:'',
          score:0,
          userTitle:'',
          userTitles:[
               { lscore: 0, mscore: 20, title: '倔强青铜III' },
               { lscore: 21, mscore: 40, title: '倔强青铜II'},
               { lscore: 41, mscore: 60, title: '倔强青铜I' }, 
               { lscore: 61, mscore: 100, title: '秩序白银III' },
               { lscore: 101, mscore: 140, title: '秩序白银II' }, 
               { lscore: 141, mscore: 180, title: '秩序白银I' },
               { lscore: 181, mscore: 220, title: '荣耀黄金IV' },               
               { lscore: 221, mscore: 260, title: '荣耀黄金III' },
               { lscore: 261, mscore: 300, title: '荣耀黄金II' },
               { lscore: 301, mscore: 340, title: '荣耀黄金I' },
               { lscore: 341, mscore: 400, title: '尊贵铂金IV' },
               { lscore: 401, mscore: 460, title: '尊贵铂金III' },
               { lscore: 461, mscore: 520, title: '尊贵铂金II' },
               { lscore: 521, mscore: 580, title: '尊贵铂金I' },
               { lscore: 581, mscore: 640, title: '永恒钻石V' },
               { lscore: 641, mscore: 700, title: '永恒钻石IV' },
               { lscore: 701, mscore: 760, title: '永恒钻石III' },
               { lscore: 761, mscore: 820, title: '永恒钻石II' },
               { lscore: 821, mscore: 880, title: '永恒钻石I' },
               { lscore: 881, mscore: 940, title: '至尊星耀V' },
               { lscore: 941, mscore: 1000, title: '至尊星耀IV' },
               { lscore: 1001, mscore: 1060, title: '至尊星耀III' },
               { lscore: 1061, mscore: 1120, title: '至尊星耀II' },
               { lscore: 1121, mscore: 1180, title: '至尊星耀I' },
               { lscore: 1181, mscore: 1500, title: '最强王者' },
               { lscore: 1501, mscore: 99999, title: '荣耀王者' },
               ],
     },

     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {


         
          var user_id = options.user_id;
          this.setData({
               user_id: user_id,
               userInfo: JSON.parse(options.userInfo)
          });
          this.getUserThroughMes();
     },
     /**
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
         
     },
     /**
      * 获取用户等级信息
      */
     getUserThroughMes: function () {
          var user_id = this.data.user_id;
          db.collection('sys-user-through').where({ user_id: user_id }).get().then(res => {
               var mes = res.data[0];

               this.setData({
                    throughId:mes._id,
                    wait_pass: mes.wait_pass,
                    score: mes.total_score*1,
                    userTitle:mes.userTitle
               });
               var fG = mes.wait_pass.split("-")[0];
               var cG = mes.wait_pass.split("-")[1];

               db.collection("sys-pic-father").where({ grade: fG }).count().then(res => {
                           
                    if (cG == res.total && fG==2){
                        this.setData({
                             pass:1
                        });
                    }else{
                         this.getFatherPicMes(mes.wait_pass);//根据用户图片等级查询父级图片 
                    }
                              
               });

               
          });
     },

     /**
      * 根据用户图片等级查询父级图片
      */
     getFatherPicMes:function(wait_pass){
          wx.showLoading({
               title: '加载中···',
          })
          var grads = wait_pass.split("-");
          db.collection("sys-pic-father").where({
               grade: grads[0], grade_childe: grads[1]
          }).get().then(res => {
               wx.hideLoading();
 
               this.setData({
                    father_pic: res.data[0].filePath
               });
               var fId = res.data[0]._id;

               this.getPicsByFid(fId);//根据父级Id查询图片组
          });
     },
     /**
      * 根据父级Id查询图片组
      */
     getPicsByFid: function (fId) {
          db.collection("sys-pic-child").where({ fId: fId }).field({ filePath: true }).get().then(res => {
            
               var list = res.data;
               var listLength = list.length;
               var indexArr = [];
               for (var i = 0; i < listLength;i++){
                    var serial = list[i].filePath.split(".pn")[0].split("/").pop();
                    indexArr.push(serial);
               }
               var inLength = indexArr.length;
               var max;
               if (inLength%3==0){
                    max=9;
               }
               if (inLength % 4 == 0) { 
                    max=16;
               }
               var popIndex = '';
               for (var a = 0; a < inLength; a++) {
                    if (indexArr[a]==max){
                         popIndex=a;
                    }
               }

               res.data.splice(popIndex, 1) ;//去掉最后一个

               var chList = res.data;
            
               //宽高设置
               var width = 0;
               var height = 0;
               var showImgWidth= 0;
               var showImgHeight=0;
               //打乱数组           
               chList = this.upsetArr(chList);
               chList = chList.concat([{ filePath: '1' }])
             
               //数组长度 
               var chLength = chList.length;
               
               //添加空格
               if (chLength % 3 == 0) {
                    width = (300 / chLength) * 3;
                    height = (300 / chLength) * 3;
                    showImgWidth = 300+2*3;
                    showImgHeight = 300 + 2 * 3 ;

               } else if (chLength % 4 == 0) {

                    width = (300 / chLength) * 4;
                    height = (300 / chLength) * 4;
                    showImgWidth = 300 + 2 * 4;
                    showImgHeight = 300 + 2 * 4 ; 

               }
               
             
               this.setData({
                    chListLength: chLength,
                    chList: chList,
                    height: height,
                    width: width,
                    showImgWidth: showImgWidth,
                    showImgHeight: showImgHeight,
               });
          });
     },
     

     /**
      * 打乱数组
      */
     upsetArr:function(chList){
          //打乱数组
          let i = chList.length;
          while (i) {
               let j = Math.floor(Math.random() * i--);
               [chList[j], chList[i]] = [chList[i], chList[j]];
          }
          //打乱后图片顺序cloud://pro-egh5a.7072-pro-egh5a-1259354038/1/1/4.png
          var aUpset = [];
          var length = chList.length;
          for (var a = 0; a < length; a++) {
               var serial = chList[a].filePath.split(".pn")[0].split("/").pop();
               aUpset.push(serial)
          }
          
          //验证打乱是否成功？
          var bool = this.isContinuityArray(aUpset);
          if (bool){
               this.upsetArr(chList);

          }
          return chList;
     },

     /**
      * 判断数组是否是递增数组
      */
     isContinuityArray:function(arrStr) {
          var isContinuityArray = false;
          var array = arrStr;
          var arrayCount = array.length - 1;
          for(var i = 0; i<arrayCount; i++) {
               var currentArr = Number(array[i]) + 1;
               var nestArr = Number(array[i + 1]);
               if (i + 1 == arrayCount) {
                    currentArr = Number(array[i]);
                    nestArr = Number(array[i]);
               }
               if (currentArr != nestArr) {
                    isContinuityArray = false;
                    break;
               } else {
                    isContinuityArray = true;
               }
          }
          return isContinuityArray;
     },

     /**
      * 选择图片或者空格
      */
     selectThis: function (e) {
          var index = e.target.dataset.index;
          var mark = e.target.dataset.mark;
          var chList = this.data.chList;
          if (mark == 1) {
               this.setData({
                    imgIndex: index
               });
          } else if (mark == 2) {
               this.setData({
                    fillIndex: index
               });
          }
          this.gameCore();
     },

     /**
      * 判断选择的图片与空白区是否相邻，如果相邻就交换位置，并获取新的图片数组顺序，如果顺序为有序递增，则通过
      */
     gameCore:function(){
          var imgIndex = this.data.imgIndex;
          var fillIndex = this.data.fillIndex;
          var chListLength = this.data.chListLength;

          //保证必须相邻
          var numI = imgIndex+1;
          var numF = fillIndex+1;
          var jude = false;
          if (chListLength % 3 == 0) { 
               var num = Math.abs(numF - numI);
               if (num==1||num==3){
                    jude=true;
               }
          } else if (chListLength % 4 == 0){
               var num = Math.abs(numF - numI);
               if (num == 1 || num == 4) {
                    jude = true;
               }
          }

          if (imgIndex != -1 && fillIndex != -1 && jude){//两者都已选取
               // [array[index1],array[index2]] = [array[index2],array[index1]];
               var chList = this.data.chList;
               [chList[imgIndex], chList[fillIndex]] = [chList[fillIndex], chList[imgIndex]];
               this.setData({
                    chList: chList,
                    imgIndex:-1,
                    fillIndex:-1
               });
               var aUpset = [];
               var length = chList.length;
               for (var a = 0; a <length; a++) {
                    var serial = chList[a].filePath.split(".pn")[0].split("/").pop();
                    aUpset.push(serial)
               }
               
               // aUpset = ["1", "2", "3", "4", "5", "6", "7", "8", "1"];
               aUpset = aUpset.slice(0, aUpset.length - 1);

               // aUpset = [1,2,3];
               //验证顺序是否成功
               var bool = this.isContinuityArray(aUpset);
              
               if(bool){
                    console.log("拼图成功******累计积分");
                    var nowScore=0;
                    if (chListLength % 3 == 0) {
                         nowScore = this.data.score + 40;
                    } else if (chListLength%4==0){
                         nowScore = this.data.score + 60;
                    }
                    //获取用户当前称号
                    var title = this.getUserTitleByScore(nowScore);

                    var waitPass = this.data.wait_pass;
                    var fG = waitPass.split("-")[0];
                    var cG = waitPass.split("-")[1];
                        
                    db.collection("sys-pic-father").where({ grade: fG}).count().then(res=>{
                         if(cG == res.total){//最后一张
                              if (fG<2){
                                   fG = fG*1 + 1;
                                   cG=1;
                              }else{
                                   wx.showModal({
                                        title: '提示',
                                        content: '恭喜！通关！',
                                        showCancel:false,
                                   })
                                   this.setData({
                                        pass: 1
                                   });
                                   return;
                              }
                              
                         } else if (cG < res.total){
                              cG = cG*1+1;
                              if (fG == 2 && (cG ==12||cG==14)){
                                   cG = cG * 1 + 1;
                              }
                              
                         }

                         var newWaitPass = fG + '-' + cG;
                         
                         //修改数据库
                         db.collection("sys-user-through").doc(this.data.throughId).update({ data: { total_score: nowScore, wait_pass: newWaitPass, userTitle: title } }).then(res => {
                              
                              this.setData({
                                   score: nowScore,
                                   wait_pass: newWaitPass,
                                   userTitle: title
                              });
                              wx.showModal({
                                   title: '恭喜',
                                   content: '恭喜您，拼图成功！',
                                   showCancel:false,
                                   success:res=>{
                                        if(res.confirm){
                                             //换图片
                                             this.getFatherPicMes(newWaitPass);
                                        }
                                   }
                              })
                              
                         });         
                    });
               }
          }
     },

          
     /**
      * 根据用户积分获取称号
      */
     getUserTitleByScore:function(score){

          var userTitles = this.data.userTitles;
          var title;
          var tLength = userTitles.length;
          for (var i = 0; i < tLength;i++){
               if (score<=userTitles[i].mscore){
                  
                    title = userTitles[i].title;
                    break;
               }
          }

          return title;
     },
     /**
      * 查看原图
      */
     lookOriPic:function(){
          wx.previewImage({
               current: this.data.father_pic, // 当前显示图片的http链接
               urls: [this.data.father_pic] ,// 需要预览的图片http链接列表
               success:res=>{

               }
          })
     },

     /**
      * 查看排名
      */
     lookRanking:function(){
          wx.navigateTo({
               url: '/pintu/ranking/ranking',
          })
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {

     },



     /**
      * 生命周期函数--监听页面隐藏
      */
     onHide: function () {

     },

     /**
      * 生命周期函数--监听页面卸载
      */
     onUnload: function () {

     },

     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
     onPullDownRefresh: function () {

     },

     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {

     },

     /**
      * 用户点击右上角分享
      */
     onShareAppMessage: function () {

     }
})

3.xss

/* miniprogram/pintu/game/game.wxss */


/* 用户信息 */
.user_mes{
     margin-top:5px;
     width:100%;
     height: 50px;
     line-height: 50px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     font-size: 14px;
     color:#FFD700;
}
.item{
     display: flex;
     flex-direction: row
}
.ava{
     margin-left: 5px;
     height:50px;
     width:50px;
     border-radius: 25px;
}

.level{
     margin-top: 8px;
     height:32px;
     width:32px;
}

.item-t{
     margin-left: 10px;
}

.item-t-l{
     margin-right:5px;
}
/* tips */
.tips{
     font-size: 14px;
     color: #A8A8A8;
}
/* 图片操作 */
.show{
     margin-top: 10px;
     width:100%;
     display:flex; flex-direction:row;justify-content:center;
}

.show_img{
     box-shadow:0px 0px 5px #ADADAD;
     border:1px solid #FFD700;
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
     background-color: #FFD700;
}
.imgBorder{
     border:1px dashed #ADADAD;
}

.bot{
     width:100%;
     margin-top:10px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     font-size: 14px;
}

.bot-item{
     width:80px;
     height:35px;
     line-height: 35px;
     text-align: center;
     background-color: #FFD700;
     color:#ffff;
     border-radius: 5px;
}
.bot-item-l{
     margin-left: 5px;
}

.bot-item-r{
     margin-right: 5px;
}

.pass{
     display: flex;
     width: 100%;
     flex-direction: column;
     justify-content: center;
}
.p-item{
     margin-top: 40px;
      display: flex;
     width: 100%;
     flex-direction: row;
     justify-content: center;
}

.pass-1{

     font-size: 20px;
     color:#FFC125;
     font-weight: bolder;

}

.pass-2{
     width:80px;
     height:35px;
     font-size: 14px;
     line-height: 35px;
     text-align: center;
     background-color: #FFD700;
     color:#ffff;
     border-radius: 5px;
}

各位大哥，核心代码就在上面了。如有疑问请留言，小编会第一时间回复，谢谢，再次麻烦扫一下二维码，进入游戏玩一下，可以体验，有小广告帮忙点一下，谢谢！！！

m0_37549867
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序│ 游戏开发 │连连看游戏
不断学习，不断进步，提高自己
09-15 7143
“连连看”是源自台湾的桌面小游戏，自从流入大陆以来风靡一时，也吸引众多程序员开发出多种版本的“连连看”。“连连看”考验的是各位的眼力，在有限的时间内，只要把所有能连接的相同图案，两个一对地找出来，每找出一对，它们就会自动消失，只要把所有的图案全部消完即可获得胜利。
微信小游戏入门案例——拼图游戏
yunfeather的博客
10-20 3077
微信小游戏入门案例——拼图游戏 涉及内容:canvas组件、小程序界面绘图API 目录结构： pages\game\game.js // pages/game/game.js // 方块的初始位置 var num = [ ['00', '01', '02'], ['10', '11', '12'], ['20', '21', '22'] ] // 方块的宽度 var w = 100 // 图片的初始地址 var url = '/images/pic01.jp..
JavaScript简单实现拼图小游戏（附源码和资源）
qq_44651842的博客
07-03 3847
JavaScript代码68行，刚学JavaScript的时候写的，思想很简单，分享一下。附源码。
拼图工具箱微信小程序源码下载支持多种拼图模式制作
m0_66429615的博客
03-09 850
这是一款拼图工具箱小程序源码 小程序支持多种拼图制作生成 比如: 九宫格切图(就是把一张图切割成九宫格小图) 九宫格拼图(就是把九张图拼成一张图) 心形图制作(也就是把多张图拼成心形状态) 文字九宫格(也就是DIY文字拼凑成九宫格) 多图横向拼接(也就是多张图左右拼接起来,就比如我们的演示图一样就是这种拼接方法) 具体还有哪些好玩的你们就自己发掘吧 另外该款小程序还支持跳转其它小程序也就相当于是推荐小程序吧! 这款小程序安装方法还是挺简单的! 使用微信开发者工具打开该小程序源码,然后上传审核就可以
微信小程序拼图.rar
12-23
微信小程序纯js写的一个拼图游戏，仿win10拼图游戏，默认数字拼图，可以自己上传图片进行拼图，图片缓存本地，同一横同一竖可以进行移动，不需要一个一个移动，主页会有文章进行展示效果图。
微信小程序开发的游戏《拼图游戏》
03-29
微信小程序开发的游戏《拼图游戏》       效果图如下： (此图片来源于网络，如有侵权，请联系删除! ) 代码拷入即可用 pintu.js   // pintu.js Page({   /** * 页面的初始数据 */ data: { 免责声明：本站所有...
微信小程序开发-新版2048
06-01
本资源是关于"新版2048"的游戏小程序开发教程，适合对微信小程序开发感兴趣的朋友学习。 2048是一款非常流行数字拼图游戏，玩家通过滑动屏幕将相同的数字合并，目标是达到2048这个数值。将其与微信小程序结合，意味...
微信小程序-滑块拼图游戏.zip
03-07
这个项目涉及到的知识点广泛，包括前端开发、微信小程序开发规范、JavaScript编程、UI设计以及版本控制等多个方面。 首先，`.babelrc`文件是Babel的配置文件，用于将ES6+的现代JavaScript语法转换为浏览器兼容的ES5...
微信小程序：图片拼图小程序源码
05-28
总的来说，"图片拼图小程序源码"涵盖了微信小程序开发中的图像处理、用户交互、模板设计等多个方面，对于想要涉足微信小程序开发，尤其是对图像编辑功能感兴趣的开发者来说，这是一个很好的学习资源。通过深入研究这...
微信小程序源码-2048游戏.zip
最新发布
03-07
总的来说，"微信小程序源码-2048游戏.zip"提供了一个学习和实践微信小程序开发的绝佳案例，涵盖了从基础的前端语法到复杂的游戏逻辑实现，对任何想要涉足微信小程序开发的人来说都是一份宝贵的资源。
微信小程序实现拼图小游戏
01-18
微信小游戏入门案例——拼图游戏，供大家参考，具体内容如下 涉及内容:canvas组件、小程序界面绘图API 目录结构： pages\game\game.js // pages/game/game.js // 方块的初始位置 var num = [ ['00', '01', '02'], ['10', '11', '12'], ['20', '21', '22'] ] // 方块的宽度 var w = 100 // 图片的初始地址 var url = '/images/pic01.jpg' Page({ /** * 页面的初始数据 */ data: { isWin: fals
微信小程序，一个滑块拼图游戏
01-27
滑块拼图小游戏 简介 一个微信小程序游戏，滑动进行方块拼接 源码目录介绍 ./js ├── base // 定义游戏开发基础类 │   ├── button.js                         // 游戏内可点击图片类 │   └── eventUtil.js                       // 处理点击事件的类 ├── libs │ ├── bezier.js // 用于进行淡入淡出动画的类库 https://github.com/gre/bezier-easing │ ├── symbol.js // ES6 Symbol简易兼容 │ └── weapp-adapter.js
微信拼图小游戏
04-28
微信拼图小游戏代码 可以在JS中设置难度 关卡 图片等。
微信小游戏 拼图小游戏
04-19
可以直接运行的微信小游戏。完整源码，实现拼图的简单原理，中低高三个等级不同的难度，很简单的游戏代码，希望对大家有帮助
微信小程序拼图游戏.zip
04-23
微信小程序拼图游戏.zip
微信小程序（游戏）----拖拽拼图（拖拽和切换功能的实现）
热门推荐
止于至善
03-15 1万+
效果图 touchstart 获取当前触摸位置的坐标（x，y）； 记录触摸点下view的各项坐标值； 记录触摸点下view的起点坐标，背景坐标，以及触摸点的坐标； 设置拖拽view为显示状态、设置起始坐标以及背景坐标为记录对应个坐标。 page.onTouchStart = function(e){ let x = parseInt(e.touches[0].pageX ...
微信小程序开发拼图小游戏
@Grapefruit的博客
01-13 2116
闲来无事，自己用微信小程序开发了一个拼图小游戏玩，大概效果就是这样的： 大概效果就是这样，感兴趣的小伙伴可以看一下，需要代码请留言自己的微信。 ...
微信小程序使用canvas制作拼图动画
jinxi1112的博客
07-15 1015
效果如上图 制作思路： 1. 制作9个由特殊图形拼成的九宫格，包含模糊和彩色高亮 2.生成的拼图进行一系列路径动画（蓄能弹起效果） 3.将生成的拼图拼贴在对应的位置上，并产生破碎动画特效 技术实现思路： 1.将拼图图片利用canvas rgb通道方法制作成模糊灰度图，参考博文https://blog.csdn.net/sunzhibin1/article/details/82387926 2.制作九宫格拼图 <view class="canvas-wrap..
微信小程序开发 font-weight
12-21
在微信小程序开发中，font-weight是用于设置字体的粗细程度的属性。它可以接受以下几个值： 1. normal：表示正常的字体粗细。 2. bold：表示加粗的字体。 3. bolder：表示更加粗的字体。 4. lighter：表示更加细的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值