Java Websocket Canvas井字棋网络游戏 Java Websocket Canvas实现井字棋网络游戏
allway2 人气:0想了解Java Websocket Canvas实现井字棋网络游戏的相关内容吗,allway2在本文为您仔细讲解Java Websocket Canvas井字棋网络游戏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,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);
加载全部内容