局域网下五子棋，html+node.js实现

发布时间：2026/7/28 13:04:18

局域网下五子棋，html+node.js实现

目录

    • 服务端代码
    • 客户端代码
    • 服务端启动命令

废话不多说，直接上代码

服务端代码

server.js

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {cors: {origin: "*",methods: ["GET", "POST"]}
});const PORT = 3000;// 游戏房间管理
let rooms = {};io.on('connection', (socket) => {console.log('新玩家连接:', socket.id);// 玩家加入游戏socket.on('joinGame', () => {// 查找可用房间或创建新房间let roomId = null;// 查找有空位的房间for (const id in rooms) {if (rooms[id].players.length < 2) {roomId = id;break;}}// 如果没有找到可用房间，创建新房间if (!roomId) {roomId = Date.now().toString();rooms[roomId] = {players: [],gameActive: false,board: Array(15).fill().map(() => Array(15).fill(0)),currentPlayer: 1};}// 加入房间socket.join(roomId);rooms[roomId].players.push(socket.id);console.log(`玩家 ${socket.id} 加入房间 ${roomId}`);// 分配角色const playerRole = rooms[roomId].players.length === 1 ? 1 : 2;socket.emit('gameStart', playerRole);// 如果房间已满，通知两名玩家游戏开始if (rooms[roomId].players.length === 2) {rooms[roomId].gameActive = true;console.log(`房间 ${roomId} 游戏开始`);// 通知黑棋玩家（第一个加入的玩家）io.to(rooms[roomId].players[0]).emit('gameStart', 1);// 通知白棋玩家（第二个加入的玩家）io.to(rooms[roomId].players[1]).emit('gameStart', 2);}});// 监听玩家落子socket.on('makeMove', (data) => {const roomId = getRoomIdByPlayer(socket.id);if (!roomId || !rooms[roomId] || !rooms[roomId].gameActive) return;const { row, col, player } = data;// 验证移动合法性if (rooms[roomId].board[row][col] !== 0 || player !== rooms[roomId].currentPlayer) {return; // 非法移动，忽略}// 更新游戏状态rooms[roomId].board[row][col] = player;rooms[roomId].currentPlayer = player === 1 ? 2 : 1;// 广播给房间内的所有玩家io.to(roomId).emit('moveConfirmed', data);});// 监听游戏重置socket.on('resetGame', () => {const roomId = getRoomIdByPlayer(socket.id);if (!roomId || !rooms[roomId]) return;// 重置游戏状态rooms[roomId].board = Array(15).fill().map(() => Array(15).fill(0));rooms[roomId].currentPlayer = 1;rooms[roomId].gameActive = true;// 广播给房间内的所有玩家io.to(roomId).emit('gameReset');});// 监听悔棋请求socket.on('undoMove', () => {const roomId = getRoomIdByPlayer(socket.id);if (!roomId || !rooms[roomId] || !rooms[roomId].gameActive) return;// 简单实现：重置整个游戏rooms[roomId].board = Array(15).fill().map(() => Array(15).fill(0));rooms[roomId].currentPlayer = 1;// 广播给房间内的所有玩家io.to(roomId).emit('gameReset');});// 监听游戏结束socket.on('gameOver', (data) => {const roomId = getRoomIdByPlayer(socket.id);if (!roomId || !rooms[roomId]) return;rooms[roomId].gameActive = false;// 可以记录游戏结果});// 玩家断开连接socket.on('disconnect', () => {console.log('玩家断开连接:', socket.id);const roomId = getRoomIdByPlayer(socket.id);if (!roomId || !rooms[roomId]) return;// 从房间中移除玩家rooms[roomId].players = rooms[roomId].players.filter(id => id !== socket.id);// 通知其他玩家socket.to(roomId).emit('opponentDisconnected');// 如果房间为空，删除房间if (rooms[roomId].players.length === 0) {delete rooms[roomId];console.log(`房间 ${roomId} 已关闭`);}});// 辅助函数：通过玩家ID查找房间IDfunction getRoomIdByPlayer(playerId) {for (const roomId in rooms) {if (rooms[roomId].players.includes(playerId)) {return roomId;}}return null;}
});http.listen(PORT, () => {console.log(`服务器运行在端口 ${PORT}`);
});

客户端代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋游戏 - 局域网联机版</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.4.1/dist/socket.io.min.js"></script><script>tailwind.config = {theme: {extend: {colors: {primary: '#8B5A2B',secondary: '#D2B48C',board: '#DEB887',black: '#000000',white: '#FFFFFF',online: '#10B981',offline: '#EF4444',},fontFamily: {sans: ['Inter', 'system-ui', 'sans-serif'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.board-grid {background-size: 100% 100%;background-image: linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 1px),linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 1px);}.piece-shadow {filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));}.piece-transition {transition: all 0.2s ease-out;}.btn-hover {transition: all 0.2s ease;}.btn-hover:hover {transform: translateY(-2px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}.online-dot {width: 10px;height: 10px;border-radius: 50%;display: inline-block;}}</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4 font-sans"><div class="max-w-4xl w-full bg-white rounded-2xl shadow-xl overflow-hidden"><div class="bg-primary text-white p-6 text-center"><h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">五子棋 - 局域网联机版</h1><p class="text-secondary mt-2">与局域网内的朋友对战</p></div><div class="p-6 md:p-8 flex flex-col md:flex-row gap-6"><!-- 游戏区域 --><div class="flex-1 relative"><div class="aspect-square bg-board rounded-lg shadow-lg overflow-hidden board-grid" style="background-size: calc(100% / 14) calc(100% / 14);"><canvas id="gameCanvas" class="w-full h-full cursor-pointer"></canvas></div><div id="gameStatus" class="mt-4 p-3 bg-secondary/20 rounded-lg text-center"><p id="statusText" class="font-medium">等待连接...</p></div></div><!-- 游戏控制和信息 --><div class="w-full md:w-80 flex flex-col gap-6"><div class="bg-gray-50 rounded-lg p-5 shadow-sm"><h2 class="text-lg font-semibold mb-3 flex items-center"><i class="fa-solid fa-info-circle mr-2 text-primary"></i>游戏信息</h2><div class="space-y-3"><div class="flex items-center justify-between"><span class="text-gray-600">游戏状态</span><div class="flex items-center"><span id="connectionStatus" class="online-dot bg-offline mr-2"></span><span id="connectionText">未连接</span></div></div><div class="flex items-center justify-between"><span class="text-gray-600">你的角色</span><div class="flex items-center"><div id="playerRole" class="w-6 h-6 rounded-full mr-2 piece-shadow"></div><span id="roleText">未分配</span></div></div><div class="flex items-center justify-between"><span class="text-gray-600">当前回合</span><div class="flex items-center"><div id="currentPlayer" class="w-6 h-6 rounded-full bg-black mr-2 piece-shadow"></div><span id="playerText">黑棋</span></div></div><div class="flex items-center justify-between"><span class="text-gray-600">游戏时间</span><span id="gameTime" class="font-mono">00:00</span></div><div class="flex items-center justify-between"><span class="text-gray-600">步数</span><span id="moveCount">0</span></div></div></div><div class="bg-gray-50 rounded-lg p-5 shadow-sm"><h2 class="text-lg font-semibold mb-3 flex items-center"><i class="fa-solid fa-crown mr-2 text-primary"></i>游戏规则</h2><ul class="text-sm text-gray-600 space-y-2"><li class="flex items-start"><i class="fa-solid fa-circle text-xs mt-1.5 mr-2 text-primary"></i><span>黑棋和白棋轮流在棋盘上落子</span></li><li class="flex items-start"><i class="fa-solid fa-circle text-xs mt-1.5 mr-2 text-primary"></i><span>先在横、竖或斜方向形成五子连线者获胜</span></li><li class="flex items-start"><i class="fa-solid fa-circle text-xs mt-1.5 mr-2 text-primary"></i><span>点击棋盘上的交叉点放置棋子</span></li></ul></div><div class="bg-gray-50 rounded-lg p-5 shadow-sm"><h2 class="text-lg font-semibold mb-3 flex items-center"><i class="fa-solid fa-server mr-2 text-primary"></i>服务器连接</h2><div class="space-y-3"><div><label for="serverIp" class="block text-sm font-medium text-gray-700 mb-1">服务器IP地址</label><input type="text" id="serverIp" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="例如: 192.168.1.100" value="localhost"></div><div><label for="serverPort" class="block text-sm font-medium text-gray-700 mb-1">端口号</label><input type="number" id="serverPort" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="默认: 3000" value="3000"></div><button id="connectBtn" class="w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-lg font-medium btn-hover flex items-center justify-center"><i class="fa-solid fa-wifi mr-2"></i>连接服务器</button></div></div><div class="flex gap-3"><button id="restartBtn" class="flex-1 bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg font-medium btn-hover flex items-center justify-center" disabled><i class="fa-solid fa-refresh mr-2"></i>重新开始</button><button id="undoBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-3 px-4 rounded-lg font-medium btn-hover flex items-center justify-center" disabled><i class="fa-solid fa-undo mr-2"></i>悔棋</button></div></div></div><div class="bg-gray-50 p-4 text-center text-sm text-gray-500"><p>© 2025 五子棋联机版 | 局域网对战游戏</p></div></div><!-- 胜利提示模态框 --><div id="winModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300"><div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 transform transition-transform duration-300 scale-95"><div class="text-center"><div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fa-solid fa-trophy text-3xl text-yellow-500"></i></div><h2 class="text-2xl font-bold mb-2" id="winnerText">黑棋获胜!</h2><p class="text-gray-600 mb-6">恭喜您赢得了这场精彩的比赛!</p><button id="newGameBtn" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-lg font-medium btn-hover">开始新游戏</button></div></div></div><!-- 等待对手模态框 --><div id="waitingModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden opacity-0 transition-opacity duration-300"><div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 transform transition-transform duration-300 scale-95"><div class="text-center"><div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-spin"><i class="fa-solid fa-circle-notch text-3xl text-blue-500"></i></div><h2 class="text-2xl font-bold mb-2">等待对手连接</h2><p class="text-gray-600 mb-6">请等待其他玩家加入游戏...</p><button id="cancelWaitingBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-6 rounded-lg font-medium btn-hover">取消</button></div></div></div><script>document.addEventListener('DOMContentLoaded', () => {// 游戏常量const BOARD_SIZE = 15; // 15x15的棋盘const CELL_SIZE = Math.min(window.innerWidth * 0.8 / BOARD_SIZE, window.innerHeight * 0.6 / BOARD_SIZE);const PIECE_SIZE = CELL_SIZE * 0.8;// 游戏状态let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));let currentPlayer = 1; // 1: 黑棋, 2: 白棋let playerRole = 0;    // 0: 未分配, 1: 黑棋, 2: 白棋let gameActive = false;let moveHistory = [];let gameTime = 0;let timerInterval;let isWaitingForServer = false; // 新增状态变量，用于防止重复点击// DOM元素const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const statusText = document.getElementById('statusText');const currentPlayerEl = document.getElementById('currentPlayer');const playerText = document.getElementById('playerText');const moveCountEl = document.getElementById('moveCount');const gameTimeEl = document.getElementById('gameTime');const restartBtn = document.getElementById('restartBtn');const undoBtn = document.getElementById('undoBtn');const winModal = document.getElementById('winModal');const winnerText = document.getElementById('winnerText');const newGameBtn = document.getElementById('newGameBtn');const waitingModal = document.getElementById('waitingModal');const cancelWaitingBtn = document.getElementById('cancelWaitingBtn');const connectBtn = document.getElementById('connectBtn');const serverIpInput = document.getElementById('serverIp');const serverPortInput = document.getElementById('serverPort');const connectionStatus = document.getElementById('connectionStatus');const connectionText = document.getElementById('connectionText');const playerRoleEl = document.getElementById('playerRole');const roleText = document.getElementById('roleText');// Socket.IO连接let socket;// 设置Canvas尺寸canvas.width = CELL_SIZE * (BOARD_SIZE - 1);canvas.height = CELL_SIZE * (BOARD_SIZE - 1);// 绘制棋盘function drawBoard() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制网格线ctx.strokeStyle = '#8B4513';ctx.lineWidth = 1.5;for (let i = 0; i < BOARD_SIZE; i++) {// 水平线ctx.beginPath();ctx.moveTo(0, i * CELL_SIZE);ctx.lineTo(canvas.width, i * CELL_SIZE);ctx.stroke();// 垂直线ctx.beginPath();ctx.moveTo(i * CELL_SIZE, 0);ctx.lineTo(i * CELL_SIZE, canvas.height);ctx.stroke();}// 绘制天元和星位const starPoints = [{x: 3, y: 3}, {x: 3, y: 11}, {x: 7, y: 7}, {x: 11, y: 3}, {x: 11, y: 11}];starPoints.forEach(point => {ctx.beginPath();ctx.arc(point.x * CELL_SIZE, point.y * CELL_SIZE, 4, 0, Math.PI * 2);ctx.fillStyle = '#8B4513';ctx.fill();});// 绘制棋子for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {if (gameBoard[i][j] !== 0) {drawPiece(i, j, gameBoard[i][j]);}}}}// 绘制棋子function drawPiece(row, col, player) {const x = col * CELL_SIZE;const y = row * CELL_SIZE;// 棋子阴影ctx.beginPath();ctx.arc(x, y, PIECE_SIZE / 2 + 2, 0, Math.PI * 2);ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';ctx.fill();// 棋子本体ctx.beginPath();ctx.arc(x, y, PIECE_SIZE / 2, 0, Math.PI * 2);if (player === 1) {// 黑棋 - 渐变效果const gradient = ctx.createRadialGradient(x - PIECE_SIZE / 6, y - PIECE_SIZE / 6, PIECE_SIZE / 10,x, y, PIECE_SIZE / 2);gradient.addColorStop(0, '#555');gradient.addColorStop(1, '#000');ctx.fillStyle = gradient;} else {// 白棋 - 渐变效果const gradient = ctx.createRadialGradient(x - PIECE_SIZE / 6, y - PIECE_SIZE / 6, PIECE_SIZE / 10,x, y, PIECE_SIZE / 2);gradient.addColorStop(0, '#fff');gradient.addColorStop(1, '#ddd');ctx.fillStyle = gradient;}ctx.fill();// 棋子边缘ctx.strokeStyle = player === 1 ? '#333' : '#ccc';ctx.lineWidth = 1;ctx.stroke();}// 检查胜利条件function checkWin(row, col, player) {const directions = [[1, 0],   // 水平[0, 1],   // 垂直[1, 1],   // 对角线[1, -1]   // 反对角线];for (const [dx, dy] of directions) {let count = 1;  // 当前位置已经有一个棋子// 正向检查for (let i = 1; i < 5; i++) {const newRow = row + i * dy;const newCol = col + i * dx;if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {break;}if (gameBoard[newRow][newCol] === player) {count++;} else {break;}}// 反向检查for (let i = 1; i < 5; i++) {const newRow = row - i * dy;const newCol = col - i * dx;if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {break;}if (gameBoard[newRow][newCol] === player) {count++;} else {break;}}if (count >= 5) {return true;}}return false;}// 检查平局function checkDraw() {for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {if (gameBoard[i][j] === 0) {return false; // 还有空位，不是平局}}}return true; // 棋盘已满，平局}// 更新游戏状态显示function updateGameStatus() {if (gameActive) {statusText.textContent = `游戏进行中 - ${currentPlayer === 1 ? '黑棋' : '白棋'}回合`;currentPlayerEl.className = `w-6 h-6 rounded-full ${currentPlayer === 1 ? 'bg-black' : 'bg-white border border-gray-300'} mr-2 piece-shadow`;playerText.textContent = currentPlayer === 1 ? '黑棋' : '白棋';// 启用/禁用棋盘点击canvas.style.cursor = (playerRole === currentPlayer && !isWaitingForServer) ? 'pointer' : 'not-allowed';} else if (socket && socket.connected && playerRole !== 0) {statusText.textContent = playerRole === currentPlayer ? `等待对手确认...` : `等待对手行动...`;canvas.style.cursor = 'not-allowed';} else {statusText.textContent = `等待连接...`;canvas.style.cursor = 'not-allowed';}moveCountEl.textContent = moveHistory.length;}// 更新游戏时间function updateGameTime() {gameTime++;const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0');const seconds = (gameTime % 60).toString().padStart(2, '0');gameTimeEl.textContent = `${minutes}:${seconds}`;}// 开始计时function startTimer() {clearInterval(timerInterval);timerInterval = setInterval(updateGameTime, 1000);}// 停止计时function stopTimer() {clearInterval(timerInterval);}// 显示胜利模态框function showWinModal(winner) {gameActive = false;stopTimer();winnerText.textContent = `${winner === 1 ? '黑棋' : '白棋'}获胜!`;winModal.classList.remove('hidden');// 添加动画效果setTimeout(() => {winModal.classList.add('opacity-100');winModal.querySelector('div').classList.remove('scale-95');winModal.querySelector('div').classList.add('scale-100');}, 10);}// 隐藏胜利模态框function hideWinModal() {winModal.classList.remove('opacity-100');winModal.querySelector('div').classList.remove('scale-100');winModal.querySelector('div').classList.add('scale-95');setTimeout(() => {winModal.classList.add('hidden');}, 300);}// 显示等待模态框function showWaitingModal() {waitingModal.classList.remove('hidden');// 添加动画效果setTimeout(() => {waitingModal.classList.add('opacity-100');waitingModal.querySelector('div').classList.remove('scale-95');waitingModal.querySelector('div').classList.add('scale-100');}, 10);}// 隐藏等待模态框function hideWaitingModal() {waitingModal.classList.remove('opacity-100');waitingModal.querySelector('div').classList.remove('scale-100');waitingModal.querySelector('div').classList.add('scale-95');setTimeout(() => {waitingModal.classList.add('hidden');}, 300);}// 重置游戏function resetGame(sendToServer = true) {gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));currentPlayer = 1;gameActive = true;moveHistory = [];gameTime = 0;isWaitingForServer = false;drawBoard();updateGameStatus();gameTimeEl.textContent = '00:00';stopTimer();startTimer();hideWinModal();// 发送重置游戏请求if (sendToServer && socket && socket.connected) {socket.emit('resetGame');}}// 悔棋function undoMove() {if (moveHistory.length === 0 || !gameActive) {return;}const lastMove = moveHistory.pop();gameBoard[lastMove.row][lastMove.col] = 0;currentPlayer = lastMove.player; // 回到上一个玩家drawBoard();updateGameStatus();// 发送悔棋请求if (socket && socket.connected) {socket.emit('undoMove');}}// 连接到服务器function connectToServer() {const serverIp = serverIpInput.value.trim();const serverPort = serverPortInput.value.trim();if (!serverIp || !serverPort) {alert('请输入服务器IP地址和端口号');return;}// 断开现有连接if (socket) {socket.disconnect();}// 创建新连接socket = io(`http://${serverIp}:${serverPort}`);// 更新连接状态connectionStatus.className = 'online-dot bg-yellow-500 mr-2';connectionText.textContent = '连接中...';connectBtn.disabled = true;connectBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>连接中...';// 监听连接成功事件socket.on('connect', () => {connectionStatus.className = 'online-dot bg-online mr-2';connectionText.textContent = '已连接';connectBtn.disabled = true;connectBtn.innerHTML = '<i class="fa-solid fa-check mr-2"></i>已连接';// 发送加入游戏请求socket.emit('joinGame');showWaitingModal();});// 监听连接断开事件socket.on('disconnect', () => {connectionStatus.className = 'online-dot bg-offline mr-2';connectionText.textContent = '未连接';playerRole = 0;gameActive = false;updateGameStatus();connectBtn.disabled = false;connectBtn.innerHTML = '<i class="fa-solid fa-wifi mr-2"></i>连接服务器';hideWaitingModal();// 更新角色显示playerRoleEl.className = 'w-6 h-6 rounded-full mr-2 piece-shadow';roleText.textContent = '未分配';// 禁用游戏按钮restartBtn.disabled = true;undoBtn.disabled = true;statusText.textContent = '连接已断开';});// 监听错误事件socket.on('connect_error', (error) => {connectionStatus.className = 'online-dot bg-offline mr-2';connectionText.textContent = '连接失败';connectBtn.disabled = false;connectBtn.innerHTML = '<i class="fa-solid fa-wifi mr-2"></i>连接服务器';alert(`连接失败: ${error.message}`);});// 监听游戏开始事件socket.on('gameStart', (role) => {playerRole = role;gameActive = true;hideWaitingModal();// 更新角色显示playerRoleEl.className = `w-6 h-6 rounded-full ${playerRole === 1 ? 'bg-black' : 'bg-white border border-gray-300'} mr-2 piece-shadow`;roleText.textContent = playerRole === 1 ? '黑棋' : '白棋';// 启用游戏按钮restartBtn.disabled = false;undoBtn.disabled = false;// 只在首次进入时重绘棋盘和状态，不要调用 resetGame()drawBoard();updateGameStatus();});// 监听对手落子事件socket.on('moveConfirmed', (data) => {console.log('收到服务器落子确认:', data);isWaitingForServer = false;const { row, col, player } = data;// 更新棋盘gameBoard[row][col] = player;// 确保历史记录同步const lastMove = moveHistory[moveHistory.length - 1];if (!lastMove || lastMove.row !== row || lastMove.col !== col || lastMove.player !== player) {moveHistory.push({ row, col, player });}// 重绘棋盘drawBoard();// 检查是否胜利if (checkWin(row, col, player)) {showWinModal(player);return;}// 检查是否平局if (checkDraw()) {gameActive = false;stopTimer();statusText.textContent = '游戏结束 - 平局!';return;}// 切换当前玩家currentPlayer = player === 1 ? 2 : 1;// 更新游戏状态updateGameStatus();});// 监听游戏重置事件socket.on('gameReset', () => resetGame(false));// 监听对手断开连接事件socket.on('opponentDisconnected', () => {gameActive = false;stopTimer();statusText.textContent = '对手已断开连接';// 禁用游戏按钮restartBtn.disabled = true;undoBtn.disabled = true;// 显示提示alert('对手已断开连接');});}// 处理棋盘点击事件canvas.addEventListener('click', (event) => {if (!gameActive || playerRole !== currentPlayer || isWaitingForServer) {console.log('点击事件触发 - 游戏状态:', gameActive, '当前玩家:', currentPlayer, '我的角色:', playerRole);return;}// 计算点击位置对应的棋盘坐标const rect = canvas.getBoundingClientRect();const scaleX = canvas.width / rect.width;const scaleY = canvas.height / rect.height;const clickX = (event.clientX - rect.left) * scaleX;const clickY = (event.clientY - rect.top) * scaleY;const col = Math.round(clickX / CELL_SIZE);const row = Math.round(clickY / CELL_SIZE);// 检查坐标是否在棋盘范围内if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) {return;}// 检查该位置是否已经有棋子if (gameBoard[row][col] !== 0) {return;}// 设置状态为等待服务器确认isWaitingForServer = true;updateGameStatus();// 向服务器发送落子请求socket.emit('makeMove', { row, col, player: playerRole });// 这里不再直接更新棋盘，等待服务器确认后再更新});// 窗口大小调整时重绘棋盘window.addEventListener('resize', () => {const newCellSize = Math.min(window.innerWidth * 0.8 / BOARD_SIZE, window.innerHeight * 0.6 / BOARD_SIZE);if (newCellSize !== CELL_SIZE) {// 由于CELL_SIZE是常量，无法直接修改，这里只重绘不调整大小drawBoard();}});// 绑定按钮事件connectBtn.addEventListener('click', connectToServer);restartBtn.addEventListener('click', () => resetGame(true));undoBtn.addEventListener('click', undoMove);newGameBtn.addEventListener('click', () => resetGame(true));cancelWaitingBtn.addEventListener('click', () => {if (socket) {socket.disconnect();}hideWaitingModal();});// 初始化棋盘drawBoard();});</script>
</body>
</html>

服务端启动命令

// 1、初始化项目
npm init -y// 2、安装所需的依赖项
npm install express socket.io// 3、运行服务
node server.js

相关新闻

自学Java怎么入门

自学Java怎么入门

自学Java其实没有想象中那么难&#xff0c;只要找对方法&#xff0c;循序渐进地学习&#xff0c;很快就能上手。下面我结合自己的经验&#xff0c;给你整理一条清晰的学习路径&#xff0c;咱们一步步来。 一、先了解Java能做什么 在开始之前&#xff0c;建议你先看看Java都能…

2026/7/24 5:17:57
Reactor 瞬态错误

Reactor 瞬态错误

在响应式编程中&#xff0c;retryWhen 操作符通过 RetrySignal 接口提供了对重试行为的精细控制&#xff0c;特别是在处理 瞬态错误&#xff08;transient errors&#xff09; 时。瞬态错误是指那些在一段时间内发生&#xff0c;但随后会自行恢复的错误&#xff0c;例如网络请求…

2026/7/25 10:27:01
本地部署Dify+Ragflow及使用（一）

本地部署Dify+Ragflow及使用（一）

概念说明 RAGflow&#xff1a; 吃透知识&#xff1a;将企业文档&#xff08;如技术白皮书&#xff09;解析为结构化知识片段。精准检索&#xff1a;当用户提问时&#xff0c;从知识库中召回最相关内容。 模型供应商&#xff1a; 提供大脑&#xff1a;为 Dify 提供生成答案的模…

2026/7/27 11:28:04

最新新闻

谷歌连发三款“效率优先”模型：Gemini 3.6 Flash如何倒逼API网关与消息中间件升级？

谷歌连发三款“效率优先”模型：Gemini 3.6 Flash如何倒逼API网关与消息中间件升级？

2026年7月21日&#xff0c;谷歌一口气发布了三款Gemini Flash系列新模型——Gemini 3.6 Flash、Gemini 3.5 Flash-Lite和Gemini 3.5 Flash Cyber。与此前围绕模型能力上限展开的军备竞赛不同&#xff0c;这次谷歌打出的旗号异常清晰&#xff1a;效率优先于绝对性能。 在xAI的G…

2026/7/28 13:03:53
抖音无水印下载神器：3分钟快速上手指南

抖音无水印下载神器：3分钟快速上手指南

抖音无水印下载神器&#xff1a;3分钟快速上手指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音批量下…

2026/7/28 13:03:53
11999元预算在Win11本地部署GLM-5.2大模型：硬件选型、部署实战与RAG/Agent集成指南

11999元预算在Win11本地部署GLM-5.2大模型：硬件选型、部署实战与RAG/Agent集成指南

这类标题和热词指向一个非常具体的场景：在 Windows 11 上，以相对亲民的硬件预算（11999元），本地部署一个能跑出 11 tokens/s 速度的 GLM-5.2 模型，并且让它支持 Claw 和 Agent 知识库功能。这听起来像是为不想折腾 Linux、又想拥有本地大模型和知识库能力的开发者或爱好者…

2026/7/28 13:03:53
虚幻引擎5.8集成MySQL/MariaDB数据库：从原理到实战应用

虚幻引擎5.8集成MySQL/MariaDB数据库：从原理到实战应用

在虚幻引擎（UE）项目中，当我们需要处理玩家数据、排行榜、配置信息或任何需要持久化存储的游戏状态时，本地文件或简单的数据表往往显得力不从心。这时，一个成熟的关系型数据库就显得至关重要。然而，直接在 UE 的 C++ 或蓝图中连接和操作 MySQL/MariaDB 并非易事，需要处理…

2026/7/28 13:03:53
NVLink技术解析：GPU高速互连原理与应用实践

NVLink技术解析：GPU高速互连原理与应用实践

1. NVLink技术的基本概念与演进历程NVLink是英伟达在2014年推出的革命性GPU互连技术&#xff0c;最初设计用于解决传统PCIe总线在GPU间通信时出现的带宽瓶颈问题。与PCIe Gen3的16GB/s双向带宽相比&#xff0c;第一代NVLink就实现了80GB/s的总带宽&#xff0c;这个数字在最新的…

2026/7/28 13:03:53
丽江玉龙纳西族自治县外墙装修工厂推荐,内墙装修工厂哪家好怎么选不踩坑｜2026最新避坑攻略与靠谱工厂推荐 - mobible

丽江玉龙纳西族自治县外墙装修工厂推荐,内墙装修工厂哪家好怎么选不踩坑｜2026最新避坑攻略与靠谱工厂推荐 - mobible

丽江玉龙纳西族自治县外墙装修、内墙装修怎么选不踩坑｜2026最新避坑攻略与靠谱工厂推荐 老刘在丽江玉龙纳西族自治县买了套自建房，去年找了家号称“大品牌”的外墙装修公司，结果刚一年，墙面就起皮、开裂，甚至还掉…

2026/7/28 13:03:05

日新闻

告别臃肿！3步让你的暗影精灵笔记本重获新生

告别臃肿！3步让你的暗影精灵笔记本重获新生

告别臃肿&#xff01;3步让你的暗影精灵笔记本重获新生 【免费下载链接】OmenSuperHub Control Omen laptop performance, fan speeds, and keyboard lighting, and unlock power limits. 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 你是否也曾为官方Om…

2026/7/28 0:00:52
RAG必踩坑！财报法规检索不准？这款开源工具让答案浮出水面，准确率飙升98.7%！

RAG必踩坑！财报法规检索不准？这款开源工具让答案浮出水面，准确率飙升98.7%！

做 RAG 的人应该都踩过这个致命的坑&#xff1a;把几百页的财报、法规、技术手册扔给向量库&#xff0c;问一个具体问题&#xff0c;搜出来的全是沾边但没用的内容 —— 关键信息要么被硬切块拆碎了&#xff0c;要么藏在几十条结果的最下面。语义相似≠真正相关&#xff0c;这个…

2026/7/28 0:00:52
抖音视频文案提取工具全指南：免费2026版、手机App、在线工具一网打尽

抖音视频文案提取工具全指南：免费2026版、手机App、在线工具一网打尽

2026年做短视频运营&#xff0c;从抖音上扒文案早就不是偷偷抄笔记的事了。我刚开始做内容的时候&#xff0c;每天刷半小时抖音&#xff0c;手动把爆款视频的口播敲进备忘录&#xff0c;一条2分钟的视频得花十来分钟&#xff0c;碰到语速快的还要反复回听。后来试了一圈工具&am…

2026/7/28 0:00:52

周新闻

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别&#xff1a; allies enemy tag图片总量&#xff1a;7247张训练集&#xff1a;5139张验证集&#xff1a;1425张测试集&#xff1a;683张标注状态&#xff1a;全部已标注&#xff0c;即拿即用数据格式&#xff1a;支持YOLO格式及其他格式&#…

2026/7/28 8:40:21
智慧飞行 大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 从航线规划、自动飞行、AI识别到数据管理，一个平台全搞定

智慧飞行 大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 从航线规划、自动飞行、AI识别到数据管理，一个平台全搞定

智慧飞行-大疆无人机一站式智能管控平台/支持大疆机场/私有化部署 企业级全域智能无人机一体化管控平台源码&#xff01; 专为电力巡检、安防监控、应急救援、测绘勘察等行业打造&#xff0c;让您的无人机舰队实现 “无人化、自动化、智能化” 管理&#xff01; &#x1f3af; …

2026/7/28 6:30:42
揭秘ChatGPT+Mathematica协同教学：为什么92%的初学者在72小时内建立函数直觉？

揭秘ChatGPT+Mathematica协同教学：为什么92%的初学者在72小时内建立函数直觉？

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;AI帮助理解数学概念 人工智能正以前所未有的方式重塑数学学习的路径。通过自然语言处理与符号计算的深度融合&#xff0c;AI不仅能解析抽象定义&#xff0c;还能将定理、证明和几何直觉转化为可交互、可验证的…

2026/7/28 9:00:08

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/28 2:07:36
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/28 2:07:37
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/28 11:58:14