Java Websocket Canvas实现井字棋网络游戏

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
 
@ServerEndpoint("/tictactoe")
public class TicTacToeGame {
 private static final Set<TicTacToeGame> games = new CopyOnWriteArraySet<>();
 private Session session;
 private String player;
 private static String b1 = "";
 private static String b2 = "";
 private static String b3 = "";
 private static String b4 = "";
 private static String b5 = "";
 private static String b6 = "";
 private static String b7 = "";
 private static String b8 = "";
 private static String b9 = "";
 
 @OnOpen
 public void onOpen(Session session) throws IOException {
  System.out.println("Connection from" + session.getId());
  this.session = session;
 
  System.out.println(games.size());
  if (games.size() == 0) {
   this.player = "X";
  }
  if (games.size() == 1) {
   this.player = "O";
  }
  if (games.size() > 1) {
   System.out.println("房间人满");
   session.getBasicRemote().sendText("roomfull");
//            session.close();
  } else {
   games.add(this);
   session.getBasicRemote().sendText("player-" + player);
   if (games.size() == 1) {
    sendText("wait");
   }
   if (games.size() == 2) {
    sendText("start");
   }
   sendText("turn-" + "X");
  }
 }
 
 @OnMessage
 public void onMessage(String message) {
  System.out.println(player);
  System.out.println(message);
  System.out.println(message.indexOf("place"));
  if (message.indexOf("place") != -1) {
   String[] words = message.split("-");
   System.out.println("words[1]=" + words[1]);
   System.out.println("words[2]=" + words[2]);
   System.out.println("games.size()=" + games.size());
 
   if (games.size() > 1) {
    if ("".equals(getPlayer(words[1]))) {
     place3(words[1], words[2]);
     sendText(message);
     check();
     if ("X".equals(words[2])) {
      sendText("turn-" + "O");
     } else {
      sendText("turn-" + "X");
     }
    }
   }
   System.out.println("b1=" + b1);
   System.out.println("b2=" + b2);
   System.out.println("b3=" + b3);
   System.out.println("b4=" + b4);
   System.out.println("b5=" + b5);
   System.out.println("b6=" + b6);
   System.out.println("b7=" + b7);
   System.out.println("b8=" + b8);
   System.out.println("b9=" + b9);
 
  } else if ("reset".equals(message)) {
   if (player.equals("X") || player.equals("O")) {
    b1 = "";
    b2 = "";
    b3 = "";
    b4 = "";
    b5 = "";
    b6 = "";
    b7 = "";
    b8 = "";
    b9 = "";
    sendText(message);
   }
  } else {
   sendText(message);
  }
 
 }
 
 private static void sendText(String msg) {
  for (TicTacToeGame game : games) {
   try {
    synchronized (game) {
     game.session.getBasicRemote().sendText(msg);
    }
   } catch (IOException e) {
    games.remove(game);
    try {
     game.session.close();
    } catch (IOException e1) {
    }
    sendText("leave-" + game.player);
   }
  }
 }
 
 @OnClose
 public void onClose(Session session) {
  System.out.println(session.getId());
  System.out.println(this.player + "已下线");
  if (!"".equals(this.player)) {
   games.remove(this);
   sendText("leave-" + this.player);
  }
 }
 
 public void place3(String id, String player) {
  if ("b1".equals(id)) {
   b1 = player;
  }
  if ("b2".equals(id)) {
   b2 = player;
  }
  if ("b3".equals(id)) {
   b3 = player;
  }
  if ("b4".equals(id)) {
   b4 = player;
  }
  if ("b5".equals(id)) {
   b5 = player;
  }
  if ("b6".equals(id)) {
   b6 = player;
  }
  if ("b7".equals(id)) {
   b7 = player;
  }
  if ("b8".equals(id)) {
   b8 = player;
  }
  if ("b9".equals(id)) {
   b9 = player;
  }
 }
 
 public String getPlayer(String id) {
  String player = "";
  if ("b1".equals(id)) {
   player = b1;
  }
  if ("b2".equals(id)) {
   player = b2;
  }
  if ("b3".equals(id)) {
   player = b3;
  }
  if ("b4".equals(id)) {
   player = b4;
  }
  if ("b5".equals(id)) {
   player = b5;
  }
  if ("b6".equals(id)) {
   player = b6;
  }
  if ("b7".equals(id)) {
   player = b7;
  }
  if ("b8".equals(id)) {
   player = b8;
  }
  if ("b9".equals(id)) {
   player = b9;
  }
  return player;
 }
 
 public void check() {
 
  if (b1.equals("X") && b2.equals("X") && b3.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b1.equals("X") && b4.equals("X") && b7.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b7.equals("X") && b8.equals("X") && b9.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b3.equals("X") && b6.equals("X") && b9.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b1.equals("X") && b5.equals("X") && b9.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b3.equals("X") && b5.equals("X") && b7.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b2.equals("X") && b5.equals("X") && b8.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  } else if (b4.equals("X") && b5.equals("X") && b6.equals("X")) {
   sendText("xwon");
   sendText("gameover-YES");
  }
 
  else if (b1.equals("O") && b2.equals("O") && b3.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b1.equals("O") && b4.equals("O") && b7.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b7.equals("O") && b8.equals("O") && b9.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b3.equals("O") && b6.equals("O") && b9.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b1.equals("O") && b5.equals("O") && b9.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b3.equals("O") && b5.equals("O") && b7.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b2.equals("O") && b5.equals("O") && b8.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  } else if (b4.equals("O") && b5.equals("O") && b6.equals("O")) {
   sendText("owon");
   sendText("gameover-YES");
  }
 
  // Checking of Player O finsh
  // Here, Checking about Tie
  else if ((b1.equals("X") || b1.equals("O")) && (b2.equals("X") || b2.equals("O"))
    && (b3.equals("X") || b3.equals("O")) && (b4.equals("X") || b4.equals("O"))
    && (b5.equals("X") || b5.equals("O")) && (b6.equals("X") || b6.equals("O"))
    && (b7.equals("X") || b7.equals("O")) && (b8.equals("X") || b8.equals("O"))
    && (b9.equals("X") || b9.equals("O"))) {
   sendText("tie");
   sendText("gameover-YES");
  } else {
 
  }
 }
}

<!DOCTYPE html>
 
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <!-- JavaScript file included -->
    
</head>
 
<body>
    <div id="main">
        <h1>TIC TAC TOE</h1>
 
 
 
        <!-- Space to show player turn -->
        <p id="player"></p>
 
        <br>
       
        <div id="game">
            <canvas id="canvas" width="300" height="300"></canvas>
        </div>
 
        <!-- Grid end here -->
        <br>
 
        <!-- Button to reset game -->
        <button id="but" onclick="reset()">
            重新开始
        </button>
        
        <br>
        <!-- Space to show player turn -->
        <p id="print2"></p>        
 
        <br>
        <!-- Space to show player turn -->
        <p id="print"></p>
        
 
 
    </div>
    <script src="tic.js"></script>
</body>
 
</html>

// Function called whenever user tab on any box
player = "";
turn = "";
gameover = "NO";
// Function to reset game
function reset() {
    message = "reset";
    websocket.send(message);
    message = "turn-X";
    websocket.send(message);
}
function reset2() {
    clear();
    drawboard();
    gameover = "NO";
    document.getElementById("print2")
            .innerHTML = "游戏开始, 请开始放置棋子";
}
 
// Here onwards, functions check turn of the player
// and put accordingly innerText X or O
flag = 1;
function place(id) {
    if (gameover === "NO") {
        if (flag === 1) {
            if (document.getElementById(id).innerText === "") {
                document.getElementById(id).innerText = "X";
                flag = 0;
            }
        } else {
            if (document.getElementById(id).innerText === "") {
                document.getElementById(id).innerText = "O";
                flag = 1;
            }
        }
    }
    check();
}
function place2(id) {
    if (gameover === "NO") {
        if (turn === player) {
            if (document.getElementById(id).innerText === "") {
                message = "place-" + id + "-" + player;
                websocket.send(message);
            }
        }
    }
}
 
//function place3(id, player) {
//    document.getElementById(id).innerText = player;
//check();
//}
 
function getRootUri() {
    return "ws://" + (document.location.hostname == "" ? "localhost" : document.location.hostname) + ":" +
            (document.location.port == "" ? "8080" : document.location.port);
}
 
function init() {
    output = document.getElementById("output");
    websocket = new WebSocket(getRootUri() + "/TicTacToeWebSocket/tictactoe");
    websocket.onopen = function (evt) {
        onOpen(evt)
    };
    websocket.onmessage = function (evt) {
        onMessage(evt)
    };
    websocket.onerror = function (evt) {
        onError(evt)
    };
}
 
function onMessage(evt) {
    console.log(evt.data);
    if (evt.data == "roomfull") {
        document.getElementById("print")
                .innerHTML = "游戏玩家已满";
        websocket.close(-1);
    }
    if (evt.data == "reset") {
        reset2();
    }
    if (evt.data == "wait") {
        //window.alert("Waiting for Second Player");
        document.getElementById("print2")
                .innerHTML = "等待第二个玩家";
 
    }
    if (evt.data == "start") {
        reset();
    }
    if (evt.data == "xwon") {
        document.getElementById("print2")
                .innerHTML = "玩家X赢了";
 
    }
    if (evt.data == "owon") {
        document.getElementById("print2")
                .innerHTML = "玩家O赢了";
 
    }
    if (evt.data == "tie") {
        document.getElementById("print2")
                .innerHTML = "平局";
 
    }
    if (evt.data.indexOf("leave") != -1) {
        //window.alert(evt.data);
        words = evt.data.split("-");
        //window.alert(words[1]);
        player = words[1];
        //window.alert(player);
        document.getElementById("print2")
                .innerHTML = "玩家" + player+"已离开游戏,请退出游戏";
    }
    if (evt.data.indexOf("player") != -1) {
        //window.alert(evt.data);
        words = evt.data.split("-");
        //window.alert(words[1]);
        player = words[1];
        //window.alert(player);
        document.getElementById("player")
                .innerHTML = "你是玩家" + player;
    }
    if (evt.data.indexOf("turn") != -1) {
        //window.alert(evt.data);
        words = evt.data.split("-");
        //window.alert(words[1]);
        turn = words[1];
        //window.alert(turn);
        document.getElementById("print")
                .innerHTML = "当前由玩家" + turn + "放置棋子";
    }
    if (evt.data.indexOf("place") != -1) {
        //window.alert(evt.data);
        words = evt.data.split("-");
        //window.alert(words[1]);
        place3(words[1], words[2]);
    }
    if (evt.data.indexOf("gameover") != -1) {
        //window.alert(evt.data);
        words = evt.data.split("-");
        //window.alert(words[1]);
        gameover = words[1];
        //window.alert(turn);
        document.getElementById("print")
                .innerHTML = "游戏结束！";
    }
}
 
function onOpen(evt) {
}
function onError(evt) {
}
 
 
 
players = 2;
cell_count = 3;
winCount = 3;
cell_size = 100;
size = cell_size * cell_count;
 
 
var canvas = document.getElementById('canvas');
canvas.width = size;
canvas.height = size;
 
canvas.addEventListener('click', click, false);
 
 
var ctx = canvas.getContext('2d');
 
ctx.imageSmoothingEnabled = false;
ctx.lineWidth = 3;
 
 
function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
 
function line(x, y, w, h, color = '#ccc') {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y + h);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
}
 
function click(e) {
    if (gameover === "NO") {
        if (turn === player) {
            i = e.offsetX / cell_size | 0;
            j = e.offsetY / cell_size | 0;
            id = "";
            if (i == 0 && j == 0) {
                id = "b1";
            }
            if (i == 1 && j == 0) {
                id = "b2";
            }
            if (i == 2 && j == 0) {
                id = "b3";
                ;
            }
            if (i == 0 && j == 1) {
                id = "b4";
            }
            if (i == 1 && j == 1) {
                id = "b5";
            }
            if (i == 2 && j == 1) {
                id = "b6";
            }
            if (i == 0 && j == 2) {
                id = "b7";
            }
            if (i == 1 && j == 2) {
                id = "b8";
            }
            if (i == 2 && j == 2) {
                id = "b9";
            }
            message = "place-" + id + "-" + player;
            websocket.send(message);
        }
    }
}
function place3(id, player) {
    i = 0;
    j = 0;
    if (id === "b1") {
        i = 0;
        j = 0;
    }
    if (id === "b2") {
        i = 1;
        j = 0;
    }
    if (id === "b3") {
        i = 2;
        j = 0;
    }
    if (id === "b4") {
        i = 0;
        j = 1;
    }
    if (id === "b5") {
        i = 1;
        j = 1;
    }
    if (id === "b6") {
        i = 2;
        j = 1;
    }
    if (id === "b7") {
        i = 0;
        j = 2;
    }
    if (id === "b8") {
        i = 1;
        j = 2;
    }
    if (id === "b9") {
        i = 2;
        j = 2;
    }
 
    if (player === "X") {
//         window.alert("X");
        // draw X figure
        color = '#3F51B5';
 
        left = (i + 0.1) * cell_size;
        up = (j + 0.1) * cell_size;
        size = 0.8 * cell_size;
//        window.alert(left);
//        window.alert("up="+up);
//        window.alert(size);
 
        line(left, up, size, size, color);
        line(left + size, up, -size, size, color);
    }
    if (player === "O") {
        color = '#FF5722';
        left = (i + 0.1) * cell_size;
        up = (j + 0.1) * cell_size;
        size = 0.8 * cell_size;
        ctx.beginPath();
        ctx.arc((i + 0.5) * cell_size, (j + 0.5) * cell_size, 0.4 * cell_size, 0, Math.PI * 2, false);
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
    }
}
 
function drawboard() {
    for (let i = 0; i < cell_count; i++) {
        for (let j = 0; j < cell_count; j++) {
            left = i * cell_size;
            up = j * cell_size;
            size = cell_size;
            ctx.beginPath();
            ctx.lineWidth = "6";
            ctx.strokeStyle = "gray";
            ctx.rect(left, up, size, size);
            ctx.stroke();
        }
 
    }
 
}
drawboard();
 
 
window.addEventListener("load", init, false);