新建

public/client.js

@@ -0,0 +1,31 @@
+const player = io()
+
+document.body.addEventListener('keyup', (event) => {
+    const shape = { 68: 'rock', 70: 'paper', 83: 'scissors' }[event.keyCode]
+    if (shape) player.emit('shape', shape)
+})
+
+function rename() {
+    const name = prompt('请输入您的名字')
+    if (name) player.emit('rename', name)
+}
+
+player.on('status', (status) => {
+    const player1 = document.querySelector('#player1 .name')
+    const player2 = document.querySelector('#player2 .name')
+    player1.innerText = status.player1.name
+    player2.innerText = status.player2.name
+    if (status.player1.id == player.id || status.player2.id == player.id) {
+        const isPlayer1 = status.player1.id == player.id
+        player1.style.color = isPlayer1 ? 'blue' : 'red'
+        player1.style.cursor = isPlayer1 ? 'pointer' : ''
+        player1.onclick = isPlayer1 ? rename : null
+        player2.style.color = isPlayer1 ? 'red' : 'blue'
+        player2.style.cursor = isPlayer1 ? '' : 'pointer'
+        player2.onclick = isPlayer1 ? null : rename
+    }
+    document.querySelector('#player1 .score').innerText = status.player1.score
+    document.querySelector('#player2 .score').innerText = status.player2.score
+    document.querySelector('#player1 .shape').style.backgroundImage = status.player1.shape ? `url(${status.player1.shape}.png)` : ''
+    document.querySelector('#player2 .shape').style.backgroundImage = status.player2.shape ? `url(${status.player2.shape}.png)` : ''
+})

server.js

@@ -0,0 +1,94 @@
+const express = require('express')
+const app = express()
+const host = '0.0.0.0'
+const port = 3000
+app.use(express.static('public'))
+const server = app.listen(port, host, () => console.info(`包剪锤 http://${host}:${port}`))
+const io = require('socket.io')(server)
+
+const status = {
+    player1: {
+        id: '',
+        name: '玩家甲',
+        score: 0,
+        shape: '',
+        current: '',
+    },
+    player2: {
+        id: '',
+        name: '玩家乙',
+        score: 0,
+        shape: '',
+        current: '',
+    },
+}
+
+io.on('connection', (client) => {
+    if (!status.player1.id) {
+        status.player1.id = client.id
+        status.player1.name = '玩家甲'
+        status.player1.score = 0
+        status.player1.shape = ''
+        status.player1.current = ''
+    } else if (!status.player2.id) {
+        status.player2.id = client.id
+        status.player2.name = '玩家乙'
+        status.player2.score = 0
+        status.player2.shape = ''
+        status.player2.current = ''
+    }
+    io.emit('status', status)
+
+    client.on('rename', (name) => {
+        name = name.trim()
+        if (name == '' || name == status.player1.name || name == status.player2.name) return false
+        if (status.player1.id == client.id) status.player1.name = name
+        else if (status.player2.id == client.id) status.player2.name = name
+        io.emit('status', status)
+    })
+
+    client.on('disconnect', () => {
+        if (status.player1.id == client.id) {
+            status.player1.id = ''
+            status.player1.name = '玩家甲'
+        } else if (status.player2.id == client.id) {
+            status.player2.id = ''
+            status.player2.name = '玩家乙'
+        }
+        status.player1.score = 0
+        status.player1.shape = ''
+        status.player1.current = ''
+        status.player2.score = 0
+        status.player2.shape = ''
+        status.player2.current = ''
+        io.emit('status', status)
+    })
+
+    client.on('shape', (shape) => {
+        // 接收双方出拳，各一次机会
+        if (status.player1.id == client.id && !status.player1.current) status.player1.current = shape
+        else if (status.player2.id == client.id && !status.player2.current) status.player2.current = shape
+        // 比较双方出拳
+        if (status.player1.current && status.player2.current) {
+            status.player1.shape = status.player1.current
+            status.player2.shape = status.player2.current
+            status.player1.current = ''
+            status.player2.current = ''
+            if (status.player1.shape == status.player2.shape) {
+                // 平局各加0.5分
+                status.player1.score += 0.5
+                status.player2.score += 0.5
+            } else if (
+                (status.player1.shape == 'rock' && status.player2.shape == 'scissors') ||
+                (status.player1.shape == 'scissors' && status.player2.shape == 'paper') ||
+                (status.player1.shape == 'paper' && status.player2.shape == 'rock')
+            ) {
+                status.player1.score++
+            } else {
+                status.player2.score++
+            }
+            io.emit('status', status)
+            console.table(status)
+        }
+    })
+})