Compare commits

...

3 Commits

Author SHA1 Message Date
90f003aa79 显示SVG扑克 2022-08-19 01:59:55 +08:00
090a94cd24 添加gzip compression 2022-08-19 01:59:35 +08:00
ac6a94cb8c 新建 2022-08-19 01:59:01 +08:00
8 changed files with 303 additions and 78 deletions

89
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"compression": "^1.7.4",
"express": "^4.18.1", "express": "^4.18.1",
"socketio": "^1.0.0" "socketio": "^1.0.0"
}, },
@ -229,6 +230,47 @@
"resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
"integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==" "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
}, },
"node_modules/compressible": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
"dependencies": {
"mime-db": ">= 1.43.0 < 2"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/compression": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
"dependencies": {
"accepts": "~1.3.5",
"bytes": "3.0.0",
"compressible": "~2.0.16",
"debug": "2.6.9",
"on-headers": "~1.0.2",
"safe-buffer": "5.1.2",
"vary": "~1.1.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/compression/node_modules/bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/compression/node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"node_modules/concat-map": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -870,6 +912,14 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/options": { "node_modules/options": {
"version": "0.0.6", "version": "0.0.6",
"resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz", "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
@ -1526,6 +1576,40 @@
"resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
"integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==" "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
}, },
"compressible": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
"requires": {
"mime-db": ">= 1.43.0 < 2"
}
},
"compression": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
"requires": {
"accepts": "~1.3.5",
"bytes": "3.0.0",
"compressible": "~2.0.16",
"debug": "2.6.9",
"on-headers": "~1.0.2",
"safe-buffer": "5.1.2",
"vary": "~1.1.2"
},
"dependencies": {
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
}
}
},
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -2027,6 +2111,11 @@
"ee-first": "1.1.1" "ee-first": "1.1.1"
} }
}, },
"on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
},
"options": { "options": {
"version": "0.0.6", "version": "0.0.6",
"resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz", "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",

View File

@ -16,6 +16,7 @@
"author": "Zhao Xin <7176466@qq.com>", "author": "Zhao Xin <7176466@qq.com>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"compression": "^1.7.4",
"express": "^4.18.1", "express": "^4.18.1",
"socketio": "^1.0.0" "socketio": "^1.0.0"
}, },

View File

@ -23,19 +23,21 @@ player.on('join', (number) => {
player.on('status', (status) => { player.on('status', (status) => {
const { players, cards, current } = status const { players, cards, current } = status
player1.innerText = makeCards(players[0] || 0) player1.innerText = '🎴'.repeat(players[0] || 0)
player2.innerText = makeCards(players[1] || 0) player2.innerText = '🎴'.repeat(players[1] || 0)
player3.innerText = makeCards(players[2] || 0) player3.innerText = '🎴'.repeat(players[2] || 0)
currentPlayerNumber.innerText = current + 1 currentPlayerNumber.innerText = current + 1
buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black' buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
cardsDisplay.innerText = cards cardsDisplay.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)
}
}) })
function makeCards(n) {
if (n == 0) return ''
return '['.repeat(n) + ']'
}
buttonAuto.addEventListener('click', () => { buttonAuto.addEventListener('click', () => {
if (autoPlayer != 0) { if (autoPlayer != 0) {
clearInterval(autoPlayer) clearInterval(autoPlayer)

File diff suppressed because one or more lines are too long

31
public/elements.cardmeister.min.js vendored Normal file

File diff suppressed because one or more lines are too long

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -4,27 +4,45 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" ,content="width=device-width, initial-scale=1.0"> <meta name="viewport" ,content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:" type="image/x-icon"> <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"> -->
<title>小猫钓鱼</title> <title>小猫钓鱼</title>
<style>
card-t {
display: inline-block;
width: 80px;
margin: 2px;
}
</style>
</head> </head>
<body> <body>
<h1>小猫钓鱼</h1> <h1>小猫钓鱼</h1>
<!-- <card-t cid="Qs"></card-t> -->
<p>[ 在线 <var id="onlineNumber">0</var> ] [ 玩家 <var id="playersNumber">0</var> ] [ 我是 玩家<var <p>[ 在线 <var id="onlineNumber">0</var> ] [ 玩家 <var id="playersNumber">0</var> ] [ 我是 玩家<var
id="playerNumber">0</var> id="playerNumber">0</var>
] [ 当前 玩家<var id="currentPlayerNumber">0</var>
]</p> ]</p>
<p>玩家1 <var id="player1"></var></p> <p>玩家1 <var id="player1"></var></p>
<p>玩家2 <var id="player2"></var></p> <p>玩家2 <var id="player2"></var></p>
<p>玩家3 <var id="player3"></var></p> <p>玩家3 <var id="player3"></var></p>
<p>当前 = 玩家<var id="currentPlayerNumber">0</var></p>
<p> <p>
<button id="buttonJoin" style="color:red;" onclick="player.emit('join')">加入</button> <button id="buttonJoin" style="color:red;" onclick="player.emit('join')">加入</button>
<button id="buttonGo" onclick="player.emit('go')">出牌</button> <button id="buttonGo" onclick="player.emit('go')">出牌</button>
<button id="buttonAuto">自动</button> <button id="buttonAuto">自动</button>
</p> </p>
<p id="cardsDisplay"></p> <p id="cardsDisplay"></p>
<!-- https://github.com/cardmeister/cardmeister.github.io -->
<script src="/elements.cardmeister.min.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script> <script src="/client.js"></script>
</body> </body>
</html> </html>

133
server.js
View File

@ -1,9 +1,10 @@
const express = require('express') const express = require('express')
const 游戏 = express() const 应用 = express()
游戏.use(express.static('public')) 应用.use(require('compression')())
应用.use(express.static('public'))
const 主机 = process.env.HOST || '0.0.0.0' const 主机 = process.env.HOST || '0.0.0.0'
const 端口 = process.env.PORT || 3000 const 端口 = process.env.PORT || 3000
const 服务器 = 游戏.listen(端口, 主机, () => console.log(`小猫钓鱼游戏服务运行在 http://${主机}:${端口}/`)) const 服务器 = 应用.listen(端口, 主机, () => console.log(`小猫钓鱼游戏服务运行在 http://${主机}:${端口}/`))
const IO = require('socket.io')(服务器) const IO = require('socket.io')(服务器)
const clients = [] // 所有客户 const clients = [] // 所有客户
@ -70,68 +71,68 @@ function gameStart() {
cardsOnTable.length = 0 cardsOnTable.length = 0
currentPlayerNumber = 0 currentPlayerNumber = 0
// 洗牌每玩家发18张 // 洗牌每玩家发18张
const drawer = [ const deck = [
{ color: '♠️', value: '2' }, { suit: 's', rank: '2' },
{ color: '♠️', value: '3' }, { suit: 's', rank: '3' },
{ color: '♠️', value: '4' }, { suit: 's', rank: '4' },
{ color: '♠️', value: '5' }, { suit: 's', rank: '5' },
{ color: '♠️', value: '6' }, { suit: 's', rank: '6' },
{ color: '♠️', value: '7' }, { suit: 's', rank: '7' },
{ color: '♠️', value: '8' }, { suit: 's', rank: '8' },
{ color: '♠️', value: '9' }, { suit: 's', rank: '9' },
{ color: '♠️', value: '10' }, { suit: 's', rank: 'T' },
{ color: '♠️', value: 'J' }, { suit: 's', rank: 'J' },
{ color: '♠️', value: 'Q' }, { suit: 's', rank: 'Q' },
{ color: '♠️', value: 'K' }, { suit: 's', rank: 'K' },
{ color: '♠️', value: 'A' }, { suit: 's', rank: 'A' },
{ color: '♥️', value: '2' }, { suit: 'h', rank: '2' },
{ color: '♥️', value: '3' }, { suit: 'h', rank: '3' },
{ color: '♥️', value: '4' }, { suit: 'h', rank: '4' },
{ color: '♥️', value: '5' }, { suit: 'h', rank: '5' },
{ color: '♥️', value: '6' }, { suit: 'h', rank: '6' },
{ color: '♥️', value: '7' }, { suit: 'h', rank: '7' },
{ color: '♥️', value: '8' }, { suit: 'h', rank: '8' },
{ color: '♥️', value: '9' }, { suit: 'h', rank: '9' },
{ color: '♥️', value: '10' }, { suit: 'h', rank: 'T' },
{ color: '♥️', value: 'J' }, { suit: 'h', rank: 'J' },
{ color: '♥️', value: 'Q' }, { suit: 'h', rank: 'Q' },
{ color: '♥️', value: 'K' }, { suit: 'h', rank: 'K' },
{ color: '♥️', value: 'A' }, { suit: 'h', rank: 'A' },
{ color: '♣️', value: '2' }, { suit: 'c', rank: '2' },
{ color: '♣️', value: '3' }, { suit: 'c', rank: '3' },
{ color: '♣️', value: '4' }, { suit: 'c', rank: '4' },
{ color: '♣️', value: '5' }, { suit: 'c', rank: '5' },
{ color: '♣️', value: '6' }, { suit: 'c', rank: '6' },
{ color: '♣️', value: '7' }, { suit: 'c', rank: '7' },
{ color: '♣️', value: '8' }, { suit: 'c', rank: '8' },
{ color: '♣️', value: '9' }, { suit: 'c', rank: '9' },
{ color: '♣️', value: '10' }, { suit: 'c', rank: 'T' },
{ color: '♣️', value: 'J' }, { suit: 'c', rank: 'J' },
{ color: '♣️', value: 'Q' }, { suit: 'c', rank: 'Q' },
{ color: '♣️', value: 'K' }, { suit: 'c', rank: 'K' },
{ color: '♣️', value: 'A' }, { suit: 'c', rank: 'A' },
{ color: '♦️', value: '2' }, { suit: 'd', rank: '2' },
{ color: '♦️', value: '3' }, { suit: 'd', rank: '3' },
{ color: '♦️', value: '4' }, { suit: 'd', rank: '4' },
{ color: '♦️', value: '5' }, { suit: 'd', rank: '5' },
{ color: '♦️', value: '6' }, { suit: 'd', rank: '6' },
{ color: '♦️', value: '7' }, { suit: 'd', rank: '7' },
{ color: '♦️', value: '8' }, { suit: 'd', rank: '8' },
{ color: '♦️', value: '9' }, { suit: 'd', rank: '9' },
{ color: '♦️', value: '10' }, { suit: 'd', rank: 'T' },
{ color: '♦️', value: 'J' }, { suit: 'd', rank: 'J' },
{ color: '♦️', value: 'Q' }, { suit: 'd', rank: 'Q' },
{ color: '♦️', value: 'K' }, { suit: 'd', rank: 'K' },
{ color: '♦️', value: 'A' }, { suit: 'd', rank: 'A' },
{ color: '小', value: 'Joker' }, { suit: '1', rank: '0' },
{ color: '大', value: 'Joker' }, { suit: '2', rank: '0' },
] ]
while (drawer.length > 0) { while (deck.length > 0) {
let index = Math.floor(Math.random() * drawer.length) let index = Math.floor(Math.random() * deck.length)
let card = drawer[index] let card = deck[index]
players[currentPlayerNumber].cards.push(card) players[currentPlayerNumber].cards.push(card)
drawer.splice(index, 1) deck.splice(index, 1)
currentPlayerNumber = (currentPlayerNumber + 1) % 3 currentPlayerNumber = (currentPlayerNumber + 1) % 3
} }
@ -147,12 +148,12 @@ function gameStatus() {
const cardsStrings = [] const cardsStrings = []
for (let card of cardsOnTable) { for (let card of cardsOnTable) {
cardsStrings.push(`[${card.color}${card.value}]`) cardsStrings.push(`${card.rank}${card.suit}`)
} }
IO.emit('status', { IO.emit('status', {
players: cardsNumbers, players: cardsNumbers,
cards: cardsStrings.join(''), cards: cardsStrings,
current: currentPlayerNumber, current: currentPlayerNumber,
}) })
} }
@ -161,13 +162,13 @@ function go(client) {
if (currentPlayerNumber != -1 && players.indexOf(client) === currentPlayerNumber) { if (currentPlayerNumber != -1 && players.indexOf(client) === currentPlayerNumber) {
let card = players[currentPlayerNumber].cards[0] let card = players[currentPlayerNumber].cards[0]
players[currentPlayerNumber].cards.splice(0, 1) players[currentPlayerNumber].cards.splice(0, 1)
console.log(`玩家${currentPlayerNumber + 1} 出牌 [${card.color} ${card.value}]`) console.log(`玩家${currentPlayerNumber + 1} 出牌 [${card.rank}${card.suit}]`)
// 判断有没有钓到 // 判断有没有钓到
let i = 0 let i = 0
let getit = false let getit = false
for (i = 0; i < cardsOnTable.length; i++) { for (i = 0; i < cardsOnTable.length; i++) {
if (cardsOnTable[i].value == card.value) { if (cardsOnTable[i].rank == card.rank) {
getit = true getit = true
break break
} }