如何用JavaScript编写一个识别长尾词的翻卡游戏？

本文共计2270个文字，预计阅读时间需要10分钟。

目录+前言+翻牌动画+生成随机分布数组+基于平均元素下的随机算法+基于非平均元素下的随机算法+生成最终数组+点击事件+完整代码+前言+首先将这个游戏需求成三个部分：+翻牌动画+生成随机分布数组+随机算法+

目录

• 前言
• 翻卡动画
• 生成随机分布数组
• 均匀元素下的随机算法
• 不均匀元素下的随机算法
• 生成最终数组
• 点击事件
• 完整代码

前言

首先将这个游戏需求拆分成三个部分：

• 翻卡动画
• 生成随机分布数组
• 点击事件

翻卡动画

假如我们的盒子模型不是个二维的平面，而是有个三维的体积，让它可以有正反两面，那我们在做的时候是不是只要将它真实的翻个面就可以了。让我们来想想将它变成三维的方法。 之后发现了这个属性：

transform: translateZ(1px);

使用了它，就可以把盒子内部的元素与盒子的底部撑出个高度。