基于HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到放弃(一)
2016-07-15 11:27
633 查看
介绍
已经发起了离职流程,工作交接的空暇时间,来搞点事情吧。博主的水平属于菜逼型,html,js,java勉强会写一点点,websocket也仅知道是个长接连,如果你连这个都不知道。建议先自行补习一下。 接下来讲咱们要做什么东西吧,就是一个五指棋游戏,然后有个大厅,可以去开房,然后就可以跟棋友啪啪啪下棋了。看起来好像很简单,但我们还是从更简单的开始吧。
正文
第一期的目标我们是搭建一个webSocket的服务器,然后做一个简单的五指棋,然后连接上去的两个人就可以开始下棋啦。也不考虑各种bug啦。
后端代码
首先是搭建一个webSocket的服务器,网上好多都是spring+WebSocket的,不过不用spring框架也是ok的。 这边提供一个简单的demo吧。(请等我上传,哈哈哈)。点注解进去可以发现一些可选的参数,反正我们现在也不用。
@ServerEndpoint("/websocket") public class WebSocketTest { @OnMessage public void onMessage(String message, Session session) throws IOException, InterruptedException { //收到客户端消息 session.getBasicRemote().sendText("hello"); } @OnOpen public void onOpen () { //有一个客户端链接 System.out.println("Client connected"); } @OnClose public void onClose () { //有一个客户端断开 System.out.println("Connection closed"); } }
然后需要Tomcat启动。 这么一个webSocket的服务器就搭建完了,然后咱们就来实现五指棋的逻辑咯。后端的逻辑分为两部分,第一是等待连接(没两个人下什么棋呢),第二步是客户端开始下棋,进行广播。
第一部分
代码比较简单的,(因为并没有进行详细的规划,所以前后交互的数据格式也是比较扯淡的,后面会做的比较好,暂时就这样吧,以json的格式).数据封装成一个Action,然后传给前端。
Set<Session> session_list =null; session_list =session.getOpenSessions(); if (session_list.size() == 2){ System.out.println("Ready Start Game"); //first Session session1 = (Session)session_list.toArray()[0]; StartAction startAction1 = new StartAction(); startAction1.setDetail("Black"); session1.getBasicRemote().sendText(new Gson().toJson(startAction1)); //second Session session2 = (Session)session_list.toArray()[1]; StartAction startAction2 = new StartAction(); startAction2.setDetail("White"); session2.getBasicRemote().sendText(new Gson().toJson(startAction2)); }
第二部分: 第二部分的逻辑比较简单,接收到某一方下棋的指令,进行下棋,然后广播所有的链接,跟他们说,这个人下了个棋啦。
ChessAction chessAction = new Gson().fromJson(content, ChessAction.class); chessAction.setCode("Chess"); for (Session each : session_list){ each.getBasicRemote().sendText(new Gson().toJson(chessAction)); }
这里需要注意的是,最原始的版本我们是不在服务端保存棋盘的。所以是存在一定问题的,后面再搞一搞咯。
前端代码
前端代码是网上扒一个单机的版本进行改造的,重点讲几部分吧。 创建一个webSocket的链接
host = document.location.host; host = "ws://" + host + "/chess"; var webSocket = new WebSocket(host);
收到服务端消息
webSocket.onmessage = function(event) { onMessage(event) }; function onMessage(event){ var action = JSON.parse(event.data); if (action.code == "Start"){ startGame(action); }else if (action.code == "Chess"){ recieveChessMsg(action); } }
发送消息
function sendChessMsg(color, x, y){ var chessAction = new Object(); chessAction.color = color; chessAction.x = x; chessAction.y = y; var chessInfoStr = JSON.stringify(chessAction); webSocket.send("chess" + chessInfoStr); }
其他的画布呀,画一个五指棋出来什么的,大家网上扒一扒就行,或者直接下载源码就ok了。
总结
第一期我们就简单地搭建了一个简单的在线五指棋。当然这当中存在相当多的问题,例如:没有房间呀,链接数超过3个人有问题呀,下到一半刷新的问题呀,服务器没有校验操作,数据交互等等等。。。 没事,后面我们再继续。 第一期的代码等下上次,里面有部分代码因为是从别的地方扒的,没什么卵用,但也没有删除,将就吧。
相关文章推荐
- java对世界各个时区(TimeZone)的通用转换处理方法(转载)
- java-注解annotation
- java-模拟tomcat服务器
- java-用HttpURLConnection发送Http请求.
- java-WEB中的监听器Lisener
- Android IPC进程间通讯机制
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- 介绍一款信息管理系统的开源框架---jeecg
- 聚类算法之kmeans算法java版本
- java实现 PageRank算法
- PropertyChangeListener简单理解
- 2015-2016网页设计趋势分析 Web Design of Trends
- c++11 + SDL2 + ffmpeg +OpenAL + java = Android播放器
- 插入排序
- 冒泡排序
- 堆排序
- 快速排序