初步测试完毕

2022-08-20 16:10:01 +08:00 · 2022-08-20 16:10:01 +08:00 · 204729d5d9
commit 204729d5d9
parent dfc3d1759d
3 changed files with 193 additions and 192 deletions
--- a/public/client.js
+++ b/public/client.js
@ -1,50 +1,51 @@
 const player = io()
-let myNumber = 0
-let autoPlayer = 0
+let my_number = 0
+let auto_play = false
+
+buttonAuto.addEventListener('click', () => {
+    auto_play = !auto_play
+    if (auto_play) player.emit('go')
+    buttonAuto.style.color = auto_play ? 'red' : 'black'
+})
+
+player.on('online', (number) => (online.innerText = number))
+player.on('players', (number) => (players.innerText = number))

 player.on('alert', (message) => {
-    alert(message)
-})
-
-player.on('onlineNumber', (number) => {
-    onlineNumber.innerText = number
-})
-
-player.on('playersNumber', (number) => {
-    playersNumber.innerText = number
+    const alert = document.createElement('li')
+    alert.innerText = message
+    messages.appendChild(alert)
+    while (messages.childElementCount > 5) messages.childNodes[0].remove()
 })

 player.on('join', (number) => {
-    myNumber = number
-    playerNumber.innerText = number
-    buttonJoin.innerText = number == 0 ? '加入' : '退出'
-    buttonJoin.style.color = number == 0 ? 'red' : 'black'
+    my_number = number
+    player_number.innerText = number
+    buttonJoin.innerText = number ? '退出' : '加入'
+    buttonJoin.style.color = number ? 'black' : 'red'
 })

 player.on('status', (status) => {
    const { players, cards, current } = status
+    // 更新玩家剩余牌数的显示
    player1.innerText = '🎴'.repeat(players[0] || 0)
    player2.innerText = '🎴'.repeat(players[1] || 0)
    player3.innerText = '🎴'.repeat(players[2] || 0)
-    currentPlayerNumber.innerText = current + 1
-    buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
-    cardsDisplay.innerHTML = ''
+    // 更新桌面上牌的显示
+    table.innerHTML = ''
    for (let cid of cards) {
        let card = document.createElement('card-t')
        card.setAttribute('cid', cid)
-        card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
        card.setAttribute('backtext', 'JOKER')
-        cardsDisplay.appendChild(card)
+        card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
+        table.appendChild(card)
    }
-})
-
-buttonAuto.addEventListener('click', () => {
-    if (autoPlayer != 0) {
-        clearInterval(autoPlayer)
-        autoPlayer = 0
-        buttonAuto.style.color = 'black'
+    // 依据当前玩家更新相关显示
+    currentPlayerNumber.innerText = current
+    if (my_number > 0 && my_number == current) {
+        if (auto_play) player.emit('go')
+        else buttonGo.style.color = 'red'
    } else {
-        autoPlayer = setInterval(() => player.emit('go'), 1000)
-        buttonAuto.style.color = 'red'
+        buttonGo.style.color = 'black'
    }
 })
--- a/public/index.html
+++ b/public/index.html
@ -4,12 +4,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" ,content="width=device-width, initial-scale=1.0">
-    <link
-        href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAANDQ0AHFxcQBPT08AjIyMAAsLCwAUFBQA0tLSAHNzcwDb29sAJiYmAOTk5AAvLy8A7e3tAMLCwgAEBAQA9vb2AMvLywD///8AqampALu7uwCQkJAAMTExAAYGBgD4+PgA1tbWAImJiQDx8fEAMzMzADw8PAD6+voApKSkAOHh4QABAQEANTU1AAoKCgD8/PwAPj4+ABMTEwDa2toA4+PjAOzs7ACNjY0AYmJiAAMDAwDBwcEAysrKAAwMDAD+/v4AUlJSAOXl5QCGhoYAurq6AFtbWwAwMDAA7u7uAPf39wDV1dUA3t7eAOfn5wAyMjIAxcXFAAcHBwCampoAzs7OABkZGQDX19cAtbW1ACsrKwDp6ekAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhIQEwgdCjY8RBYrKhsSEhISEhIkCQMAAEQ9GyQSEhISEhISEhIbAQUgEhISEhISEhISOhQnEh8VEjIuKRISEhISLSMhLCoJOTQ+IQYOEhISN0EAAAAACAQ+AAAALygkEjQAAAAAAA8XAAAAAAA/CxJFIwAAAAAAAAAAAAAABx4SEjMAAAAAAAAAAAAAIh4SEhIYMQAAAAAAAAAAJkASEhISEjgCAAAAAAAADEISEhISEhISMBoAAAAAJTsSEhISEhISEhISMwAAFkUSEhISEhISEhISEh4cABESEhISEhISEhISEhISQzUSEhISEhISEhISEhISEg0ZEhISEhISEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
-        rel="icon" type="image/x-icon" />
-    <!-- <link rel="shortcut icon" href="data:" type="image/x-icon"> -->
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>小猫钓鱼</title>
-
    <style>
        card-t {
            display: inline-block;
@ -22,9 +18,7 @@

 <body>
    <h1>小猫钓鱼</h1>
-    <!-- <card-t cid="Qs"></card-t> -->
-    <p>[ 在线 <var id="onlineNumber">0</var> ] [ 玩家 <var id="playersNumber">0</var> ] [ 我是 玩家<var
-            id="playerNumber">0</var>
+    <p>[ 在线 <var id="online">0</var> ] [ 玩家 <var id="players">0</var> ] [ 我是 玩家<var id="player_number">0</var>
        ] [ 当前 玩家<var id="currentPlayerNumber">0</var>
        ]</p>
    <p>玩家1 <var id="player1"></var></p>
@ -36,8 +30,8 @@
        <button id="buttonAuto">自动</button>
    </p>

-    <p id="cardsDisplay"></p>
-
+    <p id="table"></p>
+    <ul id="messages" style="color:red;"></ul>
    <!-- https://github.com/cardmeister/cardmeister.github.io -->
    <script src="/elements.cardmeister.min.js"></script>

--- a/server.js
+++ b/server.js
@ -1,218 +1,224 @@
 const express = require('express')
-const 应用 = express()
-应用.use(require('compression')())
-应用.use(express.static('public'))
-const 主机 = process.env.HOST || '0.0.0.0'
-const 端口 = process.env.PORT || 3000
-const 服务器 = 应用.listen(端口, 主机, () => console.log(`小猫钓鱼游戏服务运行在 http://${主机}:${端口}/`))
-const IO = require('socket.io')(服务器)
+const application = express()
+application.use(require('compression')())
+application.use(express.static('public'))
+const host = process.env.HOST || '0.0.0.0'
+const port = process.env.PORT || 3000
+const server = application.listen(port, host, () => console.log(`小猫钓鱼游戏服务运行在 http://${host}:${port}/`))
+const io = require('socket.io')(server)

 const clients = [] // 所有客户
 const players = [] // 所有玩家
-let cardsOnTable = [] // 桌上的牌
-let currentPlayerNumber = -1 // 当前玩家序号
+let current = -1 // 当前玩家序号
+let cards = [] // 桌上的牌

-IO.on('connection', (client) => {
-    addClient(client)
-    client.on('disconnect', () => removeClient(client))
-    client.on('join', () => playerJoin(client))
+io.on('connection', (client) => {
+    // 初始化客户端
+    client.cards = []
+    clients.push(client)
+    console.info(`新连接，当前客户端${clients.length}个`)
+    // 广播新的客户端数量
+    io.emit('online', clients.length)
+    // 通知客户当前游戏状态
+    update_status(client)
+    client.emit('join', 0)
+    client.emit('players', players.length)
+    // 其它客户事件处理
+    client.on('disconnect', () => disconnect(client))
+    client.on('join', () => join(client))
    client.on('go', () => go(client))
 })

-function addClient(client) {
-    client.cards = []
-    clients.push(client)
-    IO.emit('onlineNumber', clients.length)
-    client.emit('playersNumber', players.length)
-    client.emit('join', 0)
-    gameStatus() // TODO：只告诉当前加入的客户端
-    console.info(`新客户端已连接，当前客户端${clients.length}个`)
-}
-
-function removeClient(client) {
+function disconnect(client) {
+    // 移除客户端
    let index = clients.indexOf(client)
    clients.splice(index, 1)
-    IO.emit('onlineNumber', clients.length)
+    io.emit('online', clients.length)
    console.log(`已断开，当前客户端${clients.length}个`)
+    // 移除玩家
    if (players.includes(client)) {
        index = players.indexOf(client)
        players.splice(index, 1)
-        IO.emit('playersNumber', players.length)
-        // 游戏被迫结束？
+        io.emit('players', players.length)
+        // 游戏被迫结束
        if (players.length == 2) {
-            gameFinished()
-            IO.emit('alert', `玩家${index + 1}掉线了`)
+            io.emit('alert', `玩家${index + 1}掉线了，游戏被迫结束!`)
+            finish()
        }
    }
 }

-function playerJoin(player) {
+function join(player) {
    if (players.length < 3) {
-        let playerIndex = players.indexOf(player)
-        let playerNumber = playerIndex + 1
-        if (playerNumber > 0) {
-            playerNumber = 0
-            players.splice(playerIndex, 1)
-            console.log(`玩家${playerNumber} 已退出，当前玩家数：${players.length}`)
+        let player_index = players.indexOf(player)
+        let player_number = player_index + 1
+        if (player_number > 0) {
+            players.splice(player_index, 1)
+            player.broadcast.emit('alert', `玩家${player_number}退出了游戏`)
+            console.log(`玩家${player_number}退出了，当前玩家${players.length}个`)
+            player.emit('alert', '你退出了游戏')
+            player.emit('join', 0)
+            player_number = 0
+            for (let i = 0; i < players.length; i++) {
+                players[i].emit('join', i + 1)
+                players[i].emit('alert', `你现在是玩家${i + 1}`)
+            }
        } else {
-            players.push(player)
-            playerNumber = players.indexOf(player) + 1
-            console.log(`玩家${playerNumber} 已加入，当前玩家数：${players.length}`)
            player.cards = []
-            if (players.length === 3) gameStart()
+            players.push(player)
+            player_number = players.indexOf(player) + 1
+            player.emit('join', player_number)
+            player.emit('alert', `你现在是玩家${player_number}`)
+            player.broadcast.emit('alert', `玩家${player_number}加入了游戏`)
+            console.log(`玩家${player_number}加入了，当前玩家${players.length}个`)
+            if (players.length === 3) start()
        }
-        player.emit('join', playerNumber)
-        IO.emit('playersNumber', players.length)
+        io.emit('players', players.length)
    }
 }

-function gameStart() {
-    console.log('游戏开始')
-    cardsOnTable.length = 0
-    currentPlayerNumber = 0
-    // 洗牌，每玩家发18张
-    const deck = [
-        { suit: 's', rank: '2' },
-        { suit: 's', rank: '3' },
-        { suit: 's', rank: '4' },
-        { suit: 's', rank: '5' },
-        { suit: 's', rank: '6' },
-        { suit: 's', rank: '7' },
-        { suit: 's', rank: '8' },
-        { suit: 's', rank: '9' },
-        { suit: 's', rank: 'T' },
-        { suit: 's', rank: 'J' },
-        { suit: 's', rank: 'Q' },
-        { suit: 's', rank: 'K' },
-        { suit: 's', rank: 'A' },
-        { suit: 'h', rank: '2' },
-        { suit: 'h', rank: '3' },
-        { suit: 'h', rank: '4' },
-        { suit: 'h', rank: '5' },
-        { suit: 'h', rank: '6' },
-        { suit: 'h', rank: '7' },
-        { suit: 'h', rank: '8' },
-        { suit: 'h', rank: '9' },
-        { suit: 'h', rank: 'T' },
-        { suit: 'h', rank: 'J' },
-        { suit: 'h', rank: 'Q' },
-        { suit: 'h', rank: 'K' },
-        { suit: 'h', rank: 'A' },
-        { suit: 'c', rank: '2' },
-        { suit: 'c', rank: '3' },
-        { suit: 'c', rank: '4' },
-        { suit: 'c', rank: '5' },
-        { suit: 'c', rank: '6' },
-        { suit: 'c', rank: '7' },
-        { suit: 'c', rank: '8' },
-        { suit: 'c', rank: '9' },
-        { suit: 'c', rank: 'T' },
-        { suit: 'c', rank: 'J' },
-        { suit: 'c', rank: 'Q' },
-        { suit: 'c', rank: 'K' },
-        { suit: 'c', rank: 'A' },
-        { suit: 'd', rank: '2' },
-        { suit: 'd', rank: '3' },
-        { suit: 'd', rank: '4' },
-        { suit: 'd', rank: '5' },
-        { suit: 'd', rank: '6' },
-        { suit: 'd', rank: '7' },
-        { suit: 'd', rank: '8' },
-        { suit: 'd', rank: '9' },
-        { suit: 'd', rank: 'T' },
-        { suit: 'd', rank: 'J' },
-        { suit: 'd', rank: 'Q' },
-        { suit: 'd', rank: 'K' },
-        { suit: 'd', rank: 'A' },
-        { suit: '1', rank: '0' },
-        { suit: '2', rank: '0' },
+function start() {
+    console.log('新游戏开始')
+    io.emit('alert', '游戏开始了！')
+    // 初始化游戏状态
+    current = 0
+    cards = []
+    players[0].cards = []
+    players[1].cards = []
+    players[2].cards = []
+    // 三个玩家每人发18张牌
+    let deck = [
+        '2s',
+        '3s',
+        '4s',
+        '5s',
+        '6s',
+        '7s',
+        '8s',
+        '9s',
+        'Ts',
+        'Js',
+        'Qs',
+        'Ks',
+        'As',
+        '2h',
+        '3h',
+        '4h',
+        '5h',
+        '6h',
+        '7h',
+        '8h',
+        '9h',
+        'Th',
+        'Jh',
+        'Qh',
+        'Kh',
+        'Ah',
+        '2c',
+        '3c',
+        '4c',
+        '5c',
+        '6c',
+        '7c',
+        '8c',
+        '9c',
+        'Tc',
+        'Jc',
+        'Qc',
+        'Kc',
+        'Ac',
+        '2d',
+        '3d',
+        '4d',
+        '5d',
+        '6d',
+        '7d',
+        '8d',
+        '9d',
+        'Td',
+        'Jd',
+        'Qd',
+        'Kd',
+        'Ad',
+        '01',
+        '02',
    ]
-
    while (deck.length > 0) {
        let index = Math.floor(Math.random() * deck.length)
        let card = deck[index]
-        players[currentPlayerNumber].cards.push(card)
        deck.splice(index, 1)
-        currentPlayerNumber = (currentPlayerNumber + 1) % 3
+        players[current].cards.push(card)
+        current = (current + 1) % 3
+    }
+    update_status()
 }

-    gameStatus()
-}
-
-function gameStatus() {
-    const cardsNumbers = []
-
-    for (let player of players) {
-        cardsNumbers.push(player.cards.length)
-    }
-
-    const cardsStrings = []
-    for (let card of cardsOnTable) {
-        cardsStrings.push(`${card.rank}${card.suit}`)
-    }
-
-    IO.emit('status', {
-        players: cardsNumbers,
-        cards: cardsStrings,
-        current: currentPlayerNumber,
+function update_status(client = null) {
+    ;(client || io).emit('status', {
+        players: players.length == 3 ? [players[0].cards.length, players[1].cards.length, players[2].cards.length] : [0, 0, 0],
+        cards,
+        current: current + 1,
    })
 }

-function go(client) {
-    if (currentPlayerNumber != -1 && players.indexOf(client) === currentPlayerNumber) {
-        let card = players[currentPlayerNumber].cards[0]
-        players[currentPlayerNumber].cards.splice(0, 1)
-        console.log(`玩家${currentPlayerNumber + 1} 出牌 [${card.rank}${card.suit}]`)
+function go(player) {
+    if (current != -1 && players.indexOf(player) == current) {
+        let card = players[current].cards[0]
+        players[current].cards.splice(0, 1)
+        console.log(`玩家${current + 1} 出牌 [${card}]`)

        // 判断有没有钓到
        let i = 0
        let getit = false
-        for (i = 0; i < cardsOnTable.length; i++) {
-            if (cardsOnTable[i].rank == card.rank) {
+        for (i = 0; i < cards.length; i++) {
+            if (cards[i][0] == card[0]) {
                getit = true
                break
            }
        }
        if (getit) {
            // 将第i张牌后面的牌和玩家刚出的牌一起拿走放回玩家手中的牌后面
-            const fishes = [...cardsOnTable.slice(i), card]
-            console.log(`玩家${currentPlayerNumber + 1} 钓到 ${fishes.length} 条鱼`)
-            players[currentPlayerNumber].cards = players[currentPlayerNumber].cards.concat(fishes)
-            cardsOnTable = cardsOnTable.slice(0, i)
+            const fishes = [...cards.slice(i), card]
+            console.log(`玩家${current + 1} 钓到了 ${fishes.length} 条鱼`)
+            io.emit('alert', `玩家${current + 1} 钓到了 ${fishes.length} 条鱼`)
+            players[current].cards = players[current].cards.concat(fishes)
+            cards = cards.slice(0, i)
        } else {
-            cardsOnTable.push(card)
-            if (players[currentPlayerNumber].cards.length == 0) {
-                client.emit('alert', '你输了')
+            cards.push(card)
+            if (players[current].cards.length == 0) {
+                player.emit('alert', '你输了')
+                player.broadcast.emit('alert', `玩家${current + 1}输了`)
            }
-            currentPlayerNumber = (currentPlayerNumber + 1) % 3
-            while (players[currentPlayerNumber].cards.length == 0) {
-                currentPlayerNumber = (currentPlayerNumber + 1) % 3
+            current = (current + 1) % 3
+            while (players[current].cards.length == 0) {
+                current = (current + 1) % 3
            }
        }

-        gameStatus()
-
        // 游戏结束了？
        let looser = 0
        let winner = 0
        for (let index = 0; index < players.length; index++) {
-            const player = players[index]
-            if (player.cards.length == 0) looser++
+            if (players[index].cards.length == 0) looser++
            else winner = index + 1
        }
+
        if (looser >= 2) {
-            players[winner - 1].emit('alert', '你赢了！')
-            players[winner - 1].broadcast.emit('alert', `玩家${winner} 获胜了！`)
-            gameFinished()
+            io.emit('alert', '游戏结束了~~~')
+            players[winner - 1].emit('alert', '恭喜，你赢了！')
+            players[winner - 1].broadcast.emit('alert', `你失败了，玩家${winner}获胜了！`)
+            finish()
        }
+
+        update_status()
    }
 }

-function gameFinished() {
+function finish() {
+    current = -1
+    cards.length = 0
    players.length = 0
-    cardsOnTable.length = 0
-    currentPlayerNumber = -1
-    IO.emit('join', 0)
-    IO.emit('playersNumber', 0)
-    IO.emit('status', { players: [0, 0, 0], cards: '', current: currentPlayerNumber })
+    update_status()
+    io.emit('join', 0)
+    io.emit('players', 0)
 }