• 技术文章 >微信小程序 >小程序开发

    微信小程序之斗地主记牌器

    VV2021-02-18 09:39:30转载226

    偶然一次在看斗地主直播时,发现主播由于没有记牌器导致判断失误,因此产生了做记牌器的想法,也是为了练练手,熟悉下小程序的开发流程。

    截图:

    eac1f3a3f8329c7e9c12e3d920fed70.png

    思路比较简单只有一个页面

    1.可选一副牌或两副牌

    2.点击相应牌减少对应牌的数量, 数量为0时该图标变灰

    3.可撤销,撤销操作仅保留最近100个点击操作

    4.重置操作会清空所有操作记录

    开发上选择的是 mpvue mpvue.com/

    然后直接使用grid布局对卡牌进行排列

    <div class="gird-container">
      <div class="gird-item" v-for="(poker, index) in pokers" :key="index">
        <card :poker="poker" :index="index" @handleHuase="handleHuase" @handleWang="handleWang">
        </card>
      </div>
    </div>

    操作方法:

    // 点击操作
    handleHuase (obj) {
    // 这里用来记录操作历史
    this.updateHistory.push(JSON.parse(JSON.stringify(this.pokers)))
      if (this.pokers[obj.index][obj.huase] > 0) {
        this.pokers[obj.index][obj.huase] -= 1
        this.pokers[obj.index].count -= 1
      } else {
        this.pokers[obj.index][obj.huase] = this.defaultCount
        this.pokers[obj.index].count += 1
      }
    }
    // 撤销操作
    rollback () {
      let pokers = this.updateHistory[this.updateHistory.length - 1]
      this.pokers = pokers
      this.updateHistory.pop(this.updateHistory.length - 1)
    }

    git地址

    github.com/jinggoing/m…

    小程序码

    6e1c9f0dad2e550c8e9a6f32be42505.png

    相关推荐:小程序开发教程

    以上就是微信小程序之斗地主记牌器的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:掘金,如有侵犯,请联系a@php.cn删除
    专题推荐:微信小程序 记牌器
    上一篇:修改小程序单页面的背景颜色 下一篇:总结几点小程序开发技巧
    第15期线上培训班

    相关文章推荐

    • 微信小程序开发需要掌握哪些技术• vue和微信小程序的区别是什么• 微信小程序API能够实现哪些功能• 开发企业微信小程序的流程分析

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网