[360前端星计划]BlackJack(21点)(纯JS,附总部学习笔记)
游戏界面预览
目录
一.游戏介绍
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操作系列按钮说明:(从左到右依次)
- 手掌
[360前端星计划]BlackJack(21点)(纯JS,附总部学习笔记)的更多相关文章
- 参加360前端星计划总结(二)--HTML&CSS
HTML学习手册(英文版)html:the living standard 重要知识点 文档声明的作用a. 指定html的文档标准和版本b. 告诉浏览器渲染模式,有怪异模式(较为古老的模式,不写文档声 ...
- 前端星计划笔记-day1
前端 功能,美观,安全,无障碍,性能,兼容,体验 前端编程思想 WA doctype: 文档版本 浏览器决定渲染模式 语义化: 所有的标签都有自己的含义,属性 可读性 前端规范 whatwg css显 ...
- BZOJ 2595: [Wc2008]游览计划 [DP 状压 斯坦纳树 spfa]【学习笔记】
传送门 题意:略 论文 <SPFA算法的优化及应用> http://www.cnblogs.com/lazycal/p/bzoj-2595.html 本题的核心就是求斯坦纳树: Stein ...
- 转: 写给想成为前端工程师的同学们 (from 360前端团队)
转自: http://www.75team.com/post/to-be-a-good-frontend-engineer.html 前端工程师是做什么的? 前端工程师是互联网时代软件产品研发 ...
- Deep learning:四十(龙星计划2013深度学习课程小总结)
头脑一热,坐几十个小时的硬座北上去天津大学去听了门4天的深度学习课程,课程预先的计划内容见:http://cs.tju.edu.cn/web/courseIntro.html.上课老师为微软研究院的大 ...
- [Android Studio 权威教程]Windows下安装Android Studio
从AS 0.5版本号開始使用.也是AS的推行者,在ApkBus公布的第一篇Android Studio Perview 2 获得了50K的浏览,1800多条回复下载. 在我的[Android Stud ...
- [Android Studio 权威教程]配置出“NB”的Android Studio
前几篇博客我们已经安装好了As,并且创建了我们的第一个HelloWrod ,这片blog我们继续配置出一个NB的Android Studio 假设你是一个才開始接触到AS或者想从Eclipse转型到A ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- [Python3] 021 面向对象 第一弹
目录 1. 面向对象概述 1.1 OOP 思想 1.2 几个名词 1.3 类与对象 2. 类的基本实现 2.1 类的命名 2.2 如何声明一个类 2.3 如何实例化一个类 2.4 如何访问对象成员 2 ...
- CentnOS7安装Nginx“No package available”
Nginx相对Apache有轻量级,简洁的优点,算得上Apache的优秀替代品了,但是由于Nginx不在yum的官方源中,因此安装时总会出现失败的现象,只需: yum install epel-rel ...
- [暑假集训Day2T3]团建活动
个人认为这周题中较难的一道. 题意大概为:给定一张N个点M条边的无向图,求出无向图的一棵最小生成树,满足一号节点的度数不超过给定的整数K.保证 N <= 20 首先用map存取节点,之后抛去1号 ...
- 如何学习 websocket ?
如何学习 websocket ? 使用 HTML https://github.com/phoboslab/jsmpeg MPEG1 进行播放 https://w3c.github.io/media- ...
- Pull Request的正确打开方式(如何在GitHub上贡献开源项目)
Pull Request的正确打开方式(如何在GitHub上贡献开源项目) GitHub的官方帮助如下: Fork A Repo: https://help.github.com/articles/f ...
- JVM(14)之 类加载机制
开发十年,就只剩下这套架构体系了! >>> 从本篇博文开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要 ...
- 【学习总结】GirlsInAI ML-diary day-20-初识 Kaggle
[学习总结]GirlsInAI ML-diary 总 原博github链接-day20 初识kaggle 1-注册一个账号(由于被谷歌收购,因此可能需要梯子) 2-Competition - 学会看一 ...
- App.Config操作
public class ConfigUtils { public static string filename = System.Windows.Forms.Application.StartupP ...
- c#同时验证手机号和座机号正则
string strPatern2= @"(^(\d{3,4}-)?\d{6,8}$)"; string strPatern = @"(^1[3-8]\d{9}$|^\d ...
- golang指针函数
func main() { a := models.SmsVerify{} a.Id = 100 fmt.Println(a.Id) // 100 test111(a) fmt.Println(a.I ...
- 参加360前端星计划总结(二)--HTML&CSS
- 手掌