Compare commits
No commits in common. "a344162d08b4ad0b2de985922bc8f5a913133591" and "fd21a0746d2afff424d5ec58f95eb94d7a68ba21" have entirely different histories.
a344162d08
...
fd21a0746d
@ -1,3 +1,3 @@
|
||||
# 包剪锤
|
||||
# baojianchui
|
||||
|
||||
|
||||
包剪锤
|
||||
2437
package-lock.json
generated
2437
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
@ -1,24 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
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)` : ''
|
||||
})
|
||||
@ -1,31 +0,0 @@
|
||||
<!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
BIN
public/paper.png
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
BIN
public/rock.png
BIN
public/rock.png
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
@ -1,74 +0,0 @@
|
||||
* {
|
||||
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
94
server.js
@ -1,94 +0,0 @@
|
||||
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)
|
||||
}
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user