本文实例为大家分享了Java Websocket Canvas实现井字棋网络游戏的具体代码，供大家参考，具体内容如下
TicTacToeGame.java
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 {
}
}
}
index.html
<!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>
tic.js
// 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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/220401/
- 转载请注明：必须在正文中标注并保留原文链接
- QQ群： PHP高手阵营官方总群(344148542)
- QQ群： Yii2.0开发(304864863)