云顶之弈小程序

李子*

微信小程序

项目描述

云顶之弈小程序,有阵容推荐等功能~

上传时间

2020.11.08

浏览人数

2081人
李子*
河北省唐山市乐亭县
Hot:6262

灵感来源:玩英雄联盟云顶之弈的时候,想自定义一些阵容保存下来。

所用工具:微信开发者工具

创意领域:微信小程序

班级类型:脱产班

所有者:李子行



这周完成的是微信小程序的学习,我做了一个简单的关于云顶之弈的微信小程序。

这个小程序分为三个页面,分别是阵容推荐页面,全英雄列表和小游戏页面。


这是第一个页面,阵容推荐页面。

云顶之弈小程序

然后是第二个页面,全英雄列表页面

云顶之弈小程序

最后是小游戏页面

云顶之弈小程序


下面是翻翻乐的主要代码:

var app = getApp()

var allCard = ['202', '203', '204',  '205',  '206', '207', '208','209', '210','211','212','213', '214', '215','216','217', '218', '219', '220', '221','222','223','224','225','226','227'];

var backCardImage = "/img/backPic.jpg"

Page({

  data: {

    clickNum: 0, // 点击次数

    useTime: 0, // 游戏时间  

    checked: 0, // 已匹配牌数

    allCard: allCard, // 全部卡牌数组

    backImage: backCardImage, // 牌背面 图片地址

    modalHidden: true, // 游戏完成提示是否显示

    firstX: -1, // 点击的第一张卡牌的坐标 

    firstY: -1,

    cards: [], // 随机挑选出来的牌   

    size: 12, // 界面显示的牌数=size*2

    clickable: false, // 当前是否可点击

    timer: '' // 游戏计时的定时器

  },

  startGame: function () { // 开始游戏

    var data = this.data;

    var that = this;

    console.log('startGame');

    var tmp = this.data.allCard.sort(

      function (a, b) {

        return Math.random() > .5 ? -1 : 1;

      }).splice(0, Math.floor(data.size)); // 打乱牌堆,挑出size/2张牌

    tmp = tmp.concat(tmp).sort(function (a, b) {

      return Math.random() > .5 ? -1 : 1;

    }); // *2,再打乱

    // 添加src,state,转成二维数组方面展示

    var cards = [];

    var ix = -1;

    var iy = 0;

    for (var i in tmp) {

      if (i % 4 == 0) {

        cards.push([]);

        ix++;

        iy = 0;

      }

      cards[ix].push({

        src: 'https://game.gtimg.cn/images/lol/tft/cham-icons/624x318/' + tmp[i] + '.jpg',

        state: 1 // 1时显示图片,0时显示牌背面

 

      });

    }

    this.data.cards = cards;

    this.setData({

      cards: cards,

      clickNum: 0,

      useTime: 0,

      checked: 0,

      modalHidden: true,

      firstX: -1,

      clickable: false

    });

 

    var that = this;

    setTimeout(function () {

      that.turnAllBack(); // 所有的牌翻到背面

      console.log('turn all back');

      data.clickable = true; // 开始计时了才让点

      if (data.timer === '') {

        data.timer = setInterval(function () {

          data.useTime++;

          that.setData({

            useTime: data.useTime

          });

        }, 1000); // 游戏开始计时

      } else {

        that.setData({

          useTime: 0

        });

      }

    }, 5000); // 游戏开始前先让玩家记忆几秒钟

  },

  onTap: function (event) {

    var that = this;

    var data = this.data;

    var ix = event.currentTarget.dataset.ix; // 获取点击对象的坐标

    var iy = event.currentTarget.dataset.iy;

    console.log('onTap ' + ix + ' ' + iy);

    if (data.cards[ix][iy].state != 0 || !data.clickable) // 点击的不是未翻过来的牌或者现在不让点直接pass

      return;

    that.setData({

      clickNum: ++data.clickNum

    }); //点击数加1   

    // 1. 检测是翻过来的第几张牌

    if (data.firstX == -1) {

      // 1.1 第一张修改状态为 1

      data.cards[ix][iy].state = 1;

      data.firstX = ix;

      data.firstY = iy; // 记下坐标

      that.setData({

        cards: data.cards

      }); // 通过setData让界面变化

    } else {

      // 1.2 前面已经有张牌翻过来了,先翻到正面然后看是不是一样

      data.cards[ix][iy].state = 1;

      that.setData({

        cards: data.cards

      });

      if (data.cards[data.firstX][data.firstY].src === data.cards[ix][iy].src) {

        // 1.2.1.1 两张牌相同修改两张牌的state2完成配对

        data.cards[data.firstX][data.firstY].state = 2;

        data.cards[ix][iy].state = 2;

        data.checked += 1; // 完成配对数++

        data.firstX = -1; // 准备下一轮匹配 

        // 1.2.1.2 检查是否所有牌都已经翻过来,都已翻过来提示游戏结束

        if (data.checked == data.size) { // 所有牌都配对成功了!

          this.setData({

            modalHidden: false

          });

          clearInterval(this.data.timer); // 暂停计时

          this.data.timer = '';

          this.saveScore({

            'time': data.useTime,

            'click': data.clickNum

          }) // 保存成绩

        }

      } else { // 1.2.2 两张牌不同修改两张牌的state 0

        data.cards[data.firstX][data.firstY].state = 0;

        data.cards[ix][iy].state = 0;

        data.firstX = -1;

        data.clickable = false;

        setTimeout(function () {

          that.setData({

            cards: data.cards,

            clickable: true

          });

        }, 500); //过半秒再翻回去

      }

    }

    console.log(this.data.cards);

  },

  turnAllBack: function () {

    for (var ix in this.data.cards)

      for (var iy in this.data.cards[ix])

        this.data.cards[ix][iy].state = 0;

    this.setData({

      cards: this.data.cards

    });

  },

  saveScore: function (score) { // 保存分数

    var maxscore = wx.getStorageSync('maxscore');

    if (maxscore == undefined || maxscore == '')

      maxscore = [];

    maxscore.push(score);

    maxscore = maxscore.sort(function (a, b) {

      if (a.time < b.time)

        return -1;

      else if (a.time == b.time && a.click < b.click)

        return -1;

      else return 1;

    });

    wx.setStorageSync('maxscore', maxscore);

  },

  "disableScroll": true,

  onLoad: function () {

    this.startGame();

    console.log(this.data.cards);

  },

  modalComfirm: function () {

    this.startGame();

  },

  modalCancle: function () {

    this.setData({

      modalHidden: true,

    })

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onReady: function () {

    console.log("onReady")

  },

  onShow: function () {

    console.log("onShow");

    if (this.data.checked == this.data.size)

      this.startGame()

  },

  onHide: function () {

    console.log("onHide")

  },

  onUnload: function () {

    console.log("onUnload")

  },

  onReachBottom: function () {

    console.log("onReachBottom")

  },

  onShareAppMessage: function () {

    console.log("onShareAppMessage")

  },

  onShareAppMessage: function () {

    console.log('onShareAppMessage')

    return {

      title: '自定义分享标题',

      desc: '自定义分享描述',

      path: '/page/user?id=123'

    }

  }

})

 

在刚开始编写微信小程序的时候很不适应,因为相对于JavaScript的节点操作来说,微信小程序是通过修改数据来修改各种内容的,但在适应过后感觉也还可以。

最后 

云顶之弈小程序


李子*

李子*    6262 河北省唐山市乐亭县 设计师杨冰是女孩 1995.**.**
本网站已在中国版权保护中心登记了美术作品著作权与软件著作权违者将依法追究责任,特此声明! | Copyright©2013-2022,zhuzuoji.com | 诚筑说培训学校(天津)有限公司内容支持 | 京ICP备17020986号-5