游戏界面预览
目录
一.游戏介绍
1.起源
2.规则
3.技巧
二.游戏设计
1.整体UI构思
2.素材采集
3.游戏总规划
三.代码实现
0.编码规范以及优化记录
1.HTML文档结构
2.CSS布局与动画
3.JavaScript功能模块
四.游戏测试（以下所列皆可正常运行游戏）
1.PC端
2.移动端
五.番外篇
致谢
版权
一.游戏介绍
1.起源
21点又名黑杰克（英文：Blackjack） ，起源于法国，已流传到世界各地。21点，是一种使用扑克牌玩的赌博游戏。亦是唯一一种在赌埸中可以在概率中战胜庄家的一种赌博游戏。
2.规则
- 21点是一张牌面朝上(叫明牌)，一张牌面朝下(叫暗牌);给自己发两张牌，一张暗牌，一张明牌。
- 玩家手中扑克点数的计算是:K、Q、J 和 10 牌都算作 10 点。
- A 牌既可算作1 点也可算作11 点，由玩家自己决定。
- 其余所有2 至9 牌均按其原面值计算。
- 如果玩家前两张牌是A 、10点牌，就拥有黑杰克(Blackjack);
- 如果庄家没有黑杰克，玩家就能赢得2倍的赌金(1赔2)。
- 没有黑杰克的玩家可以继续拿牌，可以随意要多少张。目的是尽量往21点靠，靠得越近越好。
- 如果所有的牌加起来超过21点，玩家就输了--叫爆掉(Bust)，游戏随之结束。
- 如果玩家没爆掉，又决定不再要牌了，这时庄家就把他的那张暗牌打开来。
- 一般到17点或17点以上不再拿牌，但也有可能15到16点甚至12到13点就不再拿牌或者18到19点继续拿牌。（本游戏采用1号电脑的逻辑为达到16点便不再拿牌）
- 假如庄家爆掉了，那他就输了.
- 假如他没爆掉，那么你就与他比点数大小，大为赢。一样的点数为平手。
3.技巧
- 障眼法
- 这种方法主要适合于闲家，而且在众多玩家参与的时候适用。
- 一般在闲家明牌是10点的时候，如果牌底是3~7点，一般拿到这种点数特别难受，如果要牌，有50%的机率会暴，因为闲家暴点是100%输，不要牌可能也会输，我暂且把它称为尴尬点数。这时候，闲家如果观察到别的闲家点数都比较大，而且都不要牌的情况下，可以跟着不要。这样一来，就会给庄家很大的压力，以为每一位闲家手中的牌都是比较大的点数，如果庄家同样拿着尴尬点数，这种情况只能逼着庄家要牌，很明了，无形中所用的这个障眼法是把风险转移给了庄家，输赢靠天定了，看哪个运气好了，若庄家爆了，则闲家赢。
- 姜太公钓鱼法
- 这种方法主要适合于闲家，而且在众多玩家参与的时候适用。
- 一般在闲家明牌是10点的时候，如果牌底是3~7点，一般拿到这种点数特别难受，如果要牌，有50%的机率会暴，因为闲家暴点是100%输，不要牌可能也会输，我暂且把它称为尴尬点数。这时候，闲家如果观察到别的闲家点数都比较大，而且都不要牌的情况下，可以跟着不要。这样一来，就会给庄家很大的压力，以为每一位闲家手中的牌都是比较大的点数，如果庄家同样拿着尴尬点数，这种情况只能逼着庄家要牌，很明了，无形中所用的这个障眼法是把风险转移给了庄家，输赢靠天定了，看哪个运气好了，若庄家爆了，则闲家赢。
- 补救法
- 这种方法庄家闲家都适用。
- 所谓补救，就是拿到的是前面所提到的尴尬点数，输地可能性极大，在明知道牌点数就比对手点数小的情况下，我们只能要牌，因为不要也是输，而要牌还有一线希望是赢，所以我们能选择的就是奔那一线希望，寄希望总比放弃希望好。
二.游戏设计
1.整体UI构思
- 背景：我认为需要一个暗色的、非纯色的背景。
- 桌面：一张记忆中赌博赛事的标准绿色桌子，木质黄色的边。
- 按钮：于是有了简约风格的画面，接下来我考虑将按钮在桌面中。
- logo：考虑到游戏叫 21点，所以 应用了简单却不失代表性的带阴影的透明21图标。
- 候牌：做两个等牌区的底框（透明的淡色框），等待发牌，并标注玩家x号。
- 积分：考虑到筹码问题，于是在等牌区的一侧做一个不太复杂的标注，响应整体简约的风格。
- 标题：放在桌面的正*，游戏主题的表示，BlackJack(21)足矣。
- ⚠️不能贴顶，至少产生h1 { margin-top:20px;} 以保持美感。
- 游戏界面的色彩搭配灵感部分来源于其他网络扑克游戏
- （游戏素材均来自网络）
2.素材采集
3.游戏总规划
- 利用html＋css将设计好的整体的布局＋采集到的素材➡️应用到配置、搭建一个初始的页面，后期再给予精确调整控制。
- html基本文档结构
-
css布局
根据游戏的需求来编写不同的css动画和js功能函数以贴近游戏规则、增强游戏体验。 -
css动画
- 使用animation keyforms完成动画:保证每次新局首发牌一人两张，且1号电脑玩家的第二张牌为暗牌，后再发牌则进行一人一张动画。
- 配合js控制扑克牌发出前后的显隐，特别是亮牌后1号电脑暗牌的显示。
-
JavaScript各功能函数设计
-
实现actions系列按钮的功能
- 新局 sendCard()
- 要牌 sendCard()第二次开始
- 亮牌 showSend()
- 退出游戏 exit()
- 初始化整副牌的数组，即洗牌，给52个数字重新分配扑克牌的值（花色，数字）
- 本游戏设定只有一副牌，即在一个length为52的数组中抽取牌进行游戏，也就是说每次新局开始便初始化，保证其有52张牌的相应概率来进行游戏，属于不放回游戏。
- 每张牌的选取靠js配合for控制量i对每张牌的坐标进行计算以保证每次新局初始化时都可以在random的控制下以tmp结果随机选取一张牌（剩余的牌堆中）。
- 实现发牌后css动画结束前 ，计算相应偏移位置并自动添加html内容，使得动画结束之时，添加落牌刚好衔接，其中使用了for中的i控制外加settimeout实现单次计时。
-
实现actions系列按钮的功能
-
本游戏规则的逻辑设定声明：
- 每次开局一人两张牌，后每次要牌均为单张发牌动画。
- 1号电脑的设定是发牌小于16时，则在2号玩家点击要牌的同时加一张牌。若大于16，则不再要牌。2号玩家则自行判断，任意要牌。
- Ace牌的1或11，在亮牌时进行智能判断：
- 如果按11算不会爆牌则会按照11计算
- 如果按照11算会爆牌则会按照1来计算
- 黑杰克：新局初次发牌两张为1+10
- 若为黑杰克，且庄家没有黑杰克时，则获胜时筹码加倍。
- 庄家设定为一号电脑。
- 如果双方有一方拿牌爆掉，便判定另一方为获胜方。
- 如果都没有在拿牌过程中爆掉，则正常比对双方拥有的点数，小于21点且大的一方：获胜。
- Actions操作系列按钮说明：（从左到右依次）
- 手掌