微信小程序中斗地主记牌器的相关解析

why 417 2024-07-02

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

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

截图:

image.png

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

1.可选一副牌或两副牌

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

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

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

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

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

1

2

3

4

5

6

<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>

操作方法:

1

2

3

4

5

6

7

8

9

10

11

12

// 点击操作

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

  }

}

1

2

3

4

5

6

// 撤销操作

rollback () {

  let pokers = this.updateHistory[this.updateHistory.length - 1]

  this.pokers = pokers

  this.updateHistory.pop(this.updateHistory.length - 1)

}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:更改拍一拍内容的操作方式及要点
下一篇:微信 8.0 版本所具备的全新功能一览
相关文章

 发表评论

暂时没有评论,来抢沙发吧~