菜单

根据HTML5+WebSocket+JAVA的棋类游戏支付,从入门到丢掉(二)

2019年10月3日 - Php

前方大家曾经落到实处了八个总结的五指棋,但问题非常多。这一篇,大家要减轻的难点有

周六跟妹纸玩那些游戏,开掘了几个难题

先是,当顾客连接的时候,我们供给抽出他是哪多个房间?大家须求叁个类Room来代表房间,房间须要一个标志RoomId。房内面或然有这么多少个动作?

  1. 进去房间(须求管理是还是不是步入?)
  2. 播音(踏入房间后,室内每种人的动作只要跟那么些屋家内部的人说就行了)
  3. 脱离房间

前端的话大家必要客商输入二个id,而且在创设webSocket的时候,把id号带过去。

咱俩得以拿走滚动条的职位,将最近的坐标转化为二个大局的坐标。

大家来探访前端的兑现,大家要求在一同来弹出三个框,告诉顾客,输入叁个房间号。(即使很挫,可是很轻巧完毕)

 function getAbsoluteX{ var l = document.body.scrollLeft; return parseInt((x + l - 20) / 40); } function getAbsoluteY{ var h = document.body.scrollTop; return parseInt((y + h - 20) / 40); }

图片 1Paste_Image.png

第4个难点,大家在Room类里面扩张二个办法,Room#vaildAction用来判断八个操作是还是不是合法。同不平日候,我们在劳动器端也增添三个数组来记录当前的棋盘。对于二个博艺的操作,我们会去推断:

 var roomId = prompt("请输入房间号", ""); //房间号 host = document.location.host; host = "ws://" + host + "/chess?roomId=" + roomId; var webSocket = new WebSocket;

是或不是很轻便吗?那样子我们在简历链接的时候就能够把前面包车型地铁参数带过去。接下来大家来探影后端代码的落到实处,首先,大家要获得这些roomId。

 List<String> roomList = session.getRequestParameterMap().get; String roomId = roomList.get;
 @Override public boolean vaildAction(Action action){ if (action instanceof ChessAction){ if (lastChessAction != null && ((ChessAction) action).getColor().equals(lastChessAction.getColor{ return false; } if (chessBoard[((ChessAction) action).getX()][((ChessAction) action).getY{ return false; } chessBoard[((ChessAction) action).getX()][((ChessAction) action).getY()] = ((ChessAction) action).getColor().equals ? -1 : 1; return true; } return false; }

接下来当顾客发生connect频限信号时,大家必要推断那么些roomId是或不是存在,要是不设有,我们就新建二个room。

我们增了一个日志类,slf4j,那几个大致的话正是三个日志类的API,通过那多个大家接纳log4j打日志。引进maven包:

if (roomMap.containsKey{//已经存在这个房间 Room room = roomMap.get; if (room.enterRoom{ session.getUserProperties().put("roomId", roomId); }else{ session.getBasicRemote().sendText; }}else{//新建一个房间 Room room = new ChessRoom(roomId, 2); room.enterRoom; roomMap.put(roomId, room); session.getUserProperties().put("roomId", roomId);}
 <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>1.7.5</version> </dependency>

当顾客下棋的时候,调用room的播放方法。

何况在resources目录下增添,log4j.properties的配备。具体的配备可以Google下,那一个日志类的效应依旧比较多的。

String content = message.substring;ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);chessAction.setCode;Room room = roomMap.get;room.broadcast(new Gson().toJson(chessAction));

三个小小游戏竟然出了那样多坑,仍旧有为数不菲获得的。后边的话会增添一些新的效率,举个例子悔棋|重新初步|希图等。

迄今停止,我们基本落实了二个大约的屋家了。接下来,大家须求在前端加一些提醒语,提醒您是哪些颜色。像这种。

图片 2Paste_Image.png

代码其实异常的粗略,只须要在初始和每一回下棋的时候用js的innerHtml方法就行。

 function changeTip(){ if (myTurn == true){ document.getElementById.innerHTML = "这是你的回合"; }else{ document.getElementById.innerHTML = "等待对方下棋"; } } function changeHead(){ if (myTurn == false){ document.getElementById.innerHTML = "你的房间号为" + roomId + "你是黑色"; }else{ document.getElementById.innerHTML = "你的房间号为" + roomId + "你是白色"; } }

大家曾经轻松完结了二个有房间的系统。代码。接下来我们会对左右的交互进行四个数量格式的优化,方便今后新职能的恢宏。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图