zhaoxin/rock-paper-scissors
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: zhaoxin:fd21a0746d2afff424d5ec58f95eb94d7a68ba21
Branches Tags
zhaoxin:master
...
compare: zhaoxin:a344162d08b4ad0b2de985922bc8f5a913133591
Branches Tags
zhaoxin:master

6 Commits
fd21a0746d ... a344162d08

Author SHA1 Message Date
赵鑫
a344162d08 新建 2022-08-21 00:42:12 +08:00
赵鑫
4ada6a738f 整理一下 2022-08-21 00:41:48 +08:00
赵鑫
deb700e3b4 添加帮助 2022-08-20 23:34:48 +08:00
赵鑫
6d0c87f45d 新建 2022-08-20 23:17:35 +08:00
赵鑫
f2dc8bebea 初始化项目并安装依赖 2022-08-20 23:17:02 +08:00
赵鑫
5b9d146bae 添加图片 2022-08-20 23:16:20 +08:00
11 changed files with 2693 additions and 2 deletions
Show Stats Expand all files Collapse all files

4
README.md
View File

@ -1,3 +1,3 @@
# baojianchui # 包剪锤
包剪锤 ![](public/rock-paper-scissors.svg.png)

2437
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "baojianchui",
"version": "0.1.0",
"description": "包剪锤",
"main": "server.js",
"scripts": {
"start": "nodemon",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "ssh://git@nas:2222/zhaoxin/baojianchui.git"
},
"keywords": [],
"author": "Zhao Xin <7176466@qq.com>",
"license": "MIT",
"dependencies": {
"express": "^4.18.1",
"socketio": "^1.0.0"
},
"devDependencies": {
"nodemon": "^2.0.19"
}
}

31
public/client.js Normal file
View File

@ -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)` : ''
})

31
public/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" ,content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>石头、剪刀、布</title>
</head>
<body>
<h1>石头、剪刀、布</h1>
<div id="game">
<div id="player1">
<div class="name">玩家甲</div>
<div class="score">0</div>
<div class="shape"></div>
</div>
<div id="player2">
<div class="shape"></div>
<div class="score">0</div>
<div class="name">玩家乙</div>
</div>
</div>
<p><kbd>S</kbd>出剪刀 <kbd>D</kbd>出石头 <kbd>F</kbd>出布 点击自己的名字可以改名</p>
<script src="socket.io/socket.io.js"></script>
<script src="client.js"></script>
</body>
</html>

BIN
public/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/rock-paper-scissors.svg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/rock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/scissors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

74
public/style.css Normal file
View File

@ -0,0 +1,74 @@
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
}
#game {
margin: 20px 0;
}
#game,
#player1,
#player2 {
position: relative;
display: flex;
gap: 10px;
}
.name {
font-size: 2rem;
font-weight: 600;
position: absolute;
}
#player1 .name {
left: 0px;
}
#player2 .name {
right: 0px;
}
.score {
font-size: 100px;
padding: 0 1rem;
}
.score,
.shape {
min-width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.shape {
border-radius: 1rem;
border: 1px solid #777;
background-repeat: no-repeat;
background-size: 200px 200px;
transition: background-image 1s; /* 为什么没有作用？ */
}
#player2 .shape {
transform: scaleX(-1);
}
kbd {
padding: 4px 8px;
border-radius: 0.25rem;
border: 1px solid #777;
background-color: #eee;
}

94
server.js Normal file
View File

@ -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)
}
})
})