Java Websocket HTML Table井字棋网络游戏

最新推荐文章于 2024-03-18 23:05:49 发布
最新推荐文章于 2024-03-18 23:05:49 发布
阅读量268 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/119736603
版权

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>
        <table  cellspacing="0" cellpadding="0" border="1">
            <tbody>
                <tr>
                    <td align="center" width="20px" height="20px" id="b1" onclick=
                        "place2('b1');">
                    </td>
                    <td align="center" width="20px" height="20px" id="b2" onclick=
                        "place2('b2');">
                    </td>
                    <td align="center" width="20px" height="20px" id="b3" onclick=
                        "place2('b3');">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="20px" height="20px" id="b4" onclick=
                        "place2('b4');">
                    </td>
                    <td align="center" width="20px" height="20px" id="b5" onclick=
                        "place2('b5');
                                ">
                    </td>
                    <td align="center" width="20px" height="20px" id="b6" onclick=
                        "place2('b6');
                                ">
                    </td>
                </tr>
                <tr>
                    <td align="center" width="20px" height="20px" id="b7" onclick=
                        "place2('b7');">
                    </td>
                    <td align="center" width="20px" height="20px" id="b8" onclick=
                        "place2('b8');">
                    </td>
                    <td align="center" width="20px" height="20px" id="b9" onclick=
                        "place2('b9');">
                    </td>
                </tr>
            </tbody>
        </table>



        <!-- 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() {
    //location.reload();
    document.getElementById("b1").innerText = "";
    document.getElementById("b2").innerText = "";
    document.getElementById("b3").innerText = "";
    document.getElementById("b4").innerText = "";
    document.getElementById("b5").innerText = "";
    document.getElementById("b6").innerText = "";
    document.getElementById("b7").innerText = "";
    document.getElementById("b8").innerText = "";
    document.getElementById("b9").innerText = "";
    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) {
}

window.addEventListener("load", init, false);

allway2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端技术搭建井字游戏（内含源码）
官方推荐
05-15 6万+
上周我们实通过前端基础实现了飞机大战游戏，今天还是继续按照我们原定的节奏来带领大家完成一个井字游戏游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
JavaScript HTML 表格井字游戏V2
allway2的博客
08-12 169
index.html <!DOCTYPE html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- JavaScript file included --> <script src="tic.js"></script> </head> <bo...
WebSocket四种事件详解 入门篇（二）
Mark_Xu的博客
09-18 8613
    示例代码  在文章最下方，可以根据示例代码和讲解来理解整个WebSocket流程。代码用SpringBoot 和 maven搭建   服务端和客户端四种事件 1、打开事件     此事件发生在端点上建立新连接时并且在任何其他时间发生之前。     方法级注解：@OnOpen                         使用注解的的方法是没有任何返回值的公有方法，这些方法...
井字棋小游戏（HTML/CSS/JS）
weixin_52841164的博客
03-18 410
井字棋小游戏，使用html，js，css。
九耶丨阁瑞钛伦特-井字棋html5代码
m0_69234258的博客
08-14 562
元素，点击格子时会在其内部显示当前玩家的标记（"X"或"O"）。以上代码只是一个基本示例，你可以根据需要进行扩展和美化。你想了解关于井字棋（Tic-Tac-Toe）的HTML代码吗？这段代码创建了一个3x3的井字棋盘，使用了HTML、CSS和JavaScript。
基于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实现一个联机版的井字棋游戏，即...
基于WebSocket的在线五子棋对战游戏设计源码
最新发布
03-29
这是一个基于WebSocket的在线五子棋对战游戏设计，使用C++、CSS、HTML和JavaScript语言开发，包含33个文件。主要文件类型包括13个hpp文件、4个CSS文件、4个HTML文件、2个JPG图片文件、1个gitignore文件、1个Markdown...
HTML5(webSocket)版五子棋网络对战游戏
06-12
一个完全用HTML5实现的网络对战的网页游戏，通信部分采用WebSocket实现，供大家参考。（注：该程序在火狐10.0、11.0版本、谷歌15.0、17.0版本的浏览器上测试过了，其他较老版本的浏览器可能不支持WebSocket，IE内核...
Java WebSocket编程,java实现websocket,Java
09-11
对 WebSocket 的一个合适的类比是打电话。当打电话时，你通过拨号初始化一个电话呼叫。如果你尝试呼叫的人通过拿起话筒接受了呼叫，连接就已建立。当连接活跃时，如果乐意，双方可以同时说话(虽然并不推荐此种自由...
基于websocket的网页聊天室（私聊+多对多）
11-19
基于websocket实现的网页版聊天室，包括私聊和多对多聊天，简单易懂，一个jsp页面，一个config.class以及一个websocket.class
浅析HTML5的WebSocket与服务器推送事件
09-28
主要介绍了浅析HTML5的WebSocket与服务器推送事件,WebSocket API最大的特点就是让服务器和客户端能在给定的时间范围内的任意时刻,相互推送信息，需要的朋友可以参考下
HTML5井字棋
11-21
可以作为学习html5的好demo，是一个大家都喜欢玩的井字棋游戏，感兴趣的可以下载下来玩
java编写井字棋网络版小游戏
05-12
简单的网络版java编写的井字棋游戏，使用tcp传输，可实现联机玩。
layim框架+websocket即时通讯功能
枫枫枫桦的博客
02-18 8550
文章目录一、layim即时通讯的认识1.1、layim基础配置1.1.1、初始化（init）1.1.2、群员接口（members）1.1.3、layim基础配置代码二、WebSocket搭建2.1、创建消息处理类2.2、webSocket配置类2.3、前台jsp页面建立websocket连接四、附上完整jsp代码1.4、效果图 那么上篇讲到spring集成websocket的简单使用，这篇则将使...
评论功能+websocket自动更新
Wisdom—Yoga—TaciturnKnight（WYT）
05-10 1129
代码存根，作为文档保存。 1、comment.jsp 页面 &lt;div class="row"&gt; &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; &lt;div class="report_comment"&gt; &lt;p class="bt_report"
『HTML5实现人工智能』小游戏《井字棋》发布，据说IQ上200才能赢【算法&代码讲解+资源打包下载】
热门推荐
Yorhom's Game Box
03-14 3万+
一，什么是TicTacToe（井字棋） 本游戏为在下用lufylegend开发的第二款小游戏。此游戏是大家想必大家小时候都玩过，因为玩它很简单，只需要一张草稿纸和一只笔就能开始游戏，所以广受儿童欢迎。可能我说了半天，对它名字不熟悉的朋友也不懂我在说神马。那没关系，我就引用Wiki（维基百科）的介绍作为大家对它名字的认识，顺便也勾起我们儿时的回忆： 井字棋，大陆、台湾又称为井字游戏、圈圈叉叉；另
js实现井字棋游戏
TGA麻辣香锅的博客
01-18 1435
好转！！！！ 转载自：https://blog.csdn.net/qq_36171287/article/details/104887248
JavaScript 进阶——井字棋游戏智能AI搭建
苦作舟的空城机
03-15 3320
目录 井字棋游戏 准备的HTML： 准备的CSS： 第一部分点击出现O的JS代码： 现阶段效果： 第二部分：判断胜利 现阶段结果： 第三部分：简单的智能AI 现阶段结果： 第四部分：之前我们很容易就能击败AI，所以现在要强化AI的难度 完整JavaScript代码： 结果：不多说了，还没赢过???? 学习来源：JavaScript井字棋游戏开发与AI算法 井字棋游戏 ...
Java WebSocket
02-28
Java WebSocket

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值