德州扑克
第一天、初始化卡组
var flower = ['♠', '♥', '♣','♦'] var poker = []; for (var j = 0; j < 4; j++) { var f = flower[j] for (var i = 1; i <= 13; i++) { let n = i; switch (n) { case 1: n = 'A'; break; case 11: n = 'J'; break; case 12: n = 'Q'; break; case 13: n = 'K'; break; } poker.push(f + n) } } console.log(poker)
第二天、洗牌与卡组的UI
<template> <div class="hello"> <h1>{{ msg }}</h1> <transition-group name="cell" tag="div" class="container"> <div v-for="p in poker" :key="p.id" class="cell" :data-flower='p.flower' :class="{red: p.flower === '♥' || p.flower === '♦'}"> <span class="number">{{ p.number }}</span> </div> </transition-group> <button class="shuffle" @click="shuffle"> Shuffle </button> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Texas Hold’em poker', poker : [] } }, methods: { shuffle () { // 利用slice函数克隆一个数组.不要问我为什么要克隆 let arr = this.poker.slice(0); let n = arr.length, random; while (0 != n) { random = (Math.random() * n--) >>> 0; // 无符号右移位运算符向下取整 [arr[n], arr[random]] = [arr[random], arr[n]] // ES6的结构赋值实现变量互换 } this.poker = arr; }, init () { const flower = ['♠', '♥', '♣','♦'] let poker = []; // 外部循环四个花色 for (var j = 0; j < 4; j++) { // 获取当前花色 let f = flower[j] // 内部循环13张咯 for (var i = 1; i <= 13; i++) { let n = i; switch (n) { case 1 : n = 'A'; break; case 11 : n = 'J'; break; case 12 : n = 'Q'; break; case 13 : n = 'K'; break; } poker.push({id : f + n, number: n, flower: f}) } } // 德州扑克不需要双王 this.poker = poker } }, beforeMount () { this.init() } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang='scss' scoped> h1, h2 {font-weight: normal; } /* 动画钩子 */ .cell-move { transition: transform 1s ease; } .container { display: flex; flex-wrap: wrap; /* #当宽度不够时换行 */ width: 500px; margin: auto; } .cell { text-align: center; width: 50px; height: 60px; border: 1px solid #aaa; display: flex; justify-content: space-around; & > .number { align-self: center; } &::before { content:attr(data-flower); align-self: flex-start; } &::after { content:attr(data-flower); transform: rotateX(180deg); align-self: flex-end; } } button.shuffle { margin-top: 40px; } .red { color:red; } </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
2016-05-15 php 设置自动加载某个页面