基于HTML5+WebSocket+JAVA的棋牌游戏开发,从入门到放弃(三)
2016-07-22 09:03
661 查看
我的简书地址
之前我们增加了房间,但并没有限制房间只能进入2个人
增加一个守护线程,统计当前房间的数量,后面我们将继续完善这个守护线程的功能。
展示上一个棋子落在何处
离开房间后会减少房间的人数,并回收房间
第二个我们需要创建一个新的线程。
第三个是一个纯粹的前端开发工作,我们可以新增两个图片,并每次标记上一次的位置,当下一个子的时候,画一个特殊的子,并用一张normal的子覆盖上一个子。
第四个是发生在断开连接的时候。
只要在进入房间失败的时候返回一个错误信息给前端即可。当然前端也要处理这个错误信息咯。
第二个功能,创建一个简单的Deamon,我们用一个context来传入运行时的一些参数。
我们可以在DeamonThread类中实现各种功能,例如每隔30s统计房间的总数。
第三个是一个前端功能,我们新增了两张新的图片,用last_x, last_y来表示上一个棋子落在何处。一开始我们初始化为-1。
第四个,前面我们提到在onClose方法中,有可选的参数Session,我们可以通过这个Session来获取到房间号。
PO一张图,现在的变成这样了。。。
![](http://upload-images.jianshu.io/upload_images/2532461-dee6a408c5b6a634.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
源代码下载地址
前言
之前我们已经完成了一个有房间的五指棋游戏,现在我们将进一步来完善这个东西。这一次我们打算新增的功能有:之前我们增加了房间,但并没有限制房间只能进入2个人
增加一个守护线程,统计当前房间的数量,后面我们将继续完善这个守护线程的功能。
展示上一个棋子落在何处
离开房间后会减少房间的人数,并回收房间
思考
第一个功能应该是发生在建立连接的时候,如果房间里超过2人,则返回前端一个错误。第二个我们需要创建一个新的线程。
第三个是一个纯粹的前端开发工作,我们可以新增两个图片,并每次标记上一次的位置,当下一个子的时候,画一个特殊的子,并用一张normal的子覆盖上一个子。
第四个是发生在断开连接的时候。
实现
第一个功能。Room room = roomMap.get(roomId); if (room.enterRoom(session)){ session.getUserProperties().put("roomId", roomId); }else{ Result result = new Result(); result.setSuccess(false); result.setErrMsg("进入房间失败"); session.getBasicRemote().sendText(new Gson().toJson(result)); }
只要在进入房间失败的时候返回一个错误信息给前端即可。当然前端也要处理这个错误信息咯。
第二个功能,创建一个简单的Deamon,我们用一个context来传入运行时的一些参数。
static { RunContext context = new RunContext(roomMap); DeamonThread deamonThread = new DeamonThread(context); Thread dThread = new Thread(deamonThread); System.out.println("Create Thread"); dThread.start(); }
我们可以在DeamonThread类中实现各种功能,例如每隔30s统计房间的总数。
public void run() { while (true){ try{ System.out.println("RoomSize is[" + runContext.getRooms().size() + "]"); Thread.sleep(30000); }catch (Exception e){ } } }
第三个是一个前端功能,我们新增了两张新的图片,用last_x, last_y来表示上一个棋子落在何处。一开始我们初始化为-1。
if (x >= 0 && x < 15 && y >= 0 && y < 15) { if (chess == 1) { if (last_x > 0 && last_y > 0){ context.drawImage(img_b, last_x * 40 + 20, last_y * 40 + 20); } context.drawImage(img_w_now, x * 40 + 20, y * 40 + 20);//绘制白棋 chessData[x][y] = 1; } else { if (last_x > 0 && last_y > 0){ context.drawImage(img_w, last_x * 40 + 20, last_y * 40 + 20); } context.drawImage(img_b_now, x * 40 + 20, y * 40 + 20); chessData[x][y] = 2; } judge(x, y, chess); last_x = x; last_y = y; }
第四个,前面我们提到在onClose方法中,有可选的参数Session,我们可以通过这个Session来获取到房间号。
String roomId = (String)session.getUserProperties().get("roomId"); Room room = roomMap.get(roomId); if (room != null){ room.leaveRoom(session); if (room.getNowNumber() <= 0){ roomMap.remove(roomId); } } System.out.println("Connection closed");
PO一张图,现在的变成这样了。。。
![](http://upload-images.jianshu.io/upload_images/2532461-dee6a408c5b6a634.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
总结
我们又往前走了一步。这一次主要都是一些功能的完善吧。虽然还面临着诸多问题,但没事,我们可以慢慢地改进。源代码下载地址
相关文章推荐
- 2015-2016网页设计趋势分析 Web Design of Trends
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 原生js结合html5制作小飞龙的简易跳球