Node.js Websocket 井字棋游戏

https://cs.lmu.edu/~ray/notes/websockets/

ws_tictactoeserver.js

// A server for a multi-player tic tac toe game. Loosely based on an example in
// Deitel and Deitel’s “Java How to Program” book. For this project I created a
// new application-level protocol called TTTP (for Tic Tac Toe Protocol), which
// is entirely plain text. The messages of TTTP are:
//
// Client -> Server
//     MOVE <n>
//     QUIT
//
// Server -> Client
//     WELCOME <char>
//     VALID_MOVE
//     OTHER_PLAYER_MOVED <n>
//     OTHER_PLAYER_LEFT
//     VICTORY
//     DEFEAT
//     TIE
//     MESSAGE <text>const WebSocket = require('ws');const server = new WebSocket.Server({port: 58901});(() => {// When null, we are waiting for the first player to connect, after which we will// create a new game. After the second player connects, the game can be fully set// up and played, and this variable immediately set back to null so the future// connections make new games.let game = null;server.on('connection', (ws, req) => {console.log('Connection from', req.connection.remoteAddress);if (game === null) {game = new Game();game.playerX = new Player(game, ws, 'X');} else {game.playerO = new Player(game, ws, 'O');game = null;}});console.log('The Tic Tac Toe server is running...');
})();class Game {// A board has nine squares. Each square is either unowned or it is owned by a// player. So we use a simple array of player references. If null, the corresponding// square is unowned, otherwise the array cell stores a reference to the player that// owns it.constructor() {this.board = Array(9).fill(null);}hasWinner() {const b = this.board;const wins = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];return wins.some(([x, y, z]) => b[x] != null && b[x] === b[y] && b[y] === b[z]);}boardFilledUp() {return this.board.every(square => square !== null);}move(location, player) {if (player !== this.currentPlayer) {throw new Error('Not your turn');} else if (!player.opponent) {throw new Error('You don’t have an opponent yet');} else if (this.board[location] !== null) {throw new Error('Cell already occupied');}this.board[location] = this.currentPlayer;this.currentPlayer = this.currentPlayer.opponent;}
}class Player {constructor(game, socket, mark) {Object.assign(this, {game, socket, mark});this.send(`WELCOME ${mark}`);if (mark === 'X') {game.currentPlayer = this;this.send('MESSAGE Waiting for opponent to connect');} else {this.opponent = game.playerX;this.opponent.opponent = this;this.send('MESSAGE Your opponent will move first');this.opponent.send('MESSAGE Your move');}socket.on('message', (buffer) => {const command = buffer.toString('utf-8').trim();console.log(`Received ${command}`);if (command === 'QUIT') {socket.close();} else if (/^MOVE \d+$/.test(command)) {const location = Number(command.substring(5));try {game.move(location, this);this.send(`VALID_MOVE ${location}`);this.opponent.send(`OPPONENT_MOVED ${location}`);if (this.game.hasWinner()) {this.send('VICTORY');this.opponent.send('DEFEAT');} else if (this.game.boardFilledUp()) {[this, this.opponent].forEach(p => p.send('TIE'));}} catch (e) {console.trace(e);this.send(`MESSAGE ${e.message}`);}}});socket.on('close', () => {try {this.opponent.send('OTHER_PLAYER_LEFT');} catch (e) {}});}send(message) {try {this.socket.send(`${message}\n`);} catch (e) {console.error(e);}}
}

ws_tictactoeclient.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html><head><title>Tic Tac Toe</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href='tictactoe.css' rel='stylesheet'></head><body><h1>Tic Tac Toe</h1><p id="info">Click the Join Game button when ready</p><section id="board"></section><footer><button id="join">Join Game at Server:</button><input id="serverIp"><button id="leave">Leave Game</button></footer><script src='tictactoe.js' type='text/javascript'></script></body>
</html>

tictactoe.css

section {display: grid;grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;grid-gap: 5px;height: 300px;width: 300px;background-color: black;
}section div {display: grid;justify-items: center;align-items: center;cursor: pointer;background-color: white;color: blue;font: bold 60px Arial;
}#leave {display: none;
}footer {margin-top: 20px;
}

tictactoe.js

const section = document.querySelector('section');
const messageArea = document.querySelector('#info');
const square = location => document.querySelector(`#s${location}`);
const joinButton = document.querySelector('#join');
const leaveButton = document.querySelector('#leave');
const serverTextField = document.querySelector('#serverIp');joinButton.addEventListener('click', joinGame);
leaveButton.addEventListener('click', () => leaveGame('Bye!'));let socket, mark, gameOver = false;addEventListener('load', () => {for (let i = 0; i < 9; i++) {const square = document.createElement('div');square.setAttribute('id', `s${i}`);square.addEventListener('click', () => {socket.send(`MOVE ${i}`);});section.appendChild(square);}
});function joinGame() {const host = serverTextField.value || 'localhost';gameOver = false;socket = new WebSocket(`ws://${host}:58901`);socket.addEventListener('message', (event) => {processCommand(event.data);});document.querySelectorAll('section div').forEach(s => s.textContent = '');joinButton.style.display = 'none';serverTextField.style.display = 'none';leaveButton.style.display = 'inline';socket.onerror = () => leaveGame("Error: The server is probably down");
}
;function leaveGame(message) {messageArea.textContent = message || 'Game over';socket.send('QUIT');gameOver = true;joinButton.style.display = 'inline';serverTextField.style.display = 'inline';leaveButton.style.display = 'none';
}
;function processCommand(command) {if (command.startsWith('WELCOME')) {mark = command[8];opponentMark = mark === 'X' ? 'O' : 'X';} else if (command.startsWith('VALID_MOVE')) {square(command.substring(11)).textContent = mark;messageArea.textContent = 'Valid move, please wait';} else if (command.startsWith('OPPONENT_MOVED')) {square(command.substring(15)).textContent = opponentMark;messageArea.textContent = 'Opponent moved, your turn';} else if (command.startsWith('MESSAGE')) {messageArea.textContent = command.substring(8);} else if (command.startsWith('VICTORY')) {leaveGame('WINNER WINNER');} else if (command.startsWith('DEFEAT')) {leaveGame('Oh sorry you lost');} else if (command.startsWith('TIE')) {leaveGame('Tie game so boring');} else if (command.startsWith('OTHER_PLAYER_LEFT')) {leaveGame(!gameOver ? 'Woah your opponent bailed' : '');}
}

package.json

{"name": "capitalize","version": "1.0.0","keywords": ["util","functional","server","client","browser"],"author": "Administrator","contributors": [],"dependencies": {"ws": "~8.1.0"}
}

Node.js Websocket 井字棋游戏相关推荐

php 井字棋,怎样用JS做出井字棋游戏
这次给大家带来怎样用JS做出井字棋游戏,用JS做出井字棋游戏的注意事项有哪些,下面就是实战案例,一起来看一下. 最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应 ...
php井字游戏代码_JS实现井字棋游戏步骤详解
这次给大家带来JS实现井字棋游戏步骤详解,JS实现井字棋游戏的注意事项有哪些,下面就是实战案例,一起来看一下. 最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应 ...
Minimax 和 Alpha-beta 剪枝算法简介，及以此实现的井字棋游戏（Tic-tac-toe）
前段时间用 React 写了个2048 游戏来练练手,准备用来回顾下 React 相关的各种技术,以及试验一下新技术.在写这个2048的过程中,我考虑是否可以在其中加入一个 AI 算法来自动进行游戏, ...
React官网的井字棋游戏
React官网的井字棋游戏这个是我在官网再次复习这个小游戏时梳理的一些思路,其中也包含了我在尝试时出的一些bug 文章目录 React官网的井字棋游戏 1.整体分析项目 2.为变量添加state并绑 ...
JavaScript 进阶——井字棋游戏智能AI搭建
目录井字棋游戏准备的HTML: 准备的CSS: 第一部分点击出现O的JS代码: 现阶段效果: 第二部分:判断胜利现阶段结果: 第三部分:简单的智能AI 现阶段结果: 第四部分:之前我们很容易就能 ...
java井字棋ai_JavaScript实现一个带AI的井字棋游戏源码
JavaScript实现一个带AI的井字棋游戏源码发布时间:2020-09-05 00:56:12 来源:脚本之家阅读:100 作者:小楼夜听雨QAQ 最近有一门课结束了,需要做一个井字棋的游戏, ...
php井字游戏,python实现井字棋游戏
#本游戏python3.4.0下编写调试,只能在windows下运行. import random import subprocess import time #定义函数 def draw_board ...
C++井字棋游戏，DOS界面版
据说有一个能保证不败的算法.明天看看先再写个PVC版的. 正题.今天无聊写了个井字棋游戏,顺便逐渐让自己习惯良好的代码风格,放上来给新手学习学习. jzq2.cpp /*N字棋游戏PVP版,DOS版本 ...
python井字棋ai_[Python100行系列]-井字棋游戏
博客:Hzy的博客 | Hzy Bloghzeyuan.cn一些学习python的小项目,小游戏.python小项目github.com 话不多说,今天尝试用turtle库来写一个井字棋游戏.1. ...

Node.js Websocket 井字棋游戏

Node.js Websocket 井字棋游戏相关推荐

最新文章

热门文章