［360前端星计划］总部学习笔记（6/6）

［360前端星计划］详情跳转

游戏界面预览

目录

一.游戏介绍

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实现单次计时。
  • 本游戏规则的逻辑设定声明：
    • 每次开局一人两张牌，后每次要牌均为单张发牌动画。
    • 1号电脑的设定是发牌小于16时，则在2号玩家点击要牌的同时加一张牌。若大于16，则不再要牌。2号玩家则自行判断，任意要牌。
    • Ace牌的1或11，在亮牌时进行智能判断：
      • 如果按11算不会爆牌则会按照11计算
      • 如果按照11算会爆牌则会按照1来计算
    • 黑杰克：新局初次发牌两张为1+10
      • 若为黑杰克，且庄家没有黑杰克时，则获胜时筹码加倍。
      • 庄家设定为一号电脑。
    • 如果双方有一方拿牌爆掉，便判定另一方为获胜方。
    • 如果都没有在拿牌过程中爆掉，则正常比对双方拥有的点数，小于21点且大的一方：获胜。
    • Actions操作系列按钮说明：（从左到右依次）