[Teach you how to make a small game] Display the Doudizhu playing cards, and support sorting according to the rules of playing cards! Support sorting by size!

I am the author of the official account " Offline Party Games ". I have developed some online board game pages (Doudizhu, Gobang, etc.), summed up some small game development experiences, and summarized them in the column "Teach You to Make Small Games" to share with you. , welcome to follow.

Problem Description

We want to make a landlord game, and the most important thing is to show the playing cards.

There are 54 cards in a deck, and we give each card an id (id), which ranges from 1 to 54. If 2 decks of cards are involved, take the id as 1-108.

Displaying cards is actually giving you a list of ids, and you can display the cards in the list as needed.

The display cards have 3 sorting methods:

1. No sorting, just show what the list is. (Commonly used for dealing cards and hole cards)
2. Sort by size. (Commonly used in hand)
3. Sort by card rules. (Commonly used for playing cards, rules such as straight, pair, plane, four with two, bomb, etc.)

Today, let's make them happen!

Step 1, reveal 1 card

Prepare material

There are 54 kinds of cards, plus the back of the card, there are 55 kinds of patterns. Let's prepare the material first:

If you want to display 1 card, use it as the background and use background-positionand width, heightto crop the entire large picture.

Don't disassemble this big picture and let users download 55 pictures at a time, as the speed will be slow to the naked eye. Because most browsers cannot download images with 55 concurrent requests, it may establish up to 8 TCP connections to download at a time, and you may need 8 RTTs to complete the download.

Therefore, when doing web development, you must try to stitch multiple small materials into a large picture, and then cut it to display the materials.

Write css for cropping

We use class to define a .pokerstyle that is common to all playing cards, and then define a background-position(cropping position) for each playing card.

.poker {
  position: absolute;
  background-image: url('./card.png');
  background-clip: content-box;
  background-repeat: no-repeat;
  width: 116px;
  height: 159px;
  transform-origin: 0 0 0;
  transition: left .2s ease-out, top .2s ease-out;
}

For example, this is the style of a playing card with id 1. The individual style of each playing card is very simple, only 1 line, just define it background-position. Because other styles are exactly the same, .pokeryou can reuse them.

.poker-1 {
  background-position: -238px -646px;
}

不再罗列了，可以参考style.css源码: github.com/HullQin/pok…

定义 扑克牌ID->图片ID 的映射

开头我们提到，可能有2幅牌，而他们的图片样式应该是一样的。所以需要通过取余数，把108个ID映射到54个值。

const mapPokerIdToCardId = (id) => {
  // 映射扑克id（可能有多幅牌）至卡片id（只有0-54）
  return (id - 1) % 54 + 1;
};

代码中，我用id = 0表示扑克牌的背面。

封装一个组件

你可以封装为React组件或Vue组件，或其它你采用框架支持的组件。

我代码使用了React，所以封装为React组件。

import cn from 'classnames';

const Poker = (props) => {
  const { id, className, ...otherProps } = props;
  if (typeof id !== 'number') return;
  const cardId = mapPokerIdToCardId(id);
  return (
    <div
      className={cn('poker', `poker-${cardId}`, className)}
      {...otherProps}
    />
  );
};

这是一个非常简洁的组件，只需要传入扑克牌的ID，就会展示这张扑克牌了。此外，可以传入className或者style，自定义样式。

至此，展示1张扑克牌，我们就完成啦！

第2步，不排序展示多张牌

目前还比较简单，只需要提供一个扑克牌ID列表，我们依次展示即可。我们用ids参数作为扑克牌ID列表，需要组件引用者传入。

我们需要关注一下扑克牌图片的高度，我们定义一个默认高度（159），此外也允许引用组件者通过height新设置高度。

我们还需要关注扑克牌之间的间隔：如果是底牌，那么间隔大一些；如果是手牌、或者出牌，牌会比较多，间隔应该是负数，有重叠的效果。我们用overlap参数，表示是否需要重叠。

const StaticPokerList = (props) => {
  const { ids, overlap, height = 159, className, style, ...otherProps } = props;
  const gap = (overlap ? 48 : 116) * height / 159;
  return (
    <div className={cn('static-poker-list', className)} style={{ height, ...style }} {...otherProps}>
      {ids.map((id, index) => (
        <Poker
          key={index}
          id={id}
          style={{ left: index * gap, transform: `scale(${height / 159})` }}
        />
      ))}
    </div>
  );
};

可以看到，我们引用了Poker组件，并控制了每一个扑克牌的left属性，让它们等间距排列。

你可能会问：啊！你为什么用列表的index做Key呢？为什么不用扑克牌ID做Key呢？

因为我们这个列表非常小，不超过108，不会有性能问题，所以采用了最稳妥的方式，以index作Key，是独一无二的，绝不会出错。如果你能保证你传入的扑克牌ID唯一，也可以使用扑克牌ID作Key。

第3步，按照大小排序

扑克牌是有大小的，顺序是：大王、小王、2、A、K、Q、J、10、9、8、7、6、5、4、3。

此外，为了美观，我们也期望同样大小的数字的花色，也是有顺序的。例如按照♥️、♦️、♠️、♣️的顺序排列，当你有很多炸弹时，会非常漂亮，令玩家舒适。

所以，我们要按数字大小排列，数字相同时，按固定花色顺序排列。

只要修改一下StaticPokerList，对它的ids参数做一个排序即可。

排序依据是什么呢？需要手写函数嘛？

答案是：当然不需要！只要我们把54个ID映射到54个数字，再按数字排序，就大功告成了！这是效率非常高的方式！

这定义了映射，传入ID为1-54，即可映射到牌的具体大小。规定四个花色的小数部分不一样，分别为.2 .4 .6 .8，这样数字相同时，就按花色排序啦。

定义好每张牌的数字，再根据大小数值排序即可。

const pokerMap = [0, 14.2, 15.2, 3.2, 4.2, 5.2, 6.2, 7.2, 8.2, 9.2, 10.2, 11.2, 12.2, 13.2, 14.4, 15.4, 3.4, 4.4, 5.4, 6.4, 7.4, 8.4, 9.4, 10.4, 11.4, 12.4, 13.4, 14.6, 15.6, 3.6, 4.6, 5.6, 6.6, 7.6, 8.6, 9.6, 10.6, 11.6, 12.6, 13.6, 14.8, 15.8, 3.8, 4.8, 5.8, 6.8, 7.8, 8.8, 9.8, 10.8, 11.8, 12.8, 13.8, 54, 53];

这就是排序函数，传入ids，输出排好序的ids。

const sortPokersById = (ids) => {
  return ids.sort((a, b) => pokerMap[mapPokerIdToCardId(b)] - pokerMap[mapPokerIdToCardId(a)]);
};

当然，这调用了mapPokerIdToCardId，是考虑到2幅牌的情况，先把1-108映射到1-54，再映射到具体数值。

第4步，按照规则排序

上面按大小排序还是太简单，只有结合了游戏规则的排序，才是最难的！

我根据斗地主规则，总结了这样的排序算法：

输入：ids，即你出的牌的列表（前提：是符合斗地主规则的一串牌）。

输出：sortedIds，按出牌规则排好序的列表。

1. 统计每个数字的出现次数。
2. 按照出现次数排序，出现频次高的，放在前面。
3. 如果频次相同，按照数字大小排序。数字小的，放在在前。
4. 同样的数字，要按照固定花色顺序排序，保证美观。

验证算法正确性：

• 顺子：3、4、5、6、7。频次都是1，排序结果是3、4、5、6、7。
• 连对：QQ、KK、AA。频次都是2，排序结果是QQ、KK、AA。
• 三带一：KKK2。K频次是3，2频次是1。排序结果是KKK、2。
• 四带两对：44443322。4频次是4，3和2频次是2。排序结果是44443322。
• Wang fried: king, king. The frequency is all 1, and the number of kings is specified to be smaller , then the sorting results are kings and kings.

This is defined pokerNumberMapas the size of the number. In order to let the king be in front of the king and the king behind when the king is bombed, we stipulate that the king=53 and the king=54.

pokerRuleMapThere is also a decimal part, in order to sort by suit when the same number is used.

const pokerRuleMap = [0, 14.2, 15.2, 3.2, 4.2, 5.2, 6.2, 7.2, 8.2, 9.2, 10.2, 11.2, 12.2, 13.2, 14.4, 15.4, 3.4, 4.4, 5.4, 6.4, 7.4, 8.4, 9.4, 10.4, 11.4, 12.4, 13.4, 14.6, 15.6, 3.6, 4.6, 5.6, 6.6, 7.6, 8.6, 9.6, 10.6, 11.6, 12.6, 13.6, 14.8, 15.8, 3.8, 4.8, 5.8, 6.8, 7.8, 8.8, 9.8, 10.8, 11.8, 12.8, 13.8, 53, 54];
const pokerNumberMap = [0, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 54, 53];

The following is the sorting function. As you can see, we counted first frequency. When sorting the ids, we judged which of the two numbers appeared more frequently, and the higher one came first.

const sortPokersByRule = (ids) => {
  const frequency = {};
  for (const id of ids) {
    const cardNumber = pokerNumberMap[mapPokerIdToCardId(id)];
    if (cardNumber in frequency) {
      frequency[cardNumber] += 1;
    } else {
      frequency[cardNumber] = 1;
    }
  }
  return ids.sort((a, b) => {
    a = mapPokerIdToCardId(a);
    b = mapPokerIdToCardId(b);
    const frequencyA = frequency[pokerNumberMap[a]];
    const frequencyB = frequency[pokerNumberMap[b]];
    if (frequencyA === frequencyB) {
      return pokerRuleMap[a] - pokerRuleMap[b];
    }
    return frequencyB - frequencyA;
  });
};

write at the end

My name is HullQin. I have independently developed the "Online Board Game Collection" . It is a web page that can easily play Doudizhu, Gobang, UNO and other games online with friends . Also independently developed "Synthetic Big Watermelon Remake" . If you like it, you can follow me~ I will share the related technologies of making games when I have time, and I will share them in these two columns: "Teach You to Make Small Games" and "Extreme User Experience" .

I am participating in the recruitment of the creator signing program of the Nuggets Technology Community, click the link to register and submit .