我们一起学程序 - 五子棋

用户头像
叫练
关注
发布于: 2020 年 09 月 03 日
我们一起学程序-五子棋

前言    


小时候很喜欢玩电视上自带的积木游戏,那时候电子产品也不少,小学就认识了low和high两个单词,因此攒了零花钱搞到了高级版的游戏--小霸王学习机,说错了,是“游戏机”,特别是一放暑假,插个小霸王游戏机卡就能开始撸几把魂斗罗,坦克大战,比夏天吃根冰棍可香多了,那时候没有空调,不惧严寒酷暑的我们在这些小游戏的陪伴下玩的不亦乐乎,陪我们度过一个又一个快乐冬夏,下图为证,有没有很熟悉的赶脚!



image.png



看着这些画面,带着学习的心情的出发了,开始我们的五子棋大战;砍柴磨刀互相不耽误,先看看实现的网络版本效果吧,当然为了你看着舒服,体验的开心,博主花了些功夫大致在客户端(手机)做了适配,不至于你屏幕溢出,你爽我爽大家爽;简单说明下本人主攻后端Java,前端不深入,页面效果将就看看哈!



体验效果


看看你想下盘棋,你需要做什么,首先你需要抢个位子啊【我媳妇说这个举手的小人太丑了,能换个动漫吗,我说我对漫画没啥审美,但是对另一半要求很高,所以我们在一起了,嘻,这个求生欲也特强了吧!】,然后你就到棋盘页面了,点击举手坐下,你就开始等,有人来了也举手了你们就可以开始了,就像你去棋牌室打牌一模一样,如果硬说有啥区别,咱们这是学习,他们那是赌博,好了,好了,扯远了,简单介绍下,五子棋的规则大家都懂,你五个棋子连成一条线就胜利了,一攻一防,胜率就看你的手段了,不知道你有没有发现,博主为了不让你有更多的束缚,连账户密码都默认为你输出了,同时为了让程序不是那么单调,下棋还能发声,还实现了查看复盘,和在线聊天,聊天IP内容已经存档,自动过滤色情信息;博主为你们担心的事情都精心考虑设计实现,是不是暖男你们说了算!下面两个动画分别是“准备过程”和“下棋过程”;

体验地址:棋体验地址,有些功能可能有不完善的地方,功能也不特别太全,但基本功能应该是满足了,如果没有人陪你玩,你可以开两个客户端体验或call me,一毛钱一把,欢迎来战,如果有强迫症的或是有good idea,想要加入我们的修改的童鞋,欢迎留言加入我们,让我们共同成长。



准备过程.gif



下棋过程.gif



关键技术简介


其实在开发完这个小游戏后,回顾总了下,没有啥高精尖的技术,前端页面完全是html,css(样式),js+jquery(脚本语言),像“举手准备”,“画棋盘”等都是用到的这些前端技术,大家看到的淘宝页面基本都是基于这些技术来完成的;后端用到的技术是websocket,很多面试官会问到websocket和http的区别,博主简单介绍下,它是一个双向通信的协议,这个不难理解,如果你打我了,我也可以还手,不像http,它是单向的,比如你打我了,我就只能默默忍着,顶多就能回骂一句,绝不能还手,相信在这个人人平等的社会,你肯定喜欢websocket,他帮助我们实现了在线聊天,咿!我怎么突然想到了QQ,感觉我像腾讯的高级攻城狮一样牛掰;当然了,作为一个Java攻城狮,必须要理解的就是线程啦,我们里面的“查看复盘”的功能就用到了Java读写文件和多线程技术;是不是小小的程序还有大大的奥妙;好啦,就到这里吧,明不明白都不要紧,因为我们后面详细一点你就能明白了!

总结下:前端css+js实现画页面和交互,后台Java+websocket实现存储和通信!相信有一点基础的你,肯定也能实现这个程序;在实际开发中,前后端是两个不同的岗位,前后端各司其职,当然有些小公司要求程序员都要会,所以有些时候在挑选公司时擦眼睛不是眼里进了沙子,是为了看的更清楚!



从无到有思路


这个程序博主一个人断断续续差不多花了两个礼拜完成的,当然你肯定怀疑我是否有一气呵成的能力,可以肯定的回答你,你的怀疑是对的,因为我也是人,我不能忘了吃饭和睡觉;最原始最原始的要追忆到两周前,下图是最初的版本,这是在idea控制台输出的,是的,你没有看错,五子棋程序实现了,“五子棋连线成功,恭喜你赢了”,说实话,打出这句话,连我这么没有追求的人都觉得他太枯燥了,生活它需要仪式感,你上面看到的页面都是我在仪式感基础上添加的;新事物,全新的页面,至少我感受到了程序至少还有那么一丝丝的美,是的,至少此刻我沦陷了,学程序我们要有意识的去追求一下她的美,不然他会教你从入门到放弃;



image.png



慢慢的,“仪式感”让我走向一条不归路,首先需要解决的问题,就是棋盘的问题,现实中有木头刻制的棋盘,网络上可以用代码生成的棋盘,现实的中棋盘有她独特的美感,网络中这些棋盘他就更灵活了,每个方格,棋盘大小都是可调整的,成本微乎其微,有了棋盘那就需要把棋子落在棋盘上,这些可以用css+js画出来的,还不用浪费木材,落子了每次都需要判断这次走的这步棋是否连成了一个五子,如果连成五子就赢了,如果没有就换对手下棋,每一步过程组合在一起就组成了棋盘,电脑有超强计算和存储能力,人脑也有,但电脑没有人脑灵活,人工智能尚在起步,未来可期;

下完棋后想看下过程于是就有了复盘会看功能;下棋要沟通就有了网络聊天室;棋牌室永远不止一个座位,于是就需要支持多个座位,多人同时娱乐;当然你也可以说自己水平不够,需要人机对战,提升经验,或者有人说游戏赢了或输了要有对应的奖惩机制,没错,你能想到的,有兴趣的事情你都可以动手实现,兴趣或者学习目的都好,总比无聊消磨时光来的更有意义;这就是我从无到有一步步构建出来的程序。欢迎和我一起讨论学习!【公众号:叫练

代码实现过程


1.棋盘实现

棋盘是用table表格画的,像你看到博主实现的这个表格,横轴是26,纵轴是23,每个格子的大小都是40像素,不信你话可以量量哈,前端循环放置在div中就可以了,格子像素是固定的,因为我们需要通过像素计算最终得到坐标,下棋过程就是通过点击格子,把白或黑的棋子(图片)放置上去,那怎么计算坐标呢?你需要计算相对于棋盘点击的坐标,也就是下图我们的红圈,我们知道棋盘表格(table)是整个页面(body)中的一部分,js中click事件可以获取到全局事件event变量,所以能够获取到相对于body的event.left,event.top,再减去table的top,left就可以得到表格具体的像素,table的top left可以通过getBoundingClientRect方法获取;table的像素再除40px就是具体坐标了;大家在实现的时候还需要注意一个有效点击,只有在这个范围内才算有效范围,像我们这个程序,是以坐标点15px都算有效点击;那么无效点击范围在16px-25px,也就是点击格子中间是无效的。举个例子吧,比如我们现在算出表格具体坐标是top:130px,left:70px,先计算这个坐标是否有效,130%40=10, 70%40=30,都不在无效范围内,说明是有效坐标,我们这里横纵坐标分别记为xy,那么具体坐标就y=130/40 =3,x=70/40=1,此时x坐标需要加上1,因为x坐标大于25,靠右,需要再除的基础上加上1,所以最终横纵坐标为(2,3),这个过程涉及到一点小算法,你对着下图再思考下这个计算过程看看是否有不明白的,万事开头难!下面的图方便大家理解!



image.png



2.计算棋子是否获胜

在写这个之前先给大家爆料下,没思考听到这个问题前呼吸都是混乱的,说实话真的好难啊,什么?还要实现,我TM不想学习了!嘿,兄嘚,别怕,有我在呢!怕解决不了问题,我牵着你,我们在一起吧!



image.png



兵马未动,图表先行,给大家先上个图吧,其实就四条线;一个"米"子,会写米字,问题就解决了,也就是说每次落子后需要逐一判断这4条线上是否有五个相同颜色的棋子,其实对应Java程序程序来说,他是用一个二维数组形式来存储的棋盘数据的,我们以红色为中心点,其实这个过程就是通过方式1(纵向):先向上找,找红色的棋子,找到一个计数器就+1,不是红色的棋子直接break退出,同理向下找,找红色的棋子,找到一个计数器就+1,不是红色的棋子直接break退出,最终如果满足5个相同颜色的棋就算成功,也不用再通过方式2,3,4找了,如果方式1不满足条件,方式1就结束了,接下来就按方式2(左斜)查找,也就是同样的套路,一直到方式4为止,哈哈,是不是有点感觉了!先以方式1查找举例子吧,对二维数组来说,以先上找后下找,上找:横坐标不变,纵坐标递减;下找:横坐标不变,纵坐标递增。再按方式三举例,先右上后左下查找,右上:横坐标+1,纵坐标-1,左下:横坐标-1,纵坐标+1;你看看原理还是很简单吧!isSuccess方法是按方式1查找的。



1599037247(1).jpg



public boolean isSuccess(int x, int y,int color,int[][] oriData) {
boolean flag = false;
int count = 0;
//(2)上-下,左-右,左上-右下,右上-左下; 4种方式
// 方式1 :上-下 x相同,y不同
//上 纵坐标递减;
for (int i = y-1; i>-1; i--) {
//判断同一颜色的子;
if (oriData[x][i] != color) break;
count++;
}
//下 纵坐标递增;
for (int i = y+1; i<GameManager.Y; i++) {
//判断同一颜色的子;
if (oriData[x][i] != color) break;
count++;
}
//重置
if(count >=4) return true;
else count = 0;
// 方式2
// 方式3
// 方式4
return falg
}

3.网络聊天室实现

不知道你有没有发现,你有时候浏览网页会弹出一些广告页,上面时长会自动弹出人工客服窗口,不需要登陆什么的,你们能在线对话,其实这个功能可能就是websocket实现的,我们说过,websocket是双向的,在实现上和http一样,都是基于TCP实现的应用层协议,除了http是单向,ws是双向的。在用法上http是以http://头请求的短连接,是一次请求,ws是以ws://请求头的长连接,我们在“五子棋游戏大厅”点击位置进入棋盘页面其实就是一个连接过程,前端通过ws://ip:port/xx形式连接后台暴露的地址,会触发后台onOpen函数,每个连接在后台都是以不同Session对象存在,通过Session可以获取每个每个网页的session的id,就可以调用sendText方法,通知对应的浏览器,这样一个过程就实现了浏览器和后台交互;比如我们的对话,每个桌子是保存两个用户(Session),当其中某一个用户发送了某段话,会通知对应的浏览器,另一个用户也会把这句话发给对应的浏览器,所以你看到的两个页面都出现了一样的文字,其实原理还是比较简单的。

我们画个图来理解下这个过程。



image.png



websocket通信过程



下面这两个段代码是websocket客户端和服务器交互的代码,只贴了部分源码,限于篇幅有限,如果需要完整代码,下方【环境部署部分】给了源码下载压缩包

webSocket = new WebSocket("ws://"+serverIp+"/game/game/"+table+"/" + nickname);



/**
* websocket服务连接入口
* update by jiaolian 2020 8 12
* 公众号:叫练
*/
@ServerEndpoint("/game/{table}/{nickname}")
public class WebserviceSession {
@OnOpen
public void onOpen(@PathParam("table") String tableName,@PathParam("nickname") String nickname, Session session) throws IOException {}
@OnMessage
public void onMessage(@PathParam("table") String tableName,String message, @PathParam("nickname") String nickname) {}
@OnClose
public void onClose(Session session,@PathParam("nickname") String nickname,@PathParam("table") String roomName) {}
}

4.查看复盘实现

这个功能是线程+文件实现的,既然需要查看复盘,那说明我们需要先写复盘,复盘其实就是写一个文件,查看复盘就是读文件,在一局棋中,每次落子就会写一行数据,每行数据会记录棋子的x,y坐标和棋子的颜色,按空格隔开,我们代码中Table【棋盘】对象保存color约定1为黑子,2为白子,当一局游戏结束后,查看复盘会生成对应一个线程,以每秒一行的速度读取保存在服务器的文件,文件名以“桌号+时间戳.wzq”命名,如:1_2020_09_01_15_45_15.wzq,每行数据读取出来后,会单独发给我们的User【Session】,浏览器收到通知后渲染页面就完事了;贴一段简单的代码;其中Table类是用来保存棋盘的;User类是用来保存用户信息的;finishReplayer()方法是读取文件,sendTextSingle()方法负责给浏览器发送信息;可以参考上面websocket通信过程;

/**
* @author :jiaolian
* @date :Created in 2020-08-14 13:30
* @description:桌号
* @modified By:
* 公众号:叫练
*/
public class Table {

//保存用户信息
@JsonIgnore
private List<User> userList = new CopyOnWriteArrayList<>();
//桌号名
private String name;
//默认棋盘
private int[][] oriData = new int[GameManager.X][GameManager.Y];
//约定:1 黑子 2 白子 -1 无子(页面选棋子) 此时应该走动棋子颜色;
//棋子颜色<默认黑子先走>
private int color = CONST.CHEER_COLOR.BLACK;
//对应的文件名<复盘> 最近一次
private String fileName;
//桌子状态; 已开始/未开始
private int tableStatus;
private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy_MM_dd_HH_mm_ss");
private List<User> tempList;
}



/**
* @author :jiaolian
* @date :Created in 2020-08-14 13:56
* @description:在线用户
* @modified By:
* 公众号:叫练
*/
public class User {

//websocket sessoin;
private Session session;
private String nickname;
//棋手是否已准备;
private boolean isPrepared;

//用户的复盘线程;key规则:桌号_用户名,为什么这么设计? 因为一个用户可能在多个桌子上同时游戏;
//val值设计成Boolean,主要是查询对应桌数用户线程是否执行完毕; 如果有疑问,请咨询叫练;
//设计这个目的主要实现:不能同时多次点击复盘;
private ConcurrentHashMap<String,Boolean> reviewThreadMap = new ConcurrentHashMap();
}



public void finishReplayer(Table table,User user) {
inputStream = new FileInputStream(table.getFileName());
inputStreamReader = new InputStreamReader(inputStream);
bufferedReader = new BufferedReader(inputStreamReader);
while ((res = bufferedReader.readLine()) != null) {
System.out.println(res);
//谁点谁看
GameManager.sendTextSingle(table,res,user);
try {
//休眠一秒
TimeUnit.SECONDS.sleep(1);
} catch (InterruptedException e) {
e.printStackTrace();
}
}

}

遇到问题


  • springMVC jackson返回实体对象通过不能修改后不能正常转化为json传递到前端?

在实现上述功能过程中,说没遇到问题是不可能的,很多都是业务的bug,就不详细介绍了 ,该五子棋程序没有写数据库,都是在内存处理的,其中渲染首页桌子页面的数据都是从后台一个大的List<User>获取的,如果List数据在修改后,再刷新首页,会出现栈溢出,不能写json的情况,目前处理的方式是用了@JsonIgnore忽略对象返回到前端,把这个List的User对象重新复制了一份到一个新的List<User>,查看了源码,暂时还没找到原因!找到原因的童鞋欢迎下方留言,一起探讨下!感谢了

Could not write JSON: Infinite recursion (StackOverflowError); nested exception is com.fasterxml.jackson.databind



源码下载地址及注意事项

  • JDK1.8及以上;有lamda表达式需要支持

  • maven;需要下载websocket包

  • 源码📎fivegame.rar



总结


整个程序实现下来还是有种莫名的成就感,博主希望把这个过程分享给你,如果你能有所收获,对我来说就是最大的宽慰,写作的目的也在于此,文章创作过程中涉及的内容和知识点可能不太全,后续如果有需要会适当补充和删改,这篇文章是博主的技术处女作,如果有疑问请下方留言哦!我们可以一起讨论交流学习心得;我是【公众号:叫练,边叫边练;喜欢的可以加关注哦!再次感谢大家的观看支持。

以上的文字,厚起脸皮问你要一颗小红心,你会给吗?体验地址:五子棋体验,再发一遍。



微信公众号.jpg



发布于: 2020 年 09 月 03 日 阅读数: 116
用户头像

叫练

关注

还未添加个人签名 2020.06.11 加入

还未添加个人简介

评论

发布
暂无评论
我们一起学程序-五子棋