Question

过去几个小时我一直在尝试使用 socket.io 和 js 制作多人井字游戏。我正在尝试向另一个用户广播一个用户选择的单元格，它返回一个未定义的对象。我已经包含了 script.js 和 server.js

<--script.js-->

const socket = io('http://localhost:3000')
const cellElements = document.querySelectorAll('[data-cell]')
const board = document.getElementById('board')
let circleTurn
const CIRCLE_CLASS = 'circle'
const X_CLASS = 'x'

startGame()

function startGame() {
     circleTurn = false
     cellElements.forEach(cell => {
       cell.classList.remove(X_CLASS)
       cell.classList.remove(CIRCLE_CLASS)
       cell.removeEventListener('click', handleClick)
       cell.addEventListener('click', handleClick, { once: true })
     })
}

function handleClick(e){
     const cell = e.target
     socket.emit('get-cell', cell)
     const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS
     placeMark(cell, currentClass)
     socket.on('send-cell', cell => {
          placeMark(cell, currentClass)
     })
     swapTurns()
}

function placeMark(cell, currentClass) {
     cell.classList.add(currentClass)
}

function swapTurns() {
     circleTurn = !circleTurn
}

<--server.js-->

const io = require("socket.io")(3000, {
     cors:{
          origin: "*",
     },
})

io.on('connection', socket => {
     socket.on('get-cell', cell => {
          socket.broadcast.emit('send-cell', cell)
     })
})

多人井字游戏

0 个答案: