Java Websocket Canvas井字棋网络游戏

最新推荐文章于 2022-08-07 17:12:36 发布
最新推荐文章于 2022-08-07 17:12:36 发布
阅读量291 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/119830552
版权

 

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);

allway2
关注
JAVAGUI小游戏-基于UDP通信实现联机对战的井字棋
XiangYida
02-16 4021
记得这是大二上学期时的一个作业，开发一款井字棋，记得当时放飞自我花了通宵搞出来了一个能联机对战的。 时隔一年多，如今整理电脑发现了这个项目代码，舍不得删，干脆写一个博客纪念一下吧。 虽说JAVAGUI早以过时，但是这个项目对于java初学者来说是很不错的，记得当时通过这个项目更加深刻理解到了面向对象程序设计，以及多线程，网络编程的知识，收获颇大. 代码量稍微有点大，我就不全上代码了，后面我会给出G...
web 井字棋
12-17
The BEST TIC-TAC-TOE game with code provided has enhanced menu, graphics and controls. You can play against computer or against a friend!
Java Websocket HTML Table井字棋网络游戏
allway2的博客
08-16 275
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 ja
[HTML5实现人工智能]小游戏《井字棋》发布，据说IQ上200才能赢
xuela-net
03-14 290
一，什么是TicTacToe（井字棋） 本游戏为在下用lufylegend开发的第二款小游戏。此游戏是大家想必大家小时候都玩过，因为玩它很简单，只需要一张草稿纸和一只笔就能开始游戏，所以广受儿童欢迎。可能我说了半天，对它名字不熟悉的朋友也不懂我在说神马。那没关系，我就引用Wiki（维基百科）的介绍作为大家对它名字的认识，顺便也勾起我们儿时的回忆： 井字棋，大陆、台湾又称为井字游戏、圈圈叉叉；另...
JavaScript Canvas井字棋游戏
allway2的博客
08-20 334
index.html <!DOCTYPE html> <html> <head> <title>Tic Tac Toe</title> <style> * { padding: 0; margin: 0; } body, html, #game...
井字棋-OX棋.rar
11-19
假设我们现在有一个 3 x 3 的井字棋游戏，我们用一个二维数组代表棋盘，’x’ 代表玩家 X 下的棋子，’o’ 代表玩家 O 下的棋子，’e’ 代表该格没有棋子。例如： 一个空白的棋盘以下面的二维数组表示 [ [‘e’, ‘e’, ‘e’], [‘e’, ‘e’, ‘e’], [‘e’, ‘e’, ‘e’] ] 如果玩家 X 在第一行第一列下了一步棋，玩家 O 在第二行第二列下了一步棋，则表示如下： [ [‘x’, ‘e’, ‘e’], [‘e’, ‘o’, ‘e’], [‘e’, ‘e’, ‘e’] ] 现在需要用js实现一个 function，接受一个已有任意棋子的棋盘（和上面二维数组一样的格式），和玩家的标志（’x’ 或 ‘o'），返回该玩家下一步有几种可能的获胜方式（获胜方式以数组表示，[0, 0] 代表在第一行第一列下一步棋即可获胜，[2, 2] 代表在第三行第三列下一步棋即可获胜）。例如 someFunction( ‘x’, [ [‘o’, ‘e’, ‘e’], [‘o’, ‘x’, ‘o’], [‘x’, ‘x’, ‘e’] ] ) // return [ [2, 2
基于HTML5+WebSocket+JAVA的棋牌游戏五子棋.rar
11-11
基于HTML5+WebSocket+JAVA的棋牌游戏五子棋程序，IDEA完整工程包src\main\java\com\chanming\common，main\java\com\chanming\websockets
java联机井字棋 tictactoe （佐助鸣人图形界面）
12-08
《Java实现联机井字棋游戏详解》 Java编程语言在开发桌面应用方面拥有丰富的库和框架，使得创建具有图形用户界面（GUI）的游戏成为可能。在这个项目中，我们将探讨如何利用Java实现一个联机版的井字棋游戏，即...
java websocket实现视频聊天
09-27
Java WebSocket 实现视频聊天是一种在Web上实现实时通信的技术，它允许服务器和客户端之间建立持久的连接，以便数据可以在两个方向上同时传输，而无需为每个消息创建新的HTTP请求。在本项目中，Java WebSocket被用来...
websocket-proxy:java websocket代理k8s docker终端
05-26
java websocket proxy k8s docker terminal 之所以有这个项目是因为有多个区域部署k8s集群， 每个集群里的容器都需要有终端访问。 应用程序都是运行在k8s里的， 采用sa认证的方式， k8s集群的api server外面并不能...
井字棋AI对战小游戏（前端开发）
03-16
这是一个拥有智能AI对手的井字棋小游戏，使用JavaScript语音进行开发，是一个前端小游戏，打开之后运行井字棋.html即可在网页上与AI进行井字棋游戏对战。也可以参考https://blog.csdn.net/qq_36171287/article/details/104887248这篇博客，主要代码博客中也都有。
js+canvas 人机井字棋
weixin_38830382的博客
01-31 598
#again { font-size: 18px; font-family: 华文细黑; letter-spacing: 5px; padding-left: 12px; border-radius: 5px; background: -webkit-li
一个canvas小游戏，井字棋
sinat_37768941的博客
03-31 794
上船了,一个刚开始学前端，后端的初学小白初学者，尝试着做的井字棋canvas 小游戏 有点简陋只外部引用了一个jquery
Linux基础-虚拟数据优化器VDO
Passerby_Wang的博客
08-07 2075
一、VDO简介 二、制作VDO卷 三、VDO卷相关功能
Linux高级存储管理（LVM、VDO）
tst8023ryq的博客
11-22 2723
Linux高级存储管理
LVM逻辑卷管理 + vdo虚拟数据优化器
zxn_0823的博客
06-24 401
lvm的建立 建立实验环境并用监控命令监控 mkdir /weixindatawatch -n 1 "df -h /weixindata;echo ===;pvs;echo =====;vgs;echo ===;lvs"fdisk /dev/sdb 划分3个主分区，并将2、3分区标签写为8e（贴lvm标签） wq退出保存 pvcreate /dev/sdb2 pvcreate /dev/sdb3 创建物理分区 vgcreate westos_...
做一个简单的井字棋（一）
Yjl_Richard的博客
05-12 3093
一个简单的井字棋的实现
高级存储管理（逻辑卷，lvm设备建立，文件系统拉伸，缩减，lvm删除；vdo建立，vdo性能测试，vdo删除）
lijua9794的博客
07-09 1813
一.逻辑卷 pv 物理卷 被处理过的物理分区 pe 物理扩展 设定存储最小单元 vg 物理卷组 捆绑pv到一个组中 lv 逻辑卷 分配最终的使用设备 1.监控建立过程： watch -n 1 'pvs;echo ===;vgs;echo ====;lvs;echo ==...
react之实例：井字棋游戏(直接引用react)
web-gm的博客
04-18 1927
1.分析需求 演示链接地址 井字棋游戏，两位玩家，分别是‘O’ 和 ‘X’ 分别落子，先完成三点一线的获胜，也就是无论横、竖、斜连成一条直线 组件拆分 棋子组件，共九个棋子 棋盘组件，九个方格形成棋盘 游戏组件，包括棋盘、下个玩家，还有游戏记录（可以悔棋） 2.页面搭建 引入必要js以及css &lt;!DOCTYPE html&gt; &lt;htm...
Java WebSocket API规范解读
"Java WebSocket 规范" WebSocket 是一种在客户端和服务器之间建立长连接的协议，它是HTML5标准的一部分，旨在提供低延迟、双向通信的能力，使得实时互动应用的开发变得更加简单。Java WebSocket API 提供了在Java...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值