在线棋牌游戏开发(一) 本地棋牌游戏开发

介绍

本文是做一款游戏的心路历程。（不完全是教程）

简书原文（排版好看点）：http://www.jianshu.com/p/5fb6076387fa

已经发起了离职流程，工作交接的空暇时间，来搞点事情吧。博主的水平属于菜逼型，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个人有问题呀，下到一半刷新的问题呀，服务器没有校验操作，数据交互等等等。。。 没事，后面我们再继续。 第一期的代码等下上次，里面有部分代码因为是从别的地方扒的，没什么卵用，但也没有删除，将就吧。

简书原文（排版好看点）：http://www.jianshu.com/p/5fb6076387fa