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