我们一起学程序-五子棋

  • A+
所属分类:Web前端
摘要

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


前言


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

我们一起学程序-五子棋

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

体验效果


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

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

我们一起学程序-五子棋

游戏准备过程

我们一起学程序-五子棋

下棋过程

 

关键技术简介


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

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

 

从无到有思路


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

我们一起学程序-五子棋

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

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