利用websocket做五子棋游戏

pom.xml导入websocket-api.jar

<dependency>

<groupId>javax.websocket</groupId>

<artifactId>javax.websocket-api</artifactId>

<version>1.1</version>

<scope>provided</scope>

</dependency>

servlet-api必须是3.0+,才支持websocket,所以如果不是,则要更新jar包。

 

GoBangGame.java

package com.minstone.statisplatform.util;

 

 

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.PathParam;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.Set;

import java.util.concurrent.CopyOnWriteArraySet;

 

/**

* Created by zhengyon 2017/8/28.

*/

@ServerEndpoint("/game/{nickname}")

public class GoBangGame {

private static final Set<GoBangGame> GO_BANG_GAME_SET = new CopyOnWriteArraySet<>();

private Session session;

private String nickname;

private static String lastUser;

private static int count = 0;

private int[][] oriData = new int[15][25];

 

@OnOpen

public void onOpen(@PathParam("nickname") String nickname, Session session) throws IOException {

this.session = session;

this.nickname = nickname;

if (GO_BANG_GAME_SET.size() > 1) {

System.out.println("房间人满");

session.getBasicRemote().sendText("房间人已满!");

// session.close();

} else {

GO_BANG_GAME_SET.add(this);

StringBuffer sb = new StringBuffer();

for (GoBangGame goBangGame : GO_BANG_GAME_SET) {

sb.append(goBangGame.nickname).append(";");

}

for (int i = 0; i < oriData.length; i++) {

for (int j = 0; j < oriData[i].length; j++) {

oriData[i][j] = -1;

}

}

sendText(nickname + "童鞋进入房间;当前房间有:" + sb.toString());

}

}

 

@OnMessage

public void onMessage(String message, @PathParam("nickname") String nickname) {

if (nickname == lastUser) {

return;

}

int i = count++ % 2;

String[] split = message.split("-");

int x = Integer.parseInt(split[0]);

int y = Integer.parseInt(split[1]);

oriData[y][x] = i;

int success = isSuccess(x, y, i, oriData);

sendText(message + "-" + i);

if (success == -1) {

lastUser = nickname;

} else {

if (i == 0) {

sendText("alert('白棋获胜,点击确定重新开始游戏!');location.reload(true);");

return;

} else if (i == 1) {

sendText("alert('黑棋获胜,点击确定重新开始游戏!');location.reload(true);");

return;

}

}

}

 

private static int isSuccess(int x, int y, int f, int[][] oriData) {

//y的范围在0-14之间,x的范围在0-24之间

int count = 0;

for (int i = x - 1; i > -1; i--) {

if (oriData[y][i] != f) {

break;

}

count++;

}

for (int i = x + 1; i < 25; i++) {

if (oriData[y][i] != f) {

break;

}

count++;

}

if (count > 3) {

return f;

}

count = 0;

for (int i = y + 1; i < 15; i++) {

if (oriData[i][x] != f) {

break;

}

count++;

}

for (int i = y - 1; i > -1; i--) {

if (oriData[i][x] != f) {

break;

}

count++;

}

if (count > 3) {

return f;

}

count = 0;

for (int i = x + 1, j = y + 1; i < 25; i++, j++) {

if (j < 15) {

if (oriData[j][i] != f) {

break;

}

count++;

}else

break;

}

for (int i = x - 1, j = y - 1; i > -1; i--, j--) {

if (j > -1) {

if (oriData[j][i] != f) {

break;

}

count++;

}else

break;

}

if (count > 3) {

return f;

}

count = 0;

for (int i = x + 1, j = y - 1; i < 25; i++, j--) {

if (j > -1) {

if (oriData[j][i] != f) {

break;

}

count++;

}else

break;

}

for (int i = x - 1, j = y + 1; i > -1; i--, j++) {

if (j < 25) {

if (oriData[j][i] != f) {

break;

}

count++;

}else

break;

}

if (count > 3) {

return f;

}

return -1;

}

 

private static void sendText(String msg) {

for (GoBangGame goBangGame : GO_BANG_GAME_SET) {

try {

synchronized (goBangGame) {

goBangGame.session.getBasicRemote().sendText(msg);

}

} catch (IOException e) {

GO_BANG_GAME_SET.remove(goBangGame);

try {

goBangGame.session.close();

} catch (IOException e1) {

}

sendText(goBangGame.nickname + "童鞋已下线");

}

}

}

 

@OnClose

public void onClose(Session session) {

GO_BANG_GAME_SET.remove(this);

for (GoBangGame goBangGame : GO_BANG_GAME_SET) {

if (goBangGame.nickname == this.nickname) {

sendText(this.nickname + "童鞋已下线");

}

}

}

}

index.jsp

<html>

<head>

<meta charset="GBK" />

<title>aaa</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<style>

tr {

height: 40px;

}

 

td {

width: 39px;

}

 

table {

/*border-right: 1px solid #010000;*/

/*border-bottom: 1px solid #010000;*/

}

 

table td {

border-left: 1px solid #010000;

border-top: 1px solid #010000

}

 

table tr:nth-last-child(1) td {

border-left: 0px solid #010000;

}

 

table td:nth-last-child(1) {

border-top: 0px solid #010000

}

 

img {

width: 22px;

height: 22px;

}

</style>

</head>

<body>

<div align="center">

<div id="msgDiv"><input type="text" id="nickname" placeholder="nickname"><input type="button" value="connect" id="connBtn">

</div>

<div style="background:url('./img/bg.png') no-repeat 0px 0px;width: 1081px;height: 610px;padding-top:5px;margin-top: 15px;display: none"

id="gameDiv"></div>

</div>

<script>

var str = "<table cellpadding='0' cellspacing='0' id='gameTable'>";

for (var i = 0; i < 15; i++) {

str += "<tr>";

for (var j = 0; j < 25; j++) {

str += "<td></td>";

}

str += "</tr>";

}

str += "</table>";

$("#gameDiv").html(str);

var webSocket;

$("#connBtn").click(function () {

var nickname = $("#nickname").val();

if (nickname == null || nickname == '') {

alert("You must enter a nickname");

return;

}

$("#gameDiv").css("display", "block");

$(this).attr("disabled", "disabled");

webSocket = new WebSocket("ws://127.0.0.1:8080/archive-statis-platform/game/" + nickname);

webSocket.onmessage = function (event) {

if(event.data=='The personnel are full !'){

$("#msgDiv").html(event.data);

$("#gameDiv").css("display", "none");

webSocket.close(-1);

}

if(event.data.indexOf("win")!=-1) {

eval(event.data);

}else{

if (event.data.indexOf("-") != -1) {

var splitArr = event.data.split("-");

var x = splitArr[0];

var y = splitArr[1];

if (splitArr[2] == 0) {

$("#gameTable tr:eq('" + y + "') td:eq('" + x + "')").html("<div style='margin-top: -30px;margin-left: -11px;'><img src='img/white.png'/></div>");

} else {

$("#gameTable tr:eq('" + y+ "') td:eq('" +x+ "')").html("<div style='margin-top: -30px;margin-left: -11px;'><img src='img/black.png'/></div>");

}

} else {

$("#msgDiv").html(event.data);

}

}

}

webSocket.onerror = function (event) {

alert(event.data);

}

webSocket.onopen = function (event) {

$("#msgDiv").html("<p>you are in room </p>");

}

});

$("#gameDiv").click(function (event) {

var gameTable = $("#gameTable");

var rect = gameTable[0].getBoundingClientRect();

var clickX = event.clientX - rect.left;

var clickY = event.clientY - rect.top;

var n1 = clickX % 40;

var n2 = clickY % 40;

if (n1 > 15 && n1 < 25 || n2 > 15 && n2 < 25) {

return;

}

var x = (clickX - n1) / 40;

if (n1 >= 25) {

x++;

}

var y = (clickY - n2) / 40;

if (n2 >= 25) {

y++;

}

webSocket.send(x + "-" + y);

});

</script>

</body>

</html>

 

素材

利用websocket做五子棋游戏利用websocket做五子棋游戏利用websocket做五子棋游戏